DEV Community

Discussion on: Why We Use Web Components

Collapse
wintercounter profile image
Victor Vincent

We went on the way of writing our new UI kit in WebComponents using Stencil. We were suffering performance problems (using ~200) components on a single page, but it was reasonable. That was in Chrome but we checked Edge then. It took the site 20+ seconds to load! Upgrading to Stencil One then made it even worse. Seems like using slots is just not a thing using polyfills, it causes re-layout every time it moves an element in the DOM. After struggling for a month with it, we decided to port the kit to React components. Even solved every Chrome issues we had regarding performance. TLDR; WebComponents are fun, but if you need performance and your app has higher magnitude of complexity, native DOM ftw.

Collapse
maxlynch profile image
Max Lynch Author

Hmm, something seems up. Did you ever file an issue? Can dig into it on our end. We have a number of apps with many more components than that without those perf issues.

As for edge, unfortunately due to the lack of native WC support the slot polyfill is used which can impact performance. We see this as a short term problem though it may impact certain users more than others depending on how many Edge users you target. Edge is really the last thorn in the side of WCs.

Collapse
wintercounter profile image
Victor Vincent

Well, the most important Edge user for us is the company owner :D Don't tell me... :)

Thread Thread
_ergo_ profile image
Marcin Lulek

Hey do you have a demo of old version of the component system somewhere to look at? Granted we do not use Stencil in our systems but we had pages with hundreds of components and never faced issues like this even in IE.

Thread Thread
wintercounter profile image
Victor Vincent

Unfortunately not. It's not public. What I can tell is that we were deeply relying on slots with multiple levels of nested components supporting multiple slots also.

Collapse
leob profile image
leob • Edited on

Funny ... Edge was supposed to be a complete rewrite that was going to solve all the issues with IE once and for all, right? Guess we were naive to believe it. They should have just used Webkit, less headaches for them and for the rest of the world. Microsoft under Nadella changed a lot, but old habits die slowly.

By the way, fantastic post, Max! Really impressive work with Stencil, and the case for Web Components (e.g. in a larger heterogeneous corporate setting etc) is articulated well.

Collapse
alaindet profile image
Alain D'Ettorre

Can you elaborate on why Web Components performed significantly worse than React components?

Collapse
wintercounter profile image
Victor Vincent

The main problem was the polyfilled slots in old Edge.