The state of the component library

Front-end frameworks are react, Vuejs, Angular and so on.

We usually build component libraries based on a framework. For example, Ant-Design is a UI component library based on React, while elementUI is a component library based on VUejs.

Although there are relevant tools in the community to provide conversion services between frameworks, such as converting vuejs components into React components. But there are different frameworks, different standards. So the framework API changes, and then you have to rewrite the transformation logic, which is obviously inflexible, so we won’t talk about that for now.

As a company, you need to write different component libraries for different frameworks, even though the logic is the same.

In addition, if the framework is upgraded, such as from 1.x to 2.x, then the component library will need to be upgraded, which is more likely if the company has many component libraries (vuejs, React, Angular, etc.).

What is web-Component?

So is there a better solution, written once and used everywhere?

The answer is web Component.

Web Components are a set of HTML and DOM features added to the W3C that allow developers to create reusable Components.

Since Web Components is being pushed by the W3C, it is likely to become a standard feature in browsers in the near future.

Web Components consists of the following four parts:

  • Custom Elements – Apis that define new HTML Elements
  • Shadow DOM — Encapsulated DOM and Styling, with composition
  • HTML Imports — Declarative methods of Importing HTML documents into other documents
  • HTML Templates – The <template> element, which allows documents to contain inert chunks of DOM

What are the advantages of web-Component

What are the benefits of building a component library using Web Components? As mentioned, Web Components is a set of specifications pushed by the W3C, which is a standard.

If we develop a component using the Web Components API, the component exists outside of the framework, which means you can use it in any framework, as well as directly in native JS.

We don’t need to write different component libraries for different frameworks.

The basic usage of a component library written using Web Components looks something like this:

  <script src="/build/duiba.js"></script><! -- Operation bit Component --><operation-list></operation-list>

Copy the code

It’s no exaggeration to say that Web Components is the future.

However, the Web Components API is still relatively complex, so developing web Components using the native API is still relatively complex, as if you were developing your game directly using the native Canvas API.

Let’s take a look at libraries that simplify Web Components development.

polymer

Polymer was the first Web Componment development library I came into contact with many years ago.

Build modern apps using web components

More about Polymer

stencil

Stencil is a library that comes after Polymer. First contact in Polymer Summit 2017 sharing, here is the address Using Web Components in Ionic – Polymer Summit 2017.

Stencil is a tool developers use to create Web Components with some powerful features baked in, but it gets out of the way at runtime.

So what exactly do powerful features mean?

Virtual DOM
Async rendering (inspired by React Fiber)
Reactive data-binding
TypeScript
JSX
Copy the code

It is also a tool for generating Web compoennt. The difference is that it offers more features (Reactive data-binding,TypeScript,JSX, Virtual DOM) and more performance (Virtual DOM Async rendering).

As the observant might have noticed, I classify Virtual DOM as both a feature and a capability, yes! The Virtual DOM is a feature in the sense that it provides a mapping to the real DOM so that developers don’t have to worry about the real DOM.

It is performance in terms of diff between virtual DOM and diff info patch to real DOM.

The experience of developing Web Components in Stencil looks something like this:

import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component'.styleUrl: 'my-component.scss'
})
export class MyComponent {
  // Indicate that name should be a property on our new component
  @Prop() first: string;

  @Prop() last: string;

  @State() isVisible: boolean = true;

  render() {
    return (
      <p>
        Hello, my name is {this.first} {this.last}
      </p>); }}Copy the code

Demo

This is a little example I wrote based on StencilJS + Storybook. You can clone it and run it to see what it looks like.

duiba-components

With this enterprise-level component library, it is easy to provide the base component library for different lines of business without worrying about the technology stack of the consumers (individual business parties).

Our component library will be available for future business framework upgrades (such as vue1 to VUe2).

It is conceivable that if the ES standard develops well enough and specifications such as Web Components become widespread enough, the frameless era will come.

The absence of frameworks does not mean the absence of libraries.

There is no need for converters like Babel, and there is no need for various polyfills. Developers would probably be very happy, unfortunately not, but it would be nice to be close enough.