Web components in the wild: from lit-html to Stencil, Svelete and beyond.
So lately there’s been much buzz around web-components. Here’s the gist of why: Components and widgets that build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
This means more reuse, better stability, abstraction and standardization, less work and pretty much everything else that comes with better modularity. While many people are sitting around waiting on projects like web-assembly, in the past year we see new tools and techs rise to bring the future today.
So, in this post, I’ll review 5 unranked tools you should know and consider if you’re thinking one putting web components to use in 2019. This list is only the beginning, so please, feel free to comment and suggest your own tools!
Let’s dive in.
1. Bit
Bit is a platform and an open-source tool built to help build modular apps through the development and composition of components.
Bit has some innovative key features to unlock better component modularity and reusability, which are a match-made-in-heaven with the agnostic and reusable nature of web components.
First, it automatically defines the component’s entire dependency graph to seamlessly isolate if from the project. You can individually publish multiple components from a project with one command and zero refactoring (!).
Second, and this is the really cool part, in addition to installing each component with NPM/Yarn, you can use Bit to bring a component into a new project- and develop it there to change the source code, play with styles or changes anything else as needed. No more waiting on PRs.
Third, Bit manages both the source code and dependency graph of components across projects. This is a big statement, and it’s a key to resuing components at any scale in multiple projects. You can sync changes to components across your codebase with one command, and know exactly which dependencies are changed and where. That’s extremely useful for gradual refactoring, and for making maintenance much less painful.
Finally, all the components from the repo can be shared to bit.dev (Bit hub), where they are organized in visual “playlist” like collections so your team can quickly share, discover and reuse components.
Here’s an example wired-elements web components library. Note that every component is even available to play-within a live playground before using it.
wired-elements web components with bit
Bit speeds modular app development with components so that it is easier to maintain your codebase (e.g. gradual refactoring with full control), helps increase test-coverage and boost code reusability while allowing evolution.
2. lit-html and lit-element
Lit-html is basically a customizable construction kit for web components. It’s “An efficient, expressive, extensible HTML templating library for JavaScript”. Meaning, Lit-html uses JavaScript template strings to create dynamic templates with template literals (example).
lit-html uses fast platform features like HTML <template> elements with native cloning to boost efficiency, and only ever updates the parts of templates that actually change — it doesn’t re-render the entire view. That’s pretty fast.
Templates are values ( strings, DOM nodes, heterogeneous lists, nested templates etc) that can be computed, passed to and from functions and nested. Expressions are JavaScript and can include what’d needed.
Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more.
Lit-element is a “simple base class for creating fast, lightweight web components”. It uses lit-html to render into the element’s Shadow DOM and adds API to help manage element properties and attributes. LitElement reacts to changes in properties and renders declaratively using lit-html.
As LitElement makes it easy to define Web Components for sharing elements across your organization or building a UI design system, it’s a very powerful combination with Bit- to easily create, reuse, manage and sync components. Bit’s platform will even visualize the components, so your bit collection is more than a set of reusable components- it’s a visual design system of components you can share, use and develop anywhere!
3. StencilJS
Created by the Ionic team, Stencil is a “web Component compiler for building fast, reusable UI components and Progressive Web Apps”. Meaning, it’s a compiler for generating Web Components and progressive web apps (PWA).
It uses TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline, and lazy-loading to generate standards-based Web Components that run on modern and legacy browsers.
Stencil also unlocks new capabilities for Web Components, such as Server Side Rendering without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings). Creating components is easy, as Stencil components are plain ES6/TypeScript classes with some decorator metadata. Take a look
4. Svelte JS
Svelte is “a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM” when the state of your application changes. Meaning, you can build boiler-plate free components using CSS, HTML and pure JavaScript, and Svelt will compile it into small and lightweight JS with built-in reactivity.
Sounds mind-blowing and simple and the same time, right? Another useful ability is the built-in support for any framework-agnostic CSS in JS library.
Svelte is a major step towards framework-agnostic web components, and its workflow enables gradual refactoring which is very useful in this aspect. Combing Svelete with Bit means having a toolbox of framework-agnostic components you can easily use anywhere, and even build styling components to style other components, turning styling into a manner of composition.
5. Angular elements
Angular elements is a new package in Angular that helps us publish Angular components as custom elements. It does this by taking the Angular component and compiling it into a web component.
This prominent attempt to bridge the framework-agnostic gap from the framework’s end is very interesting, as the @angular/elements package exports a createCustomElement() API that provides a bridge from Angular's component interface and change detection to the built-in DOM API.
Practically, you can use the newcreateCustomElement() function to convert a component into a class and register it in the browser as a custom element. Then, you can use the new element just like a built-in HTML element in content that you add directly into the DOM. This adds new capabilities to your NG workflow, from better separation of concerns and reusability to SSR!
6. Hybrids
Hybrids is a “UI library for creating Web Components, which favors plain objects and pure functions over class and this syntax”. It provides simple and functional API for creating custom elements.
It provides a declarative way for creating custom elements. It is a mix of functional and object-oriented architecture with a unique approach for defining custom elements. Here’s an example which relays on three property-related ideas: descriptors, factories and translation. The library uses change detection and cache mechanism to simplify the lifecycle of the component.
import { define } from 'hybrids';
const MyElement = {
count: 0,
render: ({ count }) => {...},
};
define('my-element', MyElement);
“Bonus” features include a template engine based on tagged template literals and hot module replacement support for faster development. Neat.
hybridsjs/hybrids
*👾 Web Components from plain objects and pure functions! — hybridsjs/hybrids*github.com
7. Sigil
Sigil is a “functional web component library”. It features reusable html elements using web components, a virtual dom for super fast re-rendering using snabbadom, html templating language that allows bindings to attributes & properties with powerful expressions, pure functional view component style to reduce re-renderings,support for immutable flux based stores like Redux and Kamea and more. Try it out for yourself with JSFiddle here.
Top comments (2)
Appreciate the list, @giteden . More Web Component things to play with (trying out a Stencil is on my to-do list).
I know it's not as flashy as some of the frameworks listed, but native WC's are a viable option. I've been spending the past few weeks (months) playing with different ways of creating WC's and I keep coming back to using Vanilla-JS.
Is it possible to use Bit in Codesandbox?