When to use web components

My presentation at the FrontendDeveloperLove 2018 conference

Transcript

1. When to use web components Tim van der Lippe TimvdLippe
2. Remote Polymer team member Master student Computer Science Delft University of Technology
3. 3 accepted standards
4. Schedule Accepted standards • <template> • Shadow DOM • Custom Elements Examples
5. <template> element
6. Blueprint <template> <header> TODOList: </header> <span>Presentation at: <a href="https://www.frontenddeveloperlove.com/" >FrontendDevelopersLove</a> </span> </template>
7. Dynamically creating DOM
8. Dynamically creating DOM node.innerHTML = ` <header> TODOList: </header> <span>Presentation at: <a href="https://www.frontenddeveloperlove.com/" >FrontendDevelopersLove</a> </span> `
9. Dynamically creating DOM const header = document.createElement('header'); header.innerText = `TODOList`; const span = document.createElement('span'); const a = document.createElement('a'); a.href = `https://www.frontenddeveloperlove.com/`; a.innerText = `FrontendDevelopersLove`; span.appendChild(document.createTextNode('Presentation at:')) span.appendChild(a) node.appendChild(header); node.appendChild(span);
10. Performance problems Parsing (innerHTML)
11. Performance problems Creation of JS nodes (document.createElement)
12. Performance problems DOM manipulation (all)
13. Dynamically creating DOM const template = document.createElement('template'); template.innerHTML = ` <header> TODOList: </header> <span>Presentation at: <a href="https://www.frontenddeveloperlove.com/" >FrontendDevelopersLove</a> </span>`; node.appendChild(template.content.cloneNode(true));
14. https://jsperf.com/clonenode-vs-createelement-performance/95 Method Ops/sec Relative speed innerHTML 22,828 32% createElement 31,566 45% createElement (abstraction) 25,440 36% template.content.cloneNode 69,874 100%
15. When to use <template> Creating DOM based on the same “template” (e.g. component) Efficiently update DOM after the fact (lit-html) Only creating DOM once “template” only consists of dynamic parts
16. Shadow DOM
17. Native elements have encapsulation http://techslides.com/demos/sample-videos/small.mp4
18. Native elements have encapsulation http://techslides.com/demos/sample-videos/small.mp4
19. Native elements have encapsulation CSS rules do not reach into shadow DOM Hide implementation details
20. CSS scoping/encapsulation Naming convention (BEM)
21. CSS scoping/encapsulation Runtime class generation (styled-components)
22. CSS scoping/encapsulation None (and pray)
23. User-exposed Shadow DOM const div = document.createElement('div'); div.attachShadow({mode: 'open'}); div.shadowRoot.innerHTML = ` <style> span { color: red; } </style> <span>In Shadow DOM</span>` document.body.appendChild(div); https://dom.spec.whatwg.org/#dom-element-attachshadow
24. User-exposed Shadow DOM const div = document.createElement('div'); div.attachShadow({mode: 'open'}); div.shadowRoot.innerHTML = ` <style> span { color: red; } </style> <span>In Shadow DOM</span>` document.body.appendChild(div); https://dom.spec.whatwg.org/#dom-element-attachshadow
25. User-exposed Shadow DOM const div = document.createElement('div'); div.attachShadow({mode: 'open'}); div.shadowRoot.innerHTML = ` <style> span { color: red; } </style> <span>In Shadow DOM</span>` document.body.appendChild(div); https://dom.spec.whatwg.org/#dom-element-attachshadow
26. User-exposed Shadow DOM const div = document.createElement('div'); div.attachShadow({mode: 'open'}); div.shadowRoot.innerHTML = ` <style> span { color: red; } </style> <span>In Shadow DOM</span>` document.body.appendChild(div); https://dom.spec.whatwg.org/#dom-element-attachshadow
27. Other (implementation) benefits Cheap style invariance checks Simple CSS selectors
28. When to use Shadow DOM Encapsulate DOM to prevent taint by global CSS Hide implementation details Overusing Shadow DOM
29. Custom Elements
30. Team Parkour Research + prototype team Alex Russell Polymer Summit 2017 https://www.youtube.com/watch?v=y-8Lmg5Gobw
31. Team Parkour State-of-the-art back then Alex Russell Polymer Summit 2017 https://www.youtube.com/watch?v=y-8Lmg5Gobw
32. Team Parkour Identify areas that are common Alex Russell Polymer Summit 2017 https://www.youtube.com/watch?v=y-8Lmg5Gobw
33. Component model $.widget('ui.menu', { defaultElement: '<ul>', options: { role: 'menu' }, _create: function() { this.activeMenu = this.element; this._addClass('ui-menu', 'ui-widget ui-widget-content'); }
34. Component model goog.ui.MenuItem = function(content, opt_model, opt_domHelper, opt_renderer) { goog.ui.Control.call( this, content, opt_renderer || goog.ui.MenuItemRenderer.getInstance(), opt_domHelper) this.setValue(opt_model); } goog.inherits(goog.ui.MenuItem, goog.ui.Control);
35. Dojo dojo.declare('dijit.MenuItem' [dijit._Widget, dijit._Templated, dijit._Contained], { // Summary: A line item in a Menu Widget } )
36. Angular React Vue ngOnInit constructor created ngAfterContentChecked componentDidMount mounted ngOnDestroy componentWillUnmount destroyed ngOnChanges componentDidUpdate updated
37. Angular React Vue ngOnInit constructor created ngAfterContentChecked componentDidMount mounted ngOnDestroy componentWillUnmount destroyed ngOnChanges componentDidUpdate updated Native constructor connectedCallback disconnectedCallback attributeChangedCallback
38. https://xkcd.com/927/
39. Investigated improvements HTML & DOM JS CSS Custom Elements Classes CSS Variables <template> Promise Web animations Shadow DOM async/await
40. Browser standards • •
41. class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = 'Hello World!'; } connectedCallback() { console.log('connected!'); } disconnectedCallback() { console.log('disconnected'); } }; customElements.define('hello-world', HelloWorld); <hello-world> </hello-world>
42. class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = 'Hello World!'; } connectedCallback() { console.log('connected!'); } disconnectedCallback() { console.log('disconnected'); } }; customElements.define('hello-world', HelloWorld); <hello-world> </hello-world>
43. class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = 'Hello World!'; } connectedCallback() { console.log('connected!'); } disconnectedCallback() { console.log('disconnected'); } }; customElements.define('hello-world', HelloWorld); <hello-world> </hello-world>
44. class HelloWorld extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = 'Hello World!'; } connectedCallback() { console.log('connected!'); } disconnectedCallback() { console.log('disconnected'); } }; customElements.define('hello-world', HelloWorld); <hello-world> </hello-world>
45. When to use Custom Elements Components on the web (without libraries) Base layer for library authors Interoperability between components Solutions that do not require a component
46. Combine together
47. <profile-picture picture="TimvdLippe"> </profile-picture>
48. const template = document.createElement('template'); template.innerHTML = ` <style>img { border-radius: 50%; }</style> <img src="domain.com/fallback.png" /> `; class ProfilePicture extends HTMLElement{ constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this._image = this.shadowRoot.querySelector('img'); } static get observedAttributes() { return ['picture']; } attributeChangedCallback(name, oldValue, newValue) { this._image.src = `domain.com/${newValue}.png`; } } customElements.define('profile-picture', ProfilePicture);
49. const template = document.createElement('template'); template.innerHTML = ` <style>img { border-radius: 50%; }</style> <img src="domain.com/fallback.png" /> `; class ProfilePicture extends HTMLElement{ constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this._image = this.shadowRoot.querySelector('img'); } static get observedAttributes() { return ['picture']; } attributeChangedCallback(name, oldValue, newValue) { this._image.src = `domain.com/${newValue}.png`; } } customElements.define('profile-picture', ProfilePicture);
50. const template = document.createElement('template'); template.innerHTML = ` <style>img { border-radius: 50%; }</style> <img src="domain.com/fallback.png" /> `; class ProfilePicture extends HTMLElement{ constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this._image = this.shadowRoot.querySelector('img'); } static get observedAttributes() { return ['picture']; } attributeChangedCallback(name, oldValue, newValue) { this._image.src = `domain.com/${newValue}.png`; } } customElements.define('profile-picture', ProfilePicture);
51. const template = document.createElement('template'); template.innerHTML = ` <style>img { border-radius: 50%; }</style> <img src="domain.com/fallback.png" /> `; class ProfilePicture extends HTMLElement{ constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this._image = this.shadowRoot.querySelector('img'); } static get observedAttributes() { return ['picture']; } attributeChangedCallback(name, oldValue, newValue) { this._image.src = `domain.com/${newValue}.png`; } } customElements.define('profile-picture', ProfilePicture);
52. const template = document.createElement('template'); template.innerHTML = ` <style>img { border-radius: 50%; }</style> <img src="domain.com/fallback.png" /> `; class ProfilePicture extends HTMLElement{ constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(template.content.cloneNode(true)); this._image = this.shadowRoot.querySelector('img'); } static get observedAttributes() { return ['picture']; } attributeChangedCallback(name, oldValue, newValue) { this._image.src = `domain.com/${newValue}.png`; } } customElements.define('profile-picture', ProfilePicture);
53. Webcomponent libraries
54. https://timvdlippe.github.io/react-imgpro/ Based on https://github.com/nitin42/react-imgpro
55. “And React's component based model was perfect for hiding all the implementation details in a component”
56. And Web component based model was perfect for hiding all the implementation details in a component
57. Straightforward translation componentDidMount connectedCallback JSX <template> defaultProps observedAttributes
58. Conclusion
59. We talked about <template> Shadow DOM Custom Elements
60. Interoperability
61. When to use web components <template> Shadow DOM Custom Elements TimvdLippe