Web Components: LWC, Stencil, and Lit by Numbers
Big players in the web components ecosystem.
In a previous article, I went through the basis of Web Components. Now, I want to focus on different options to develop those components.
Native API
We cannot forget that the HTML Living Standard provides a mechanism to develop Web Components without adding any extra layer.
Check the definition and this example. Maybe your use case doesn’t require using some additional framework on top of the Standard.
Frameworks Analysis
There are multiple options out there to create and ship web components. For example, Angular has their one call it: Angular Elements; others like Svelte are also doing some advanced in these areas. But three ones focus on this purpose: LWC, Stencil, and Lit.
These are the numbers extracted (February 2022).
Github
In the table below, we compare some information extracted from Github to understand the community impact and usage.
NPM Trends
Let’s analyze the interest in these frameworks over time using npm trends.
Last five years.
Last year.
*******************************************************************
Update:`lit` is a new package that we are gradually moving people over to. The main package to track is `lit-element` which contains the actual Lit 2 implementation.
Source Justin Fagnani from Lit Team: https://medium.com/@justin_82225/lit-is-a-new-package-that-we-are-gradually-moving-people-over-to-22a2595351f4
*******************************************************************
Frameworks Details
LWC
Lightning Web Components is an open-source UI framework developed at Salesforce. You can use LWC to customize Salesforce, but you can also use LWC to build any web app.
- Github: https://github.com/salesforce/lwc
- Twitter: https://twitter.com/SalesforceEng
- Youtube: https://www.youtube.com/c/SalesforceDevelopers
- Project Website: https://lwc.dev/
Stencil
Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.
- Github: https://github.com/ionic-team/stencil
- Twitter: https://twitter.com/stenciljs
- Slack: https://stencil-worldwide.herokuapp.com/
- Youtube: https://www.youtube.com/c/Ionicframework/
- Project Website: https://stenciljs.com/
Lit
Lit is a simple library for building fast, lightweight web components.
- Github: https://github.com/lit/lit
- Twitter: https://twitter.com/buildWithLit
- Slack: https://lit.dev/slack-invite/
- Youtube: https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg
- Project Website: https://lit.dev/
Conclusions
As you can see, there are many options to develop your web components.
It’s essential to analyze and understand every project before making a decision. Some additional aspects to consider could be:
- Programming language
- Testing library
- Accessibility
- HMR — Hot Module Replacement
- Bundle size
Remember that choosing the right technology for your use case is essential.