組件庫的現狀
前端目前比較主流的框架有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，並運行查看效果。
通過這樣搭建的企業級組件庫，就可以輕松地為不同業務線提供基礎組件庫，而不必擔心使用者（各個業務方）的技術棧。
將來業務方的框架升級（比如vue1升級到vue2），我們的組件庫照樣可以使用。
可以想象，如果es標准發展地夠好，web components 等規范也足夠普及，無框架時代將會到來。
無框架，不代表不使用庫。
只需要借助工具庫就可以開發足夠通用的組件，也不需要babel這樣的轉換器，更不需要各種polyfill。
那么開發者大概會非常幸福吧，可惜這樣的日子不可能存在，但是離這個目標足夠近也是極好的。