Polyamory Polymer 101

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

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

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

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

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 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

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

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

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

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 elements. ● Localization with . ● Turnkey support for local storage with app storage elements. ● Offline caching as a progressive enhancement, using service workers. 10

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

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

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

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

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

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

18