Started (by +Arun Shanker Prasad ) with a slight intro and kicked-off with an overview of a data science application that was built by the Qburst (Company) team. And then moved over to Web Components and Polymer.
Parser Combinators for Event Detection
Presenter : +Navin Philip , Associate Architect, Qburst
A beautiful project data-crunching app that utilises the Theory of Computation to verify and quantify different hypothesis and give useful results. Had a quick demo. d
Presenter : Shyam, Qburst
Why Web Components?
You could import/export encapsulated custom components. There are 4 main technologies in web components.
Include maps in a page.
Polymer , X-tags( (Mozzila), Bosonic (Independent)
New templating tags in html.
Loads custom element and resoureces
npm install -g vulcanize
This a component that brings in the concept of Encapsulation in html. These elements exist but are not a part of the DOM. Have you ever wondered how the video tag works behind the scene? It uses Shadow DOM.
Scoped CSS!!!+encapsulated markup
<div class=“widget”>Hello, world</div>
var host = document.querySelector(“.widget”);
root.innerHTMLL - “<em> I’m inside yr div!</em>"
Element prototype must inherit from HTMLElement
there are things like HTMLUnknownElements that swallows the error when u declare undefined errors
Custom Elements vs AngularJS
CE is similar to directives provided by AngualarJS. AngularJS version 2.0 will be using web components.
<tabs>.. </tabs> //invalid elements
<x-tabsx>.. <x-tabs> //Valid elements
Polymer : The future of web development ?
Presenter :Google - +Vijay Dev , Twitter- @vijaydevin
What are Web Components?
Is an umbrella four four different technologies (explained above).
Have tags like :
Implement functionalities like scroll till the end of agreement on clicking 'I agree' button. (Eg; The feature in android playstore).
Most browsers are yet to catch up with webcomps ( excepet opera, firefox and chrome) and would take a long time. Thats where Polymer comes in.
Polyfills Web Components with webcomponents.js ( previously platform.js ).
- Sugaring: Templates
- Sugaring: Custom Elements
- Sugaring: Shadow Elements
- Sugaring: HTML Imports
Define custom tabs
Map App Example
- Demoed an app like google apps, designed with
- <core-header-panel flex>
Make interfaces we see in Android Lollipop
- With ::shadow and /deep/ you can apply sitewide themes
Good resources to checkout:
- polycasts (Video of what people are doing with polymer
- YO POLYMER (Auto generate a lot of code)
- seed-element ( Create basic, your own element)
- Chrome Dev Editor
Good Web components to checkout
Github is using web components. All timestamps are custom elements.
Rating , accordian
GDG Trivandrum Web : http://www.gdgtvpm.org/