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