What is Web Components

#webcomponents #customelement #webdev #frontend

While being the future of web development, web components are also my new favorite web paradigm and also one of the least talked about. It grants many features to developers and allows us to write extremely reusable components that are declarative and easy to consume. Let's take a look at it today.

The Specification

Web components is a suite of standard web specifications. Their existence means developers can create light-weight, reusable and powerful UI components for the web. Consuming a web component could be as simple as importing a JavaScript module and writing a HTML tag. The main specifications are:

Custom Elements - allows developers to write custom HTML tags (more on this later)
Shadow DOM - provides a black box for developers to write obstructed logic
HTML Template - kinda cool, but it has limited use case

I will talk mainly about Custom Elements today since it is the pillar that holds up the web component specifications.

Some things about Custom Elements

Platform Agnostic 👍

Custom elements are implemented with a JavaScript class and consumed by simply writing a HTML tag. This means you can use them anywhere. You can use them on your bare index.html file or within AngularJS, ReactJS, VueJS, literally anything else that runs on a .html file.

No tooling required 👍

In essence, everything on the Front-end can be categorized into 3 types of logic: HTML, JavaScript and CSS styles. Custom elements embrace this sense of minimalism. To write a custom element, all we need is a JS class to declare a class (the implementation), a single line of JavaScript to define the custom element (the declaration) and calling <my-new-custom-element /> on the index.html file (the consumption). Unlike React or Angular, the tooling is optional. We can introduce tooling for optimization or specify types or linting, but they are essentially optional.

Easy consumption 👍

Since custom elements are just user-defined HTML tags, they are incredibly easy to consume. We can just use them as normal HTML elements, passing configurations as attributes and not having to worry about the underlying complexity and implementation.

Too lightweight 👎

Out of the box, custom elements only offers a handful of lifecycle events. This is a very slim selection as compared to the React components of the world. To combat this, tooling such as StencilJS and Polymer exist to provide a higher-level API while being very performant since they eventually compiles down to a Custom Element.

Who else is using Web components?

Github

In a blog post from 2018 titled "Removing jQuery from GitHub.com frontend", GitHub engineers talked about how certain UI widgets are implemented with Web Components.

Ionic framework and design systems in general

Digital design systems are the perfect use case for web components. Once it is written, the individual UI components should as much as possible, across as many platforms as feasible. Writing or exporting them to Web Components means they can be used anywhere regardless of front end framework. I wrote a piece about my internship experience at Staizen and mentioned how they utilize StencilJS (a web component based abstraction) to write their design system while exporting the components to ReactJS apps. Check it out here.

How future proof is this?

Front-end frameworks are constantly changing. This is one of the biggest gotcha that all front-end developers face. As a consequence, we often see developers showcasing their blogs on dev.to, talking about how they write their blogs without a JavaScript framework. I understand where they are coming from and this is where web components shine. Since web components are browser specifications adopted by W3C and WHATWG, they are here to stay. This means custom elements I write today will still be maintainable for quite a while with minimal effort. I cannot say the same about my tooling-heavy React applications.