[Martin Splitt] A look at the guts of Polymer 2.0

@g33konaut Polymer 2.0 A look at the guts Martin Splitt
Head of Engineering @ Archilogic

@g33konaut доброго ранку Як поживаєте?

@g33konaut #dfua What we’ll talk about 1. Vanilla Web Components
with the v1 APIs

with the v1 APIs 2. Polymer 2.0 & the pain points it solves

with the v1 APIs 2. Polymer 2.0 & the pain points it solves 3. A bit on HTML Imports & ES Modules

@g33konaut Vanilla Use the platform!

@g33konaut #dfua Vanilla web components • Extend HTMLElement

@g33konaut #dfua Vanilla web components • Extend HTMLElement • Init
Shadow DOM & load template

@g33konaut #dfua Vanilla web components • Extend HTMLElement • Init
Shadow DOM & load template • Sync attributes & properties

@g33konaut #dfua Extend HTMLElement my-elem.html class MyElem extends HTMLElement {
constructor() { super() this.attachShadowRoot({ mode: 'open' }) } }

@g33konaut #dfua Extend HTMLElement my-elem.html class MyElem extends HTMLElement {
constructor() { super() this.attachShadowRoot({ mode: 'open' }) } } Always call super first

@g33konaut #dfua Load template my-elem.html const doc = document.currentScript.ownerDocument class
MyElem extends HTMLElement { /* ... */ static get template() { return doc.querySelector('template').content } connectedCallback() { this.shadowRoot.importNode(template, true) // update DOM } }

@g33konaut #dfua Sync attributes and properties 1/2 my-elem.html class MyElem
extends HTMLElement { /* ... */ connectedCallback() { this.shadowRoot.importNode(template, true) // update DOM } }

@g33konaut #dfua Sync attributes and properties 2/2 my-elem.html class MyElem
extends HTMLElement { /* ... */ static get observedAttributes() { return ["message"]; } attributeChangedCallback(name, prev, value) { this._message = value } }

@g33konaut #dfua Update the dom my-elem.html class MyPolyElem extends Polymer.Element
{ /* ... */ updateDOM() { const content = this.shadowRoot content.querySelector('span').textContent = this.message } }

@g33konaut

@g33konaut #dfua Uuuuuuhhhhh, That was quite a bit of boilerplate.
Isn’t there something to do it for me? - every web developer looking at web components

@g33konaut Polymer Making web components sweeter

@g33konaut Polymer No magic, just good stuff™

@g33konaut #dfua Polymer • Provides Polymer.Element

@g33konaut #dfua Polymer • Provides Polymer.Element • Simplifies template loading
(“Taco”)

(“Taco”) • Handles attribute - property sync

(“Taco”) • Handles attribute - property sync • Allows multi-property observers

(“Taco”) • Handles attribute - property sync • Allows multi-property observers • Sets up data binding

@g33konaut #dfua my-polymer-elem.html <dom-module id="my-elem"> <template> <h1>Yay!</h1> </template> <script> class
MyElem extends Polymer.Element { static get is() { return 'my-elem' } } customElements.define(MyElem.is, MyElem) </script> </dom-module> Polymer

@g33konaut #dfua my-polymer-elem.html class MyElem extends Polymer.Element { /* ...
*/ static get properties() { return { message: { type: String, value: 'Hello' } } } } Polymer properties 1/2 Used for (de-)serialisation

*/ static get properties() { return { message: { type: String, value: 'Hello', reflectToAttribute: true } } } } Polymer properties 2/2 Sync with attribute

*/ static get properties() { return { message: { type: String, value: 'Hello', notify: true } } } } Polymer data binding 1/2 Fires “message-changed” events

@g33konaut #dfua Polymer data binding 2/2 • Parses template contents

• Sets up observers for changes “below”

• Sets up observers for changes “below” • Fires events for changes “above”

@g33konaut #dfua Limits of Polymer data binding class Quiz {
constructor() { this._things = [] } get things() { return this._things } set things(things) { this._things = things } } var q = new Quiz() q.things.push('a') Does the setter get called? NOPE

@g33konaut

@g33konaut #dfua Give Polymer data binding a hint this.notifyPath('things') //
or use the array helper methods this.push('things', 'a')

@g33konaut #dfua my-polymer-elem.html this.dispatchEvent( new CustomEvent('message-changed', { details: { value:
this.message } }) ) Polymer & #usetheplatform

@g33konaut #dfua Polymer is just an opinionated usage of Web
Components - Rob Dodson

@g33konaut #dfua “One more thing...”

@g33konaut Polymer 3.0 Speaking of opinionated... Modules

@g33konaut #dfua HTML Imports

@g33konaut #dfua my-polymer-elem.js class MyPolyElem extends Polymer.Element { static get
template() { return `<div> <h1>Hi, [[name]]!</h1> ` } /* ... */ } ES6 modules & templates

@g33konaut Thank you! Questions? Martin Splitt Head of Engineering @
Archilogic

[Martin Splitt] A look at the guts of Polymer 2.0

[Martin Splitt] A look at the guts of Polymer 2.0

More Decks by Google Developers Group Lviv

Other Decks in Technology

Featured

Transcript