Design Systems and Web Components

Fc7368fd45560e1e7401bc80684f5867?s=47 Adam Onishi
September 30, 2016

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.

Fc7368fd45560e1e7401bc80684f5867?s=128

Adam Onishi

September 30, 2016
Tweet

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!