Why Web Coponent?

Building the frontend for a web application can be a difficult and daunting task, especially for complex and large-scale applications. Nowadays, JavaScript has become ubiquitous for frontend development, and it’s rare to find a web application that doesn’t use it. Let’s discuss how frontend web applications are built today.

The general way to build a Frontend Web Application

Generally, developers start by initiating an NPM in the empty directory and then installing a JavaScript library or framework, such as ReactJS, NextJS, Angular, Vue, Svelte, or any of the other available frameworks. TypeScript is also often used and included in the project. A bundler, such as Webpack or Parcel, is another essential part of the frontend stack that combines all the code and assets into a few optimized output files for the browser. Sometimes, the web framework may require the use of a bundler.

An alternative way to build Frontend

When building the frontend, the team often debates which framework to use. ReactJS is a popular choice, but there are other options like NextJS, Angular, Svelte, and Vue. The misconception is that frontend web applications cannot be built without these frameworks, and that Vanilla JavaScript is not enough. The problem then arises - how do we achieve reactivity without these frameworks? This is where the misleading goal of frontend frameworks comes into play. Reactivity can be achieved through design patterns like the Observer Pattern or the Proxy pattern. Some argue that without a frontend framework, it’s difficult to containerize reusable blocks of UI. However, this can be done using web components, which are native to the web and don’t require any build step.

Web Components

Web Components are a suite of different technologies that allow developers to create reusable custom elements with encapsulated functionality. Custom elements can be created by extending the HTMLElement interface, and their lifecycle methods are available during the definition. They can work with native form tags and can even extend the native HTML tags. Shadow DOM is a way to encapsulate the internals of the Custom Element. Templates, on the other hand, are HTML elements whose contents don’t get rendered but can be parsed by the browser. Children of the template can be used to define the markup of the Custom Element. The slot is another HTML element that helps in composition.

Why use Web Components

Web Components are fast, and reactive, require no build process, have native support, and are supported by almost all web browsers. They can be used with any web framework/library and provide encapsulation and composition similar to HTML elements. They can also be used with native HTML form elements.