Building a Web Components library based on Stencil

"Componentization" has always been a topic that front-end engineers cannot avoid, whether it is daily business development and packaging business components; infrastructure construction and development of UI components or basic components; or MV* frameworks such as React, Vue, Angular, etc. It is adhering to the concept of components as the basic atom, so it is certain that: components are the key to the development of the next generation of web technology .

However, the industry does not have an accurate definition of componentization. It is all subjective consciousness. Generally, it is based on several basic concepts of "high cohesion, low coupling, high expansion, and reusability" in the design thinking of program mode. To describe, the centralization and integrity of the logic must be guaranteed inside the component, the extensibility API should be provided outside the component, and the independence and simple availability should be guaranteed. Several small components can be nested layer by layer and combined into a large component for external use, just like building blocks.

The essence of the front-end framework is also the abstraction of componentization. Now the pattern of the front-end framework is that the first echelon is three-legged and the second echelon is full of flowers. However, returning to the source, the final compilation results of each framework still return to js, css, and html. For "components" In terms of this concept, it only abstracts some functions and isolates codes in the design idea of the framework, so what problems will this bring?

1. As our front-end projects are becoming more and more complex, large-scale projects may rely on dozens or hundreds of third-party libraries. Among them, some designs on the code framework are used for code isolation, and there will still be some adaptation conflicts. For example, the conflict of DOM operation, the conflict of style CSS, etc.
2. More and more companies' projects, in order to adapt to new technologies or improve efficiency, have to migrate technology stacks, or coexist old projects and new projects, introduce micro-frontends, etc., to integrate different frameworks or framework versions into one in the page. If Vue2.x is upgraded to Vue3.x, both the encapsulated basic components and business components will be unavailable.
3. The technology stacks of various projects of the company are different. In order to improve efficiency, we have to adapt to various frameworks when packaging components. For example, a business component needs to be adapted to the Vue and React technology stacks, resulting in a relatively high cost of developing basic components.

The picture shows the 2021 front-end framework top5

In order to solve these problems, we need a complete component system to of labor In this case, various solutions have emerged, and Web Components is a key part of it.

So, what changes did using Web Components bring? Let's take a 🌰.

Before :

A: I built a Vue3 wheel for ID cards.

B: Exactly, I need me to try. wtf is vue3, I can't use vue2.

C: It's a pity, I am the react framework, and I can't use it.

D: Ah! I am angular and can't use it either!

E: Can the old jq project be used?

F: I introduced it, but it conflicts with the logic of my current project!

if built on Web Components:

A: I built a wheel of Web Components, which is about identity cards, and it can be used by introducing tags.

B: Exactly. I need to try it. It seems to work. It's so easy to use!

C: I am the react framework, no problem.

D: Ah! I'm angular, no problem and perfect!

E: Can the old jq project be used? Yes, nice!

F: I brought in, perfect, no conflict.

So, what exactly are Web Components?

What are Web Components?

Web Components provides the ability to encapsulate the view layer based on native support, allowing the javaScript, css, and html templates related to a single component to run in a local environment bounded by html tags, without affecting the overall situation, and between components. Does not affect each other . it simply: it provides us the ability to customize the label, and provides the complete life cycle within the label .

Google has been promoting the development of the browser's native component specification "Web Components API". Since the concept of componentization is the trend of the next generation, Google will definitely not be absent. As early as Google I/O 2017 Polymer was upgraded to version 2.0, and the main significance of this upgrade is to upgrade Shadow Dom and Custom Elements to version v1, so as to obtain more browsers to support the next-generation Web Components specification. In recent years, major browser manufacturers have naturally followed suit. The current support is as follows:

Web Components can directly apply the concept of componentization to html tags that browsers can recognize, such as the <video /> <aduio/> tags that we commonly use to develop html pages; Layers are aggregated into a tag and are naturally isolated from each other, and it provides some life cycle hooks for developers to call. Web Components realizes the above features because of three core technologies, which are:

• Custom elements: Custom elements

Customize the HTML elements that can be rendered directly through the CustomElementRegistry, and provide the component life cycle connectedCallback, disconnectCallback, attributeChangedCallback , etc. for developers to use when they aggregate logic.

• Shadow DOM : Implicit DOM

"Shadow DOM" or "Implicit DOM", as the name suggests, has hidden attributes, which specifically means that when using Shadow DOM, the CSS and HTML in the component tags will exist completely and implicitly inside the element. In the page, the HTML structure inside the tag will exist in #shdaow-root, but will not appear in the real dom tree.

• HTML template: HTML template

Its characteristic is that the elements wrapped in the template tag will not be rendered immediately, and will only be parsed and rendered when the content is valid. With this attribute, we can add the template we need in the custom tag as needed, and automatically Defining our template to be parsed when the tag renders, this can be very useful when the HTML has frequent changes to update tasks, or when the markup is rewritten.

Let's do a brief summary of the features of Web Components :

• The low-level API supported by the "standard unified" browser.
• "Flexibility" can be used to encapsulate basic and business components.
• "Non-intrusion" is isolated by labels, does not invade business code, and does not affect each other between components.
• "Clear" is simple and direct, does not depend on external modules, and has small code size.

It seems that Web Components can try to solve the basic component incompatibility problem caused by the framework and the component definition conflict caused by complex applications. And it has been supported and actively promoted by chrome, and it is a good choice to follow the development trend of the front end.

Moreover, in the wave of the mobile trend, Web Components are infiltrating into the big front-end. The reuse of cross-end and cross-framework is gradually promoting development in the form of components, so I feel that the idea of Web Components is not only in the web It will also have a certain impact in the field of multi-terminal development.

So this is the reason why I choose Web Components for in-depth research and application. The development of the front-end era will surely ride the wind and waves, and the tide will rise.

Foreign countries have always been ahead of us in the application and exploration of new technologies. We hope that our domestic partners will also quickly recognize the trend and bring new front-end ideas and new trends into the business to improve R&D efficiency and get positive feedback. At the same time, I also contribute my own ideas and wheels to enhance the influence of China's front-end in the world.

next chapter: Getting to know Web Components and Stencil