使用web-component搭建企业级组件库

组件库的现状

前端目前比较主流的框架有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。
那么开发者大概会很是幸福吧，惋惜这样的日子不可能存在，可是离这个目标足够近也是极好的。

来源：https://segmentfault.com/a/1190000015766801