Web Components Now

A snapshot of the the state of development of Web Components. Given at MK Geek Night. #MKGN

Transcript

1. @stopsatgreen Web Components Now MK Geek Night 11/06/15
2. @stopsatgreen Peter Gasston
 @stopsatgreen
 broken-links.com
3. @stopsatgreen For the designers.
4. @stopsatgreen Web Components enable us to create widgets.
5. @stopsatgreen Composable, reusable, encapsulated.
6. @stopsatgreen The Extensible Web Manifesto. extensiblewebmanifesto.org
7. @stopsatgreen <picture> <source srcset="foo.png"
 media="(min-width: 600px)"> <img src="bar.png" alt="Logo"> </picture>
8. @stopsatgreen Web Components have been around for a while.
9. @stopsatgreen Web Components FTW WTF
10. @stopsatgreen In a trough on the hype cycle.
11. @stopsatgreen Everybody’s in… but that means trouble.
12. @stopsatgreen Templates, HTML Imports, Custom Elements, Shadow DOM.
13. @stopsatgreen Templates.
14. @stopsatgreen <script type="text/x-tmpl-mustache"> … </script> <template>…</template>
15. @stopsatgreen Templates. OK to use, with fallback for IE/Edge.
16. @stopsatgreen HTML Imports.
17. @stopsatgreen <link rel="import" href="file.html"> // file.js export foo; // page.js import foo from "file.js";
18. @stopsatgreen HTML Imports. Looking doubtful. ES6 modules, perhaps?
19. @stopsatgreen Shadow DOM.
20. @stopsatgreen sR = el.createShadowRoot({ mode: 'open' });
 sR.innerHTML = '<div>…</div>';
21. @stopsatgreen Shadow DOM is very hard to polyfill.
22. @stopsatgreen Shadow DOM. Lots to still be defined.
23. @stopsatgreen Web Components FTW WTF TBD
24. @stopsatgreen Custom Elements.
25. @stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');
26. @stopsatgreen <fun-times> = HTMLElement <funtimes> = HTMLUnknownElement document.registerElement('fun-times'); <fun-times> = fun-times
27. @stopsatgreen fTs = document.querySelector('fun-times');
 fTs.hooray(); p = Object.create(HTMLElement.prototype); p.hooray = function() {…}; document.registerElement('fun-times',
 { prototype: p });
28. @stopsatgreen However, ES6 has a better way to do this.
29. @stopsatgreen // ES6 way (not final) class fTs extends HTMLElement {…} document.registerElement('fun-times', fTs); // current way p = Object.create(HTMLElement.prototype); document.registerElement('fun-times',
 { prototype: p });
30. @stopsatgreen Custom Elements. Approach is sound, some details to finalise.
31. @stopsatgreen is
32. @stopsatgreen p = Object.create(HTMLButtonElement.prototype); document.registerElement('fun-times', { prototype: p, extends: 'button' }); <button is="fun-times"></button>
33. @stopsatgreen is isn’t (probably)
34. @stopsatgreen A11y, usability, SEO, are our responsibility.
35. @stopsatgreen The Gold Standard. github.com/webcomponents/gold-standard/wiki
36. @stopsatgreen Loading, DOM Presence, Content, Interaction, API, Styling, Performance, Localisation, Factoring, Development.
37. @stopsatgreen Unix philosophy: every component does one job.
38. @stopsatgreen I bet you feel sad now.
39. @stopsatgreen A tour of the sausage factory.
40. @stopsatgreen We need to get this right.
41. @stopsatgreen Learn a library first, then vanilla.
42. @stopsatgreen
43. @stopsatgreen Everybody’s in…
44. @stopsatgreen Cheers. I’ve been Peter Gasston.
45. @stopsatgreen Reading list: • webcomponents.org/articles/why-web- components/ • hacks.mozilla.org/2015/06/the-state-of-web- components/ • tjvantoll.com/speaking/slides/Web-Components- Catch/San-Francisco/web-components-catch.pdf • w3.org/2015/04/24-webapps-minutes.html • … and many, many more.