Polymer is a library for building custom elements that takes advantage of Web Components and is designed to work across browsers. It was created by Google to make developing custom elements easier and provide fallbacks for browsers that do not yet support the full Web Components specification. Polymer provides features to define custom elements and handle data binding, events, and other functionality that works similarly to standard DOM elements. The Polymer library and tools like the App Toolbox can be used to build complete applications and progressive web apps. Alternatives to Polymer for building custom elements include X-Tag, Bosonic, and SkateJS.

1. Polyamory Polymer 101

2. Content
● Origins
● What is Polymer?
● Web components: what it is and its limitations
● Why Polymer?
● Examples
● Polymer App Toolbox
● Polymer vs other frameworks
● Alternatives to Polymer
● Recommended resources
● Q&A
2

3. Origins
● Open-sourced by Google
● Initial release: May 2015
● About the Polymer project
● Their mission:
○ Our mission is to make life better for users and developers, by helping developers unlock the web
platform’s full potential and by spurring the web platform to evolve and improve.
3

4. What is Polymer?
Polymer is a new type of library for the web, built on top of Web Components, and
designed to leverage the evolving web platform on modern browsers.
The Polymer library provides a set of features for creating custom elements. These
features are designed to make it easier and faster to make custom elements that work
like standard DOM elements.
It’s an implementation for Web Components.
Here you have a simple example
4

5. Web Components
● Proposed by https://www.w3.org/2008/webapps/
● Included into HTML5
● Native/standard way to create reusable widgets or components in web documents
and web applications.
○ The intention behind them is to bring component-based software engineering to the World Wide
Web. The components model allows for encapsulation and interoperability of individual HTML
elements.
○ Example
● http://webcomponents.org/
● W3c links:
○ https://www.w3.org/TR/components-intro/
○ https://www.w3.org/wiki/WebComponents/
○ https://github.com/w3c/webcomponents 5

6. Web Components
● Custom elements
○ Technology responsible for creating our own elements, just like the native ones.
● HTML imports
○ HTML Imports are a way to include and reuse HTML documents in other HTML documents.
● Templates
○ The <template> tag, which allows documents to contain inert chunks of DOM
● Shadow DOM
○ Technology responsible for scoping our element and not letting JS/CSS overflow out of it, so it is
enclosed, separate, reusable block.
○ 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.
○ Encapsulate DOM subtrees and the associated CSS. 6

7. Current Web Components limitations
● Web Components can not be used in every browser yet:
○ http://caniuse.com/#search=web%20components
○ If we used WC today, it would only work in Chrome and Opera.
● Shadow DOM is in Editor's Draft, which means that it will change:
○ https://w3c.github.io/webcomponents/spec/shadow/
7

8. Why Polymer?
● Polymer is built on native functionality, and not on custom solutions.
● Being able to use WC today.
● A graceful fallback for WC: in Chrome it will use the standard native WC, but in
IE it would run Polymer in order to mimic the WC behaviour.
● Same declaration as specs change
● Helper functions and features
● Just be getting better/faster
● Polymer community: take advantage of everything created by other people
8

9. Examples
http://bstavroulakis.com/pluralsight/courses/polymer-js-getting-started/
Examples about:
● Lifecycle callbacks
● Filter and sorting
● Observer
● Data binding
● CSS variables and mixins
● Polymer events
● Gesture events
● Behaviors
9

10. Polymer App Toolbox
Polymer App Toolbox is a collection of components, tools and templates for building
Progressive Web Apps with Polymer.
● https://www.polymer-project.org/1.0/toolbox/
● Component-based architecture using Polymer and web components.
● Responsive design using the app layout components.
● Modular routing using the <app-route> elements.
● Localization with <app-localize-behavior>.
● Turnkey support for local storage with app storage elements.
● Offline caching as a progressive enhancement, using service workers.
10

11. Polymer App Toolbox (II)
● Tutorial: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
● Instant loading: service workers, Push notifications, Responsive, Fast, Add to
Home Screen
● Example: https://shop.polymer-project.org/
● How to: https://www.polymer-project.org/1.0/toolbox/case-study
11

12. Angular 2 + Polymer
It’s very common to read about the integration of Polymer in Angular2:
● Use Polymer for creating reusable web components
● Use Angular2 as a whole framework (routing, data binding, MVC, HTTP client,
testing, etc.)
https://www.adictosaltrabajo.com/tutoriales/integracion-de-angular-2-con-polymer/
12

13. Polymer vs other frameworks
● Polymer example:
○ https://plnkr.co/edit/zYDDOfqSPTbfw4nPnzlU?p=preview
● Angular 2 example:
○ https://plnkr.co/edit/zYDDOfqSPTbfw4nPnzlU?p=preview
● React.js example:
○ https://plnkr.co/edit/Wxl9Jc7kE26TbMAtAIbk?p=preview
● Ember.js example:
○ https://plnkr.co/edit/neq4TLRe5QouzPtTUYsE?p=preview
13

14. Alternatives to Polymer
● X-Tag
○ http://x-tag.github.io/
○ X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components
Custom Element capabilities to all modern browsers.
● Bosonic
○ http://bosonic.github.io/
○ Bosonic is a set of tools that enable you to build Web Components as the spec currently describes,
and supporting not-so-modern browsers like IE9.
● SkateJS
○ https://github.com/skatejs/skatejs
○ SkateJS is a superset of the web component specs, with a very small footprint, that enables you to
write performant web components using a functional rendering pipeline.
14

15. Recommended resources (Web Components)
http://octuweb.com/introduccion-web-components
http://webcomponents.org/
https://customelements.io/
15

16. Recommended resources (Polymer)
https://www.polymer-project.org/1.0/start/
https://app.pluralsight.com/library/courses/polymer-js-getting-started/table-of-contents
https://www.adictosaltrabajo.com/tutoriales/polymer-2/
Paradigma Digital - [Meetup] Polymer: construyendo componentes web
https://en.wikipedia.org/wiki/Polymer_(library)
https://www.polymer-project.org/1.0/about
16

17. 17

18. 18