7 Tools for Building Web Components
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 open-source tool for building modular apps through the development and composition of independent 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. It also has built-in support for Lit and Stencil.
To get started:
Bit 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, you can use Bit to bring a Web 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 key to reusing 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.
Bit speeds modular app development with components, makes it easier to maintain your codebase (e.g. gradual refactoring with full control), helps increase test-coverage and boosts 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! Learn more here.
Find out more:
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 abilites 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:
💡 Stencil web components are the very definition of component-driven development. You should use Bit to share and reuse any Stencil components you build across multiple apps. This way, you’ll have independent versioning, tests, and documentation for them too, driving truly framework-agnostic development.
Learn more here:
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 it’s 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.
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.
