The (Real) State of Web Components

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

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

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

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

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

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

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

Why Web Components ?

Let's write a WebComponent

Live coding

Check it out on Github

<wc-counter> web component

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

Let's talk about the cons a bit

Global namespace

Global namespace Proposal for namespaced registry

Progressive Enhancement & Accessibility

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

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

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

DX (Developer Experience)

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

So what's the problem with using a library ?

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

Web Components = ZERO runtime ?

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

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

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.

Forms - Broken standard <form> submit - Broken form autoﬁll
- Broken a11y (aria-labelledby) - shadow trees introduce boundaries for ID's Read the full proposal document

Server Side Rendering

Server Side rendering - Declarative Shadow Dom DECLINED

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

Everything that Web Components try to solve is already solved
today

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

Should we ditch Web Components?

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

Should we learn Web Components?

Sure, Why not !

Should we use Web Components?

Depends/Maybe

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)

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

‍♀ Summary

"Web Components will replace your frontend framework" MYTH !

Use the right tool for the right job

Thanks ! Martin Hochel @martin_hotell

The (Real) State of Web Components

The (Real) State of Web Components

More Decks by Martin Hochel

Other Decks in Programming

Featured

Transcript