Web Components: Where we are now, and what’s next?

Transcript

1. 1.

   @stopsatgreen Web Components: where we are now, and what next?

   Responsive Day Out 19/06/15
2. 2.

   @stopsatgreen Peter Gasston
 @stopsatgreen
 broken-links.com

3. 3.

   @stopsatgreen For the designers.

4. 4.

   @stopsatgreen Web Components have been around for a while.

5. 5.

   @stopsatgreen In a trough on the hype cycle.

6. 6.

   @stopsatgreen Everybody’s in… but that means trouble.

7. 7.

   @stopsatgreen Web Components enable us to create widgets. CSS JS

   Widget Widget Widget
8. 8.

   @stopsatgreen Composable, reusable, encapsulated. CSS JS Widget Widget Widget

9. 9.

   @stopsatgreen We run things, things don’t run we, don’t take

   nothing from nobody.
10. 10.

    @stopsatgreen React, BEM, etc. are ways of doing this using

    the technologies of today.
11. 11.

    @stopsatgreen The Extensible Web Manifesto. extensiblewebmanifesto.org <picture> <source srcset="foo.png"
 media="(min-width:

    600px)"> <img src="bar.png" alt="Logo"> </picture>
12. 12.

    @stopsatgreen Web Components are: Templates, HTML Imports, Custom Elements, Shadow

    DOM.
13. 13.

    @stopsatgreen Templates. Reusable fragments of inert HTML.

14. 14.

    @stopsatgreen <script type="text/x-tmpl-mustache"> … </script> <template>…</template>

15. 15.

    @stopsatgreen Templates. OK to use, with fallback for IE/Edge.

16. 16.

    @stopsatgreen HTML Imports. Include HTML documents in an HTML document.

17. 17.

    @stopsatgreen <link rel="import" href="file.html"> // file.js export foo; // page.js

    import foo from "file.js";
18. 18.

    @stopsatgreen HTML Imports. Will probably be replaced by ES6 modules.

19. 19.

    @stopsatgreen Shadow DOM. Hide complex markup inside an element.

20. 20.

    @stopsatgreen root = el.createShadowRoot({ mode: 'open' });
 root.innerHTML = '<div>…</div>';

21. 21.

    @stopsatgreen Shadow DOM is very hard to polyfill.

22. 22.

    @stopsatgreen Shadow DOM. Lots still to be defined.

23. 23.

    @stopsatgreen Custom Elements. Meaningful markup with bespoke properties.

24. 24.

    @stopsatgreen <fun-times></fun-times> document.registerElement('fun-times');

25. 25.

    @stopsatgreen <fun-times> = HTMLElement <funtimes> = HTMLUnknownElement document.registerElement('fun-times'); <fun-times> =

    fun-times
26. 26.

    @stopsatgreen fTs = document.querySelector('fun-times');
 fTs.hooray(); p = Object.create(HTMLElement.prototype); p.hooray =

    function() {…}; document.registerElement('fun-times',
 { prototype: p });
27. 27.

    @stopsatgreen // ES6 approach (not final) class fTs extends HTMLElement

    {…} document.registerElement('fun-times', fTs); ES6 offers a better way to do this.
28. 28.

    @stopsatgreen Custom Elements. Approach is sound, some details to finalise.

29. 29.

    @stopsatgreen is A major sticking point.

30. 30.

    @stopsatgreen p = Object.create(HTMLButtonElement.prototype); document.registerElement('fun-times', { prototype: p, extends: 'button'

    }); <button is="fun-times"></button>
31. 31.

    @stopsatgreen is isn’t (probably)

32. 32.

    @stopsatgreen In summary: welcome to the trough of disillusionment.

33. 33.

    @stopsatgreen A tour of the sausage factory.

34. 34.

    @stopsatgreen This is our big opportunity. We need to get

    this right.
35. 35.

    @stopsatgreen A11y, usability, SEO, etc, become our responsibility.

36. 36.

    @stopsatgreen Sturgeon’s Revelation: 90% of everything is crap.

37. 37.

    @stopsatgreen The Gold Standard. github.com/webcomponents/gold-standard/wiki

38. 38.

    @stopsatgreen Loading, DOM Presence, Content, Interaction, API, Styling, Performance, Localisation,

    Factoring, Development.
39. 39.

    @stopsatgreen Unix philosophy: every component does one job.

40. 40.

    @stopsatgreen Learn a library first, then vanilla.

41. 41.

    @stopsatgreen

42. 42.

    @stopsatgreen Everybody’s in. but that means trouble. …

43. 43.

    @stopsatgreen Cheers.

44. 44.

    @stopsatgreen Reading list: • webcomponents.org/articles/why-web-components/ • hacks.mozilla.org/2015/06/the-state-of-web-components/ • aerotwist.com/blog/polymer-for-the-performance-obsessed/ •

    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.