Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The (Real) State of Web Components

The (Real) State of Web Components

2018 is gonna be the year of Web Components they said... Was it? The year is 2019 and people are asking, are Web Components everywhere? Probably not. Why?

This talk will try to answer all these questions you might be asking yourself, by going through a real evaluation of Web Components as the primary tool for authoring web pages and applications.

Martin Hochel

October 04, 2019

More Decks by Martin Hochel

Other Decks in Programming


  1. The (Real) State of Web Components Martin Hochel @martin_hotell USE

  2. Martin Hochel Principal Engineer @Productboard, GDE WEB, Microsoft MVP Prague

    / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
  3. Disclaimer I might be biased... Former core member of skateJS

    ❤ Used WebComponents in production
  4. Meanwhile on the internet "Web Components will replace your frontend

  5. Meanwhile on the internet "2018 - the year of Web

  6. WebComponents everywhere? https://www.chromestatus.com/metrics/feature/timeline/popularity/1689 6% of all pages today use Web

  7. WebComponents everywhere? Can I use WebComponents? https://caniuse.com/#feat=custom-elementsv1 https://caniuse.com/#feat=shadowdomv1

  8. Why Web Components ?

  9. Let's write a WebComponent

  10. Live coding

  11. Check it out on Github

  12. <wc-counter> web component

  13. Web Components Pros & Cons ✅ Encapsulation ✅ Composition ✅

    Themability ✅ Plug and Play ✅ ZERO runtime ✅ Interop with frameworks ❌ Global namespace ❌ Progressive enhancement ❌ A11Y ❌ DX (Developer experience) ❌ SVG ❌ Forms ❌ server side rendering ❌ ...other issues PROS CONS
  14. Let's talk about the cons a bit

  15. Global namespace

  16. Global namespace Proposal for namespaced registry

  17. Progressive Enhancement & Accessibility

  18. Progressive enhancement/A11Y autonomous custom elements ❌ Progressive enhancement ❌ A11Y

  19. Progressive enhancement/A11Y customized built-in elements ✅ Progressive enhancement ✅ A11Y

  20. Progressive enhancement/A11Y Safari supports "Autonomous custom elements" but NOT "Customized

    built-in elements".
  21. DX (Developer Experience)

  22. DX "To author Web Components you'll need a library" Martin

    Hochel, revojs 2019
  23. So what's the problem with using a library ?

  24. You need to learn another framework … ehm I meant

    library ofc !
  25. Web Components = ZERO runtime ?

  26. Web Components + library = zero runtime ? haunted lit-element

  27. Web Components + library = zero runtime ? <html> lit-element

    v1 lit-element v2 haunted v2 haunted v1 x-tag v1 x-tag v2 6 Web Components = libraries 37.4 kB + Implementation
  28. SVG

  29. SVG You can't use Web Components to encapsulate parts of

    an SVG. Whole twitter thread WHY? SVG has a separate namespace - so everything outside the namespace is ignored.
  30. Forms

  31. Forms - Broken standard <form> submit - Broken form autofill

    - Broken a11y (aria-labelledby) - shadow trees introduce boundaries for ID's Read the full proposal document
  32. Server Side Rendering

  33. Server Side rendering - Declarative Shadow Dom DECLINED

  34. Server Side rendering - You'll need to build your own

    pipeline - Puppeteer - @skate/ssr More info
  35. Everything that Web Components try to solve is already solved

  36. State of Components without Web Components ✅ Encapsulation ✅ Themability

    ✅ Declarative component model ✅ Great DX ✅ SVG ✅ Server Side rendering ✅ Interop * ✅ Small/ZERO runtime Preact Svelte
  37. Should we ditch Web Components?

  38. No ! They are here to stay! as will React,

    Angular, Vue ...
  39. Should we learn Web Components?

  40. Sure, Why not !

  41. Should we use Web Components?

  42. Depends/Maybe

  43. When should we use Web Components ✅ Design system (if

    you need to support teams with various stacks) ✅ Plugins (Wordpress, Server Rendered pages) ✅ Micro Frontends ✅ Migration Purposes (AngularJS to Angular)
  44. How should we author Web Components 1. Use your framework

    ✅ 2. Consider Stencil ✅ 3. Use raw WC if you have the skill 1001001 compile 1001001 compile
  45. ‍♀ Summary

  46. "Web Components will replace your frontend framework" MYTH !

  47. Use the right tool for the right job

  48. Thanks ! Martin Hochel @martin_hotell