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

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Transcript

1. @g33konaut Polymer 2.0 A look at the guts Martin Splitt Head of Engineering @ Archilogic
2. @g33konaut доброго ранку Як поживаєте?
3. @g33konaut #dfua What we’ll talk about 1. Vanilla Web Components with the v1 APIs
4. @g33konaut #dfua What we’ll talk about 1. Vanilla Web Components with the v1 APIs 2. Polymer 2.0 & the pain points it solves
5. @g33konaut #dfua What we’ll talk about 1. Vanilla Web Components with the v1 APIs 2. Polymer 2.0 & the pain points it solves 3. A bit on HTML Imports & ES Modules
6. @g33konaut Vanilla Use the platform!
7. @g33konaut #dfua Vanilla web components • Extend HTMLElement
8. @g33konaut #dfua Vanilla web components • Extend HTMLElement • Init Shadow DOM & load template
9. @g33konaut #dfua Vanilla web components • Extend HTMLElement • Init Shadow DOM & load template • Sync attributes & properties
10. @g33konaut #dfua Vanilla web components • Extend HTMLElement • Init Shadow DOM & load template • Sync attributes & properties
11. @g33konaut #dfua Extend HTMLElement my-elem.html class MyElem extends HTMLElement { constructor() { super() this.attachShadowRoot({ mode: 'open' }) } }
12. @g33konaut #dfua Extend HTMLElement my-elem.html class MyElem extends HTMLElement { constructor() { super() this.attachShadowRoot({ mode: 'open' }) } } Always call super first
13. @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 } }
14. @g33konaut #dfua Sync attributes and properties 1/2 my-elem.html class MyElem extends HTMLElement { /* ... */ connectedCallback() { this.shadowRoot.importNode(template, true) // update DOM } }
15. @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 } }
16. @g33konaut #dfua Update the dom my-elem.html class MyPolyElem extends Polymer.Element { /* ... */ updateDOM() { const content = this.shadowRoot content.querySelector('span').textContent = this.message } }
17. @g33konaut
18. @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
19. @g33konaut Polymer Making web components sweeter
20. @g33konaut Polymer No magic, just good stuff™
21. @g33konaut #dfua Polymer • Provides Polymer.Element
22. @g33konaut #dfua Polymer • Provides Polymer.Element • Simplifies template loading (“Taco”)
23. @g33konaut #dfua Polymer • Provides Polymer.Element • Simplifies template loading (“Taco”) • Handles attribute - property sync
24. @g33konaut #dfua Polymer • Provides Polymer.Element • Simplifies template loading (“Taco”) • Handles attribute - property sync • Allows multi-property observers
25. @g33konaut #dfua Polymer • Provides Polymer.Element • Simplifies template loading (“Taco”) • Handles attribute - property sync • Allows multi-property observers • Sets up data binding
26. @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
27. @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
28. @g33konaut #dfua my-polymer-elem.html class MyElem extends Polymer.Element { /* ... */ static get properties() { return { message: { type: String, value: 'Hello', reflectToAttribute: true } } } } Polymer properties 2/2 Sync with attribute
29. @g33konaut #dfua my-polymer-elem.html class MyElem extends Polymer.Element { /* ... */ static get properties() { return { message: { type: String, value: 'Hello', notify: true } } } } Polymer data binding 1/2 Fires “message-changed” events
30. @g33konaut #dfua Polymer data binding 2/2 • Parses template contents
31. @g33konaut #dfua Polymer data binding 2/2 • Parses template contents • Sets up observers for changes “below”
32. @g33konaut #dfua Polymer data binding 2/2 • Parses template contents • Sets up observers for changes “below” • Fires events for changes “above”
33. @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
34. @g33konaut
35. @g33konaut #dfua Give Polymer data binding a hint this.notifyPath('things') // or use the array helper methods this.push('things', 'a')
36. @g33konaut #dfua my-polymer-elem.html this.dispatchEvent( new CustomEvent('message-changed', { details: { value: this.message } }) ) Polymer & #usetheplatform
37. @g33konaut #dfua Polymer is just an opinionated usage of Web Components - Rob Dodson
38. @g33konaut #dfua “One more thing...”
39. @g33konaut Polymer 3.0 Speaking of opinionated... Modules
40. @g33konaut #dfua HTML Imports
41. @g33konaut #dfua HTML Imports
42. @g33konaut #dfua my-polymer-elem.js class MyPolyElem extends Polymer.Element { static get template() { return `<div> <h1>Hi, [[name]]!</h1> ` } /* ... */ } ES6 modules & templates
43. @g33konaut Thank you! Questions? Martin Splitt Head of Engineering @ Archilogic