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.

Transcript

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

   View Slide

2. Martin Hochel
   Principal Engineer @Productboard,
   GDE WEB, Microsoft MVP
   Prague / Czech Republic
   @martin_hotell
   medium.com/@martin_hotell
   github.com/hotell
   

   View Slide

3. Disclaimer
   I might be biased...
   Former core member of skateJS ❤
   Used WebComponents in production
   

   View Slide

4. Meanwhile on the internet
   "Web Components will replace your
   frontend framework"
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Why Web Components ?
   

   View Slide

9. Let's write
   a WebComponent
   

   View Slide

10. Live coding
    

    View Slide

11. Check it out on Github
    

    View Slide

12. web component
    

    View Slide

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
    

    View Slide

14. Let's talk about the cons a bit
    

    View Slide

15. Global namespace
    

    View Slide

16. Global namespace
    Proposal for namespaced registry
    

    View Slide

17. Progressive Enhancement
    &
    Accessibility
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. DX (Developer Experience)
    

    View Slide

22. DX
    "To author Web Components you'll need a library"
    Martin Hochel, revojs 2019
    

    View Slide

23. So what's the problem with using a
    library ?
    

    View Slide

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

    View Slide

25. Web Components = ZERO runtime ?
    

    View Slide

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

    View Slide

27. Web Components + library = zero runtime ?
    
    lit-element
    v1
    lit-element
    v2
    haunted v2 haunted v1
    x-tag v1 x-tag v2
    6 Web Components
    =
    libraries 37.4 kB
    +
    Implementation
    

    View Slide

28. SVG
    

    View Slide

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.
    

    View Slide

30. Forms
    

    View Slide

31. Forms
    - Broken standard submit
    - Broken form autofill
    - Broken a11y (aria-labelledby)
    - shadow trees introduce boundaries for ID's
    Read the full proposal document
    

    View Slide

32. Server Side Rendering
    

    View Slide

33. Server Side rendering
    - Declarative Shadow Dom
    DECLINED
    

    View Slide

34. Server Side rendering
    - You'll need to build your own pipeline
    - Puppeteer
    - @skate/ssr
    More info
    

    View Slide

35. Everything that Web Components
    try to solve
    is already solved today
    

    View Slide

36. State of Components without Web Components
    ✅ Encapsulation
    ✅ Themability
    ✅ Declarative component model
    ✅ Great DX
    ✅ SVG
    ✅ Server Side rendering
    ✅ Interop *
    ✅ Small/ZERO runtime
    Preact Svelte
    

    View Slide

37. Should we ditch Web Components?
    

    View Slide

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

    View Slide

39. Should we learn Web Components?
    

    View Slide

40. Sure, Why not !
    

    View Slide

41. Should we use Web Components?
    

    View Slide

42. Depends/Maybe
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

45. ‍♀ Summary
    

    View Slide

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

    View Slide

47. Use the right tool for the right job
    

    View Slide

48. Thanks !
    Martin Hochel
    @martin_hotell
    

    View Slide