Levent-Gurses' Introduction to Web Components & Polymer

<puzzle-maker background=”grade” from=”#333” to=”#aaa”>

<puzzle-maker background=”metal” col1=”#333” col2=”#aaa”>

<music-player type=”mobile-a” platforms=”ios, android”>

<music-player type=”mobile-b” platforms=”ios, android”>

Introduction to Web Components and Polymer

@gursesl

The Landscape

Web ComponentsWeb Components consist of four pieces that let web application developers define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

● Templates - blocks of markup that are inert but can be activated for use later

● Decorators - which apply templates to let CSS affect visual and behavioral changes

● Shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree

● Custom elements - let developers define their own reusable custom elements

Decorators and custom elements are called components.

Templates

Decorators

Shadow DOM

Custom Elements

customelements.io

Polymer

Polymer is a library for building modular web applications. It is built on new web platform primitives called Web Components.

Web Components are easier to develop, compose, connect and use on the web. The result is an increase in developer productivity.

But, The Question Is...

Is Polymer production-ready? No.

Browser Support

Polymer Designer

Material design is a unified system of visual, motion, and interaction design that adapts across different devices. Material design is inspired by tactile materials, such as paper and ink.

Polymer’s paper elements collection implements material design for the web. The Polymer core elements collection provides a number of unthemed elements that you can use to achieve material design app layouts, transitions, and scrolling effects.

Lifecycle Methods

Data BindingPolymer supports two-way data binding. Data binding extends HTML

and the DOM APIs to support a sensible separation between the UI

(DOM) of an application and its underlying data (model). Updates to

the model are reflected in the DOM and user input into the DOM is

immediately assigned to the model.

PolyfillsCustom JavaScript methods inside webcomponents.js designed to make

non-native browsers (Everything other than Chrome) support web

components. webcomponents.js is a set of polyfills built on top of the

web components specifications. It makes it possible for developers to

use these standards today across all modern browsers.

Polyfill Functionality● Web Components

○ Custom Elements . Define new elements in HTML○ HTML Imports. Load element definitions and other resources

declaratively○ Shadow DOM. Encapsulate DOM subtrees and the associated CSS

● DOM○ WeakMap. Shim for ES6 WeakMap type○ Mutation Observers. Efficiently watch for changes in the DOM

Scoped Styles<div> <style scoped> h1 { background-color: #333; color: #FFF; } </style> <h1 id="foo">Scoped</h1></div><h1 id="bar">Not Scoped</h1>

Ability to scope styles allows for full encapsulation, especially when used in templates and decorators.

Routing

By combining data-binding, core-scaffold, core-pages/core-animated-pages, and <flatiron-director> (an element for routing), it is possible to create a responsive SPA with deep linking.

The Stack

● Polymer (WC) is not a full stack application framework● It needs a back end

○ Rails/MVC/Sinatra○ ...Or Java, .Net, PHP○ ...Or Node

● Can be used with Angular on the front end

Build & Packaging

● Build○ Gulp○ Grunt

● Packaging○ Bower○ Wcpack

Polymer vs. Angular

● Open standards vs. front-end framework● SPA vs. MPA● Self-contained, reusable elements are more portable● Web Components vs. Angular Directives● The future of Angular - 2.0 will implement web components

Demo

References● Web Components Explained● Browser Compatibility Matrix● Material Design Specification● Polymer Designer● Polymer FAQs● React vs. Web Components● The Problem With Using HTML Imports For Dependency Management● Mobile Chrome Apps● Code Samples - https://github.com/mobiledc/polymer