Levent-Gurses' Introduction to Web Components & Polymer
This is in a developer-focused session on developing iOS apps with Web Components and Google Polymer. Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Published on: Mar 4, 2016
Transcripts - 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
Web 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.
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...
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
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
Polymer 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.
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.
● Web Components
○ Custom Elements . Define new elements in HTML
○ HTML Imports. Load element definitions and other resources
○ Shadow DOM. Encapsulate DOM subtrees and the associated CSS
○ WeakMap. Shim for ES6 WeakMap type
○ Mutation Observers. Efficiently watch for changes in the DOM
<h1 id="bar">Not Scoped</h1>
Ability to scope styles
allows for full
when used in templates
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.
● Polymer (WC) is not a full stack application framework
● It needs a back end
○ ...Or Java, .Net, PHP
○ ...Or Node
● Can be used with Angular on the front end
Build & Packaging
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
● 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