使用web-component搭建企業級組件庫

時間 2019-11-17

標籤使用 web component 搭建企業組件欄目 HTML 简体版

原文原文鏈接

組件庫的現狀

前端目前比較主流的框架有react，vuejs，angular等。 css

咱們一般去搭建組件庫的時候都是基於某一種框架去搭建，
好比ant-design是基於react搭建的UI組件庫，而elementUI則是基於vuejs搭建的組件庫。html

雖然目前社區有相關工具，提供框架之間的轉化服務，好比講vuejs組件轉化爲react組件。
可是畢竟是不一樣的框架，有不一樣的標準。所以框架api發生變更，那麼你就須要重寫轉化邏輯，
顯然是不靈活的，所以咱們暫不討論這種狀況。前端

做爲公司而言，就須要爲不一樣的框架寫不一樣的組件庫，儘管邏輯都是同樣的。vue

另外若是框架升級，好比從1.x升級到2.x，那麼對應組件庫就須要升級，若是公司的組件庫有不少（vuejs，react，angular等），
那麼這種升級的機率就會更大。react

什麼是web-component？

那麼有沒有更好的方案，一次編寫，處處使用呢？git

答案就是藉助web component。github

Web Components 是一系列加入w3c的HTML和DOM的特性，使得開發者能夠建立可複用的組件。web

因爲web components是由w3c組織去推進的，所以它頗有可能在不久的未來成爲瀏覽器的一個標配。canvas

Web Components 主要由如下四個部分組成：segmentfault

Custom Elements – 定義新html元素的api
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

web-component有什麼優勢

使用web components搭建組件庫可以帶來什麼好處呢？
前面說了，web components 是w3c推進的一系列的規範，它是一個標準。

若是咱們使用web components的api 開發一個組件，這個組件是脫離框架存在的，也就是說
你能夠在任何框架中使用它，固然也能夠直接在原生js中使用。

咱們無須爲不一樣的框架編寫不一樣的組件庫。

使用web components編寫的組件庫的基本使用方法大概是這樣的：

&lt;script src="/build/duiba.js"&gt;&lt;/script&gt;

  &lt;!-- 運營位組件 --&gt;
  &lt;operation-list&gt;&lt;/operation-list&gt;

絕不誇張地說， web components 就是將來。

可是web components的api仍是相對複雜的，所以用原生的api開發web components仍是
相對比較複雜的，就好像你直接用原生canvas api去開發遊戲同樣。

下面咱們介紹下用於簡化web components開發的庫。

polymer

polymer是我接觸的第一個web componment開發庫，那已是不少年前的往事了。

Build modern apps using web components

更多介紹polymer

stencil

stencil是在polymer以後出現的一個庫。
第一次接觸時在Polymer Summit 2017的分享上，這裏貼下地址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.

那麼powerful features具體指的是什麼？

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

它也是一個用於生成web compoennt的tool。不一樣的是她提供了更多的特性(Reactive data-binding,TypeScript,JSX, virtual dom)以及更強的性能(virtual dom, Async rendering).

細心的人可能已經發現了，我將Virtual DOM既歸爲特性，又歸爲性能，沒錯！ Virtual DOM提供了一種到真實dom的映射，使得開發者沒必要關心真實dom，從這個層面講它是特性。

從虛擬dom之間的diff，並將diff info patch到real dom（調和）的過程來看，它是性能。

用stencil開發web components體驗大概是這樣的：

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 (
      &lt;p&gt;
        Hello, my name is {this.first} {this.last}
      &lt;/p&gt;
    );
  }
}