Design Systems and Web Components

Join me for a whirlwind introduction to Web Components. I'll talk about what they're like to work with now and how soon you might be able to expect to use them. I'll also take a look at how we're possibly going to use Web Components in the future with Origami, the components system at the Financial Times.

Transcript

1. Adam Onishi Financial Times @onishiweb Design Systems and Web Components
2. Design Systems
3. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. Nathan Curtis https://twitter.com/nathanacurtis/status/656829204235972608
4. https://www.lightningdesignsystem.com/
5. http://rizzo.lonelyplanet.com/styleguide/
6. https://www.futurelearn.com/pattern-library
7. http://codepen.io/guide/
8. http://origami.ft.com/
9. @onishiweb
10. http://registry.origami.ft.com/components o-header o-table o-card
11. Web Components
12. Create your own HTML elements with self-contained styling
13. Natively in the browser without a framework
14. What does that mean‽ @onishiweb
15. @onishiweb
16. <div class="o-gallery" o-gallery> <ul class="o-gallery__content"> <li class="o-gallery__slide"> <figure class="o-gallery__figure"> <img src="#" alt="text" class="o-gallery__image"> <figcaption class="o-gallery__caption"> This is an image caption </figcaption> </figure> </li> </ul> </div>
17. <o-gallery> <img src="#" alt="text"> <img src="#" alt="text"> <img src="#" alt="text"> </o-gallery>
18. https://github.com/w3c/webcomponents • Custom Elements
19. https://github.com/w3c/webcomponents • Custom Elements • Shadow DOM
20. https://github.com/w3c/webcomponents • Custom Elements • Shadow DOM • HTML Templates
21. Development with Web Components
22. Reusable/interoperable third party components? @onishiweb
23. Web Components in Design Systems @onishiweb
24. Origami and Web Components
25. http://origami-build.ft.com/v2/ Origami Build Service
26. If only there was a spec or suite of specs that handled distribution of HTML… Alice Bartlett Origami Lead Developer
27. <o-gallery> <img src="#" alt="text"> <img src="#" alt="text"> <img src="#" alt="text"> </o-gallery>
28. Developers are lazy!
29. <li class="o-gallery__slide"> <figure class="o-gallery__figure"> <img src="#" alt="text" class="o-gallery__image"> <figcaption class="o-gallery__caption"> This is an image caption </figcaption> </figure> </li> <li class="o-gallery__slide"> <figure class="o-gallery__figure"> <img src="#" alt="text" class="o-gallery__image"> <figcaption class="o-gallery__caption"> This is an image caption </figcaption> </figure> </li> <li class="o-gallery__slide"> <figure class="o-gallery__figure"> <img src="#" alt="text" class="o-gallery__image"> <figcaption class="o-gallery__caption"> This is an image caption </figcaption> </figure>
30. <o-gallery> <img src="#" alt="text"> <img src="#" alt="text"> <img src="#" alt="text"> </o-gallery>
31. No more BEM! @onishiweb
32. Enforcing design standards @onishiweb
33. Other design systems
34. Design tokens @onishiweb
35. CSS variables and CSS mixins @onishiweb
36. Challenges
37. Upgrading Design Systems to Web Components @onishiweb
38. https://github.com/Financial-Times/o-header
39. o-header@^6.10.0
40. o-header@^7.0.0
41. Using Web Components today
42. Libraries @onishiweb
43. @onishiweb • Polymer • x-tag • Bosonic • SkateJS
44. Adam Onishi Financial Times @onishiweb Thank you!