Welcome to Devspedia :) Today I'll talk about custom web components, and how to pick the right lib to get started.
Note: I choose YouTube as cover image for this article, since it's the best known website I know to use Web Components in production.
Let's agree that choosing the right library has one important factor, which is the type of the project you're working on. However, there are some important questions you need to find an answer for before you start coding:
For this comparison I'll discuss 2 powerful candidates:
This is an almost perfect lib. I've tried it on production, and it worked in every situation, and performs really good.
1. Performance: It doesn't do any DOM diffing, and only re-renders the dynamic parts, resulting on less stress on the browser, I saw some very promising benchmarks giving very low page load and time to interactive scores.
2. Size: It's lightweight, only 4.1kb brotli-compressed, and uses lit-html internally, which is 1.1kb brotli-compressed, total almost 5kb overhead on your bundle.
3. Ease of use: Very easy in fact, and clean usage specially when you use the provided decorators such as @customElement, @property,..etc they have a very rich APIs.
4. Official SSR? No. In fact, I can say "not yet" to be more accurate, they have announced in Sept 2020 that they have plans to support SSR, but that's not released yet, here's an experiment they made with SSR.
Now this one is fun to use. If you're familiar with Vue, this will feel familiar, they have the same 1-file component concept that includes component's HTML/CSS/JS in one file, but almost everything else is different.
Svelte doesn't offer Web Components out of the box, you must configure it to export custom web components.
1. Performance: Great results, what's cool about Svelte is; It generates a frameworkless bundle, compared to other front-end frameworks (React, Vue,...). Svelte does not export framework-related assets in your bundle, but rather, it converts all of your code to vanilla JS, resulting in much smaller bundles, and better performance.
2. Size: The library is a bit over 6MBs, but don't worry, this is just the lib during development, remember, the bundle does not include the lib as mentioned earlier. In fact you can generate bundles under 6KB! Check these benchmarks.
3. Ease of use: Similar to Lit-Element, this one is very easy to use too, it includes everything you'll need via their rich APIs.
4. Official SSR? Yes, via Sapper; An official application framework by Svelte for full SSR support. However they will deprecate Sapper in the future, and re-creating the whole SSR experience, which may introduce breaking changes, or maybe not easy to switch from Sapper to Svelte Kit if your project is large enough, and in production, so it's wise to wait for Svelte Kit if you're looking for SSR with Svelte, check the Svelte Kit announcement below.What's the deal with SvelteKit?We're rethinking how to build Svelte apps. Here's what you need to know
Svelte is very hot, fun to develop with, and has advantage of SSR support via Sapper, but I wouldn't choose it just yet for large production projects, just because I can't use Sapper.
If I'm getting -kind of- similar performance & experience, but without SSR, then I'll definitely choose Lit-Element! It's more mature, battle tested in production, and has proven reliability, also it's ultra lightweight, and in the future releases of Lit-Element -as I showed in the announcement above- in Lit-Element 3, they'll have SSR, and even more lighter package.
Thanks for reading devspedia, I love you, and I'll see you the next time :)