Intro to Web Components
with
About
Yanuar Waskito
Front End Developer at Qiscus
@jeguwaskito
waskito
Web Components
is
New set of web platform features that enable developers to build applications in a declarative, composable way
W3C● Web components are about:
– Templates– Custom Elements– Shadow DOM– Imports
Templates
Method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents
Custom Elements
Method for enabling the author to define and use new types of DOM elements in a document
Shadow DOM
This specification describes a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM.
HTML Imports
HTML Imports are a way to include and reuse HTML documents in other HTML documents.
What we are talking about
● Is not a Framework● Polymer is a library
– uses the latest web technologies – lets you create custom HTML elements– polyfill of web components
Polymer is a library
Polymer is a way of bolting together web components to make robust web applications.
Core Elements
Set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps
Paper Elements
Set of highly visual, highly interactive elements that include things like controls, layouts, hero transitions, and scrolling effects.
Designer
Pros● Modular Components● Consistent UX (Browser/Mobile)● Easy to Customize (via Designer)
Cons● Browser Compatibility :red● Not Beginner Friendly (JavaScript)● Still Experimental
What we are talking about
● Is not a Framework● Polymer is a library
– uses the latest web technologies – lets you create custom HTML elements– polyfill of web components
Demo
Install Polymer
● bower install --save Polymer/polymer● bower install --save Polymer/core-elements● bower install --save Polymer/paper-elements
References● http://www.w3.org/TR/components-intro/● http://www.polymer-project.org/● http://webcomponents.org/
Demo Code: https://github.com/waskito/techtalk-polymer-demo