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

lucifer210發表於2018-05-07
Web元件

元件庫的現狀

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

我們通常去搭建元件庫的時候都是基於某一種框架去搭建， 比如ant-design是基於react搭建的UI元件庫，而elementUI則是基於vuejs搭建的元件庫。

雖然目前社群有相關工具，提供框架之間的轉化服務，比如講vuejs元件轉化為react元件。 但是畢竟是不同的框架，有不同的標準。因此框架api發生變動，那麼你就需要重寫轉化邏輯， 顯然是不靈活的，因此我們暫不討論這種情況。

作為公司而言，就需要為不同的框架寫不同的元件庫，儘管邏輯都是一樣的。

另外如果框架升級，比如從1.x升級到2.x，那麼對應元件庫就需要升級，如果公司的元件庫有很多（vuejs，react，angular等）， 那麼這種升級的概率就會更大。

什麼是web-component？

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

答案就是藉助web component。

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

由於web components是由w3c組織去推動的，因此它很有可能在不久的將來成為瀏覽器的一個標配。

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

  • 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編寫的元件庫的基本使用方法大概是這樣的：

  <script src="/build/duiba.js"></script>

  <!-- 運營位元件 -->
  <operation-list></operation-list>

複製程式碼

毫不誇張地說， 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 (
      <p>
        Hello, my name is {this.first} {this.last}
      </p>
    );
  }
}

複製程式碼

Demo

這是我基於stenciljs + storybook寫的一個小例子。大家可以clone，並執行檢視效果。

duiba-components

通過這樣搭建的企業級元件庫，就可以輕鬆地為不同業務線提供基礎元件庫，而不必擔心使用者（各個業務方）的技術棧。

將來業務方的框架升級（比如vue1升級到vue2），我們的元件庫照樣可以使用。

可以想象，如果es標準發展地夠好，web components 等規範也足夠普及，無框架時代將會到來。

無框架，不代表不使用庫。

只需要藉助工具庫就可以開發足夠通用的元件，也不需要babel這樣的轉換器，更不需要各種polyfill。 那麼開發者大概會非常幸福吧，可惜這樣的日子不可能存在，但是離這個目標足夠近也是極好的。

相關文章