Web Components: what is coming and what is usable now

Talk given at Utah JS Conf 2013

Slide notes in the .rst source:

https://github.com/whiteinge/presentations/tree/master/utahjs_conf_2013-05-17_web-components

Transcript

1. Web Components Seth House <seth@eseth.com> Utah JS Conf 2013 2013-05-17 Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 1 / 48
2. What’s coming Outline 1 What’s coming An overview Custom elements Shadow DOM Template Object.observe() MutationObserver Model driven views (MDV) 2 What’s usable now Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 2 / 48
3. What’s coming An overview An overview Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 3 / 48
4. What’s coming An overview Slide notes https://github.com/whiteinge/presentations Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 4 / 48
5. What’s coming An overview What are web components <element> / document.register() Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
6. What’s coming An overview What are web components <element> / document.register() Shadow DOM Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
7. What’s coming An overview What are web components <element> / document.register() Shadow DOM <template> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
8. What’s coming An overview What are web components <element> / document.register() Shadow DOM <template> MutationObserver Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
9. What’s coming An overview What are web components <element> / document.register() Shadow DOM <template> MutationObserver Object.observe() Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
10. What’s coming An overview What are web components <element> / document.register() Shadow DOM <template> MutationObserver Object.observe() These specs are not yet finalized! Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 5 / 48
11. What’s coming An overview Why are web components exciting? Encapsulation Embeddable widgets (social media icons) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 6 / 48
12. What’s coming An overview Why are web components exciting? Encapsulation Embeddable widgets (social media icons) Reusable element libs / element frameworks (tabs, modals, nav bars, accordions, carousels) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 6 / 48
13. What’s coming An overview Why are web components exciting? Encapsulation Embeddable widgets (social media icons) Reusable element libs / element frameworks (tabs, modals, nav bars, accordions, carousels) Front-end MV* frameworks Model driven views (MDV) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 6 / 48
14. What’s coming Custom elements Custom elements Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 7 / 48
15. What’s coming Custom elements <element> / document.register() New HTML elements Extend existing elements Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 8 / 48
16. What’s coming Custom elements <element> / document.register() New HTML elements Extend existing elements Element lifecycle hooks Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 8 / 48
17. What’s coming Custom elements <element> / document.register() New HTML elements Extend existing elements Element lifecycle hooks Import / share external components Using standard web techniques Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 8 / 48
18. What’s coming Custom elements Example: declarative style Register the element once: mybutton.html <element name="x-mybutton" extends="button"> <template></template> <style></style> <script></script> </element> Use anywhere: index.html <link rel="import" href="x-mybutton.html"> <x-mybutton>Detonate</x-mybutton> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 9 / 48
19. What’s coming Custom elements Example: imperative style document.register(’x-mybutton’); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 10 / 48
20. What’s coming Custom elements Extend existing elements Create new element object from an element prototype Extends HTMLElement by default document.register(’x-mybutton’, { prototype: Object.create( window.HTMLButtonElement.prototype), }); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 11 / 48
21. What’s coming Custom elements Add constructor reference Always available via standard document.createElement Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 12 / 48
22. What’s coming Custom elements Add constructor reference Always available via standard document.createElement Explicitly add element constructor to window object mybutton.html <element name="x-mybutton" extends="button" constructor="MyButton"> <script> MyButton.prototype = { explode: function(e) { this.innerHTML = "Boom!"; }, }; </script> </element> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 12 / 48
23. What’s coming Custom elements Access as a regular element index.html <link rel="import" href="x-mybutton.html"> <script> var b = new MyButton(); b.addEventListener(’click’, function(e) { e.target.explode(); }); document.body.appendChild(b); </script> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 13 / 48
24. What’s coming Custom elements Getters / setters document.register(’x-mybutton’, { prototype: Object.create( window.HTMLButtonElement.prototype, { bar: { get: function() { return ’bar’ }, }, }), }); console.log( document.querySelector(’x-mybutton’).bar); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 14 / 48
25. What’s coming Custom elements Lifecycle mybutton.html <element name="x-mybutton" extends="button"> <script> this.lifecycle({ created: function() {}, inserted: function() {}, removed: function() {}, attributeChanged: function() {}, }); </script> </element> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 15 / 48
26. What’s coming Shadow DOM Shadow DOM Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 16 / 48
27. What’s coming Shadow DOM Encapsulation Styles inside a shadow root are scoped Styles outside a shadow root don’t apply Can opt-in resetStyleInheritance, applyAuthorStyle Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 17 / 48
28. What’s coming Shadow DOM Encapsulation Styles inside a shadow root are scoped Styles outside a shadow root don’t apply Can opt-in resetStyleInheritance, applyAuthorStyle Browsers already host hidden DOM Browser-native controls <input type="date"> <video src="..."> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 17 / 48
29. What’s coming Shadow DOM Creating a shadow DOM var shadow = host.createShadowRoot(); shadow.innerHTML = "<p>Things</p>"; Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 18 / 48
30. What’s coming Template Template Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 19 / 48
31. What’s coming Template <template> <template> <img src="" class="avatar"> <div class="comment"></div> </template> Clonable blueprint Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 20 / 48
32. What’s coming Template <template> <template> <img src="" class="avatar"> <div class="comment"></div> </template> Clonable blueprint Parsed not rendered (<script type="text/template">) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 20 / 48
33. What’s coming Template <template> <template> <img src="" class="avatar"> <div class="comment"></div> </template> Clonable blueprint Parsed not rendered (<script type="text/template">) Inert until activated Images not loaded, scripts not run, media not played Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 20 / 48
34. What’s coming Template <template> <template> <img src="" class="avatar"> <div class="comment"></div> </template> Clonable blueprint Parsed not rendered (<script type="text/template">) Inert until activated Images not loaded, scripts not run, media not played Activated by appending to a DOM node Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 20 / 48
35. What’s coming Template Example <template> <content select=".comment"></content> </template> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 21 / 48
36. What’s coming Object.observe() Object.observe() Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 22 / 48
37. What’s coming Object.observe() Data binding It’ll change your religion Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 23 / 48
38. What’s coming Object.observe() Data binding It’ll change your religion Watch a POJO (plain ol’ JavaScript object) for changes Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 23 / 48
39. What’s coming Object.observe() Why Update DOM when object changes MDV Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 24 / 48
40. What’s coming Object.observe() Why Update DOM when object changes MDV Persist object to storage backend Current state Changes over time Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 24 / 48
41. What’s coming Object.observe() Why Update DOM when object changes MDV Persist object to storage backend Current state Changes over time Constraints (computed properties) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 24 / 48
42. What’s coming Object.observe() Allows good control over ordering For example: 1 Update value 2 Recalc computed properties 3 Persist new values Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 25 / 48
43. What’s coming Object.observe() Replaces getters & setters or dirty-checking Getters / setters Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 26 / 48
44. What’s coming Object.observe() Replaces getters & setters or dirty-checking Getters / setters Performant Either ES5 getters / setters Call functions instead of referencing values Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 26 / 48
45. What’s coming Object.observe() Replaces getters & setters or dirty-checking Getters / setters Performant Either ES5 getters / setters Call functions instead of referencing values Dirty checking Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 26 / 48
46. What’s coming Object.observe() Replaces getters & setters or dirty-checking Getters / setters Performant Either ES5 getters / setters Call functions instead of referencing values Dirty checking Usually invoked when data can change to check if data did change Potentially expensive (many fast updates) Usually checks entire object Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 26 / 48
47. What’s coming Object.observe() Replaces getters & setters or dirty-checking Getters / setters Performant Either ES5 getters / setters Call functions instead of referencing values Dirty checking Usually invoked when data can change to check if data did change Potentially expensive (many fast updates) Usually checks entire object Angular team benchmarked replacing dirty checking with Object.observe() in Chrome Canary Dropped from 40ms to 2ms 20x–40x faster Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 26 / 48
48. What’s coming Object.observe() Example var myobj = {}; Object.observe(myobj, function(changes) { changes.forEach(function(change) { // new, updated, deleted, reconfigured change.type; // affected object change.object; // affected property name change.name; // value of property before the change change.oldValue; }); }); Object.unobserve(el, callback); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 27 / 48
49. What’s coming Object.observe() ES5 getters/setters ES5 getters/setters (e.g., computed properties) are not observed Object.defineOwnProperty(obj, ’val’, { get: function() { return thing }, set: function(val) { thing = val }, }); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 28 / 48
50. What’s coming Object.observe() ES5 getters/setters ES5 getters/setters (e.g., computed properties) are not observed Object.defineOwnProperty(obj, ’val’, { get: function() { return thing }, set: function(val) { thing = val }, }); Not a solvable problem You must include this functionality yourself inline or by decorating Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 28 / 48
51. What’s coming MutationObserver MutationObserver Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 29 / 48
52. What’s coming MutationObserver What Triggered by DOM changes Adding removing elements Changing elements Changing element attributes Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 30 / 48
53. What’s coming MutationObserver What Triggered by DOM changes Adding removing elements Changing elements Changing element attributes Observer not listener Callback triggered at end of DOM changes with list of all changes Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 30 / 48
54. What’s coming MutationObserver Replaces Mutation Events Fired too often (fired for each change) Slow (event based) Deprecated Stability problems Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 31 / 48
55. What’s coming MutationObserver Why Browser extensions Google Voice extension listens for text changes to transform phone number patterns into hyperlinks. JS libs enhancing HTML; Dojo implementing a combo box, tough to monitor changes after setting it up Framework / library authors Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 32 / 48
56. What’s coming MutationObserver Example var observer = new MutationObserver(function(mutations mutations.forEach(function(record) { record.addedNodes; // nodes }); }); observer.observe(el, { childList: true, // child insert/remove subtree: true, // observer subtree root at el characterData: true, // textContent changes attribute: true, // changes to attributes }); observer.disconnect(); Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 33 / 48
57. What’s coming Model driven views (MDV) Model driven views (MDV) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 34 / 48
58. What’s coming Model driven views (MDV) The big picture Two-way data binding without any code Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 35 / 48
59. What’s coming Model driven views (MDV) The big picture Two-way data binding without any code <polymer-panels on-select="panelSelectHandler" selected="{{selectedPanelIndex}}"> </polymer-panels> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 35 / 48
60. What’s coming Model driven views (MDV) Templating and data binding <ul id="example"> <template iterate> <li>{{ name }} <ul> <template iterate="skills"> <li></li> </template> </ul> </li> </template> </ul> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 36 / 48
61. What’s coming Model driven views (MDV) Templating and data binding <script> document.querySelector(’#example’).model = [ {name: ’Sally’, skills: [’carpentry’]}, {name: ’Helen’, skills: [’weaving’, ’omnipoten ]; </script> Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 37 / 48
62. What’s usable now Outline 1 What’s coming 2 What’s usable now Frameworks Libraries Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 38 / 48
63. What’s usable now Frameworks Frameworks Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 39 / 48
64. What’s usable now Frameworks Angular Not a polyfill Object.observe() -like data-binding (POJO) document.register() -like custom elements (Directives) MDV-like templating Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 40 / 48
65. What’s usable now Frameworks Dart http://www.dartlang.org/ Web components (<element>) Templates (<template>) Encapsulation (emulates Shadow DOM) Data binding (watchers) MDV (DOM templating) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 41 / 48
66. What’s usable now Frameworks Polymer http://polymer-project.appspot.com/ Formerly Toolkitchen; fomerly Toolkitchensink Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 42 / 48
67. What’s usable now Frameworks Polymer http://polymer-project.appspot.com/ Formerly Toolkitchen; fomerly Toolkitchensink platform.js (31 KB) Polyfills (shadow DOM, custom elements, mutation observer, MDV) polymer.js Web application framework Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 42 / 48
68. What’s usable now Frameworks Polymer http://polymer-project.appspot.com/ Formerly Toolkitchen; fomerly Toolkitchensink platform.js (31 KB) Polyfills (shadow DOM, custom elements, mutation observer, MDV) polymer.js Web application framework Custom functional elements Custom UI widget elements Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 42 / 48
69. What’s usable now Frameworks Polymer http://polymer-project.appspot.com/ Formerly Toolkitchen; fomerly Toolkitchensink platform.js (31 KB) Polyfills (shadow DOM, custom elements, mutation observer, MDV) polymer.js Web application framework Custom functional elements Custom UI widget elements Working with Mozilla to ensure compat between shims Browser support: evergreen Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 42 / 48
70. What’s usable now Frameworks X-Tag http://x-tags.org/ https://github.com/x-tag Originally a proof-of-concept Begat the true polyfill Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 43 / 48
71. What’s usable now Libraries Libraries Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 44 / 48
72. What’s usable now Libraries Mozilla’s web-components https://github.com/mozilla/web-components document.register() polyfill Lifecycle events Prototypical element inheritance (1.9 KB) Browser support: ES5 Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 45 / 48
73. What’s usable now Libraries Object.observe() https://github.com/jdarling/Object.observe Uses polling and getters / setters Can miss very quick changes https://github.com/KapIT/observe-shim Requires manually checking for changes (?) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 46 / 48
74. What’s usable now Libraries Watch.JS Not a polyfill for Object.observe() Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 47 / 48
75. What’s usable now Libraries Watch.JS Not a polyfill for Object.observe() https://github.com/melanke/Watch.JS Automatic getters / setters Overrides .push() etc Macro-level dirty-checking (1.4 KB) Browser support: ES5 Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 47 / 48
76. What’s usable now Libraries DOM-based templating with data binding Rivets http://rivetsjs.com/ Two-way data binding Pluggable backends DOM-based templating (2.3 KB) Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 48 / 48
77. What’s usable now Libraries DOM-based templating with data binding Rivets http://rivetsjs.com/ Two-way data binding Pluggable backends DOM-based templating (2.3 KB) JS-Bind http://www.js-bind.com/ Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 48 / 48
78. What’s usable now Libraries DOM-based templating with data binding Rivets http://rivetsjs.com/ Two-way data binding Pluggable backends DOM-based templating (2.3 KB) JS-Bind http://www.js-bind.com/ (6.9 KB) Knockout http://knockoutjs.com/ Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 48 / 48
79. What’s usable now Libraries DOM-based templating with data binding Rivets http://rivetsjs.com/ Two-way data binding Pluggable backends DOM-based templating (2.3 KB) JS-Bind http://www.js-bind.com/ (6.9 KB) Knockout http://knockoutjs.com/ Many others Seth House <seth@eseth.com> (Utah JS Conf 2013) Web Components 2013-05-17 48 / 48