八个 Web Components 前端框架，一定有一个你用得上

通过之前的系列文章，大家对 Web Components 一定有了一个深入的了解。通过实战也对 Web Components 怎么写、怎么用比较熟悉了。

Web Components 入门实战（上篇）

Web Components 入门实战（下篇）

将 Web Components 组件打包发布

但是，在实现时我们不难发现，原生的 Web Component 对于封装组件其实并不是很流畅，需要对属性进行处理、需要对数据进行监听、需要对事件进行控制等等。这一切都在和效率开发背道而驰。

所以在针对这些不符合现在开发模式的情况，出现了很多 Web Components 前端框架。

Stencil

Stencil 是用于生成 Web Components 的编译器，由 Ionic 团队构建。Stencil 允许开发人员使用。TypeScript 和 JSX 等技术来定义组件，然后生成可在现代浏览器和旧版浏览器上运行的 100% 基于标准的 Web Component。当你的组件一旦经过 build 完成后，就会脱离 Stencil，不再依赖。并且 Stencil 相对原生 Web Components 提供了完善的项目目录架构和配置，与直接使用 Custom Elements 相比，Stencil 提供了额外的 API，使编写快速组件变得更加简单，Stencli 具有以下特性：

Virtual DOM
JSX 和异步渲染等 API 使快速
强大的组件创建
Reactive data-binding 单向数据流
组件懒加载
无依赖性组件
静态网站生成(SSG)
...

开发人员体验也得到了调整，并带有实时重新加载和嵌入编译器的小型开发服务器。

通过 "npm init stencil" 我们可以去体验 Stencil 提供 cli 工具，Stencil 会提供保姆式的选项配置：

Stencil 组件看起来很像基于类的 React 组件，只是添加了 TypeScript 装饰器：

代码语言：javascript复制

import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return <div>Hello, World! I'm {this.getText()}</div>;
  }
}

上面的组件可以像任何其他 HTML 元素一样使用：

代码语言：javascript复制

<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

Omi

Omi 是腾讯开源的前端跨框架跨平台的框架。是下一代 Web 框架，Omi 的目标是去万物糟粕，合精华为一。Omi 是一个跨框架的框架，任何框架都可以使用 Omi 自定义原始，当然 Web Components 也可以。它具有以下特性：

小巧并且高性能
基于 Shadow/Ligit Dom 设计
Web Components JSX/TSX 融合为一个框架 Omi
Shadow/Light DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadow DOM，让视图更新更准确更迅速
局部 CSS 最佳解决方案(Shadow DOM)，社区为局部 CSS 折腾了不少框架和库(使用 js 或 json 写样式，如:Radium，jsxstyle，react-style；与 webpack 绑定使用生成独特的 className 文件名—类名—hash值，如：CSS Modules，Vue)，还有运行时注入scoped atrr 的方式，都是 hack 技术；Shadow DOM Style 是最完美的方案
对 custom elements 友好, 通过字符串 '0'或者'false'传递 false，通过:和Omi.$传递任意复杂类型
符合浏览器的发展趋势以及 API 设计理念
...

我们可以通过一下命令快速开始开发项目。

代码语言：javascript复制

$ npm i omi-cli -g    # install cli
$ omi init my-app     # 初始化项目，也可以在空目录里执行 'omi init'
$ cd my-app           # 如果在空目录里执行 'omi init' 忽略这条命令
$ npm start           # 开发
$ npm run build       # 编译发布

代码语言：javascript复制

import { WeElement, render, h, tag } from 'omi'

import './o-counter'
import './index.css'
import * as css from './index.less'
import logo from './logo.svg'

interface MyAppProps {
  name: string
}


@tag('my-app')
export default class extends WeElement<MyAppProps> {

  static css = css.default

  abc: string

  onCountChanged = (evt: CustomEvent) => {
    console.log(evt.detail)
  }

  render(props) {
    return (
      <div class="app">
        <header class="app-header">
          <img
            src={logo}
            class="app-logo"
            alt="logo"
          />
          <h1 class="app-title">Welcome to {props.name}</h1>
        </header>
        {this.abc}
        <o-counter onCountChanged={this.onCountChanged}></o-counter>

      </div>
    )
  }
}

render(<my-app></my-app>, '#root', {
  // if using OMI to build the whole application, ignore the attributs of DOM and use props of virtual dom
  ignoreAttrs: true
})

Omi 组件看起来也非常像 React 组件。相似度 95%，哈哈哈。如果你是一个 React 开发者一定感觉这语法非常的友好。

Slim.js

Slim.js 是一个开源的轻量级 Web Components 库，它为组件提供数据绑定和扩展能力，使用 es6 原生类继承。专注于帮助开发者更好的编写原生web组件，而不依赖于其他框架，但是也提供了良好的拓展性，开发者可以自由拓展。

slim.js 核心很小（压缩后不到 3kB），从名字也能看出它很小
slim.js 带有可选的内置指令——可以选择适合的指令，从而保持包很小
slim.js 速度很快——它使用浏览器的 Background Task API 按需创建绑定并释放内存作为后台任务（在所有主要浏览器上）。
slim.js 是可扩展的。您可以使用简单的 API 将您自己的自定义指令添加到注册表中，或者添加在组件生命周期的每一步执行您的代码的全局插件。
slim.js 基于自定义元素技术，因此您的用户界面可以在任何地方使用，并且不会干扰任何其他库或框架。
slim.js 使您能够编写核心组件、用户界面的复杂部分和整个 web 应用程序——您选择您的尺寸，slim.js将提供。
...

通过以下命令可以快速开始 slim.js：

代码语言：javascript复制

npm install slim-js
 # 或者
yarn add slim-js

或者从 CDN 使用：

代码语言：javascript复制

IIFE / Global： <script src="https://unpkg.com/slim-js"></script>
Module： <script src="https://unpkg.com/slim-js?module"></script>

代码语言：javascript复制

import { Slim } from 'slim-js';

const myHTML = `<h1>Welcome, {{this.username}}!</h1>`;

class AwesomeComponent extends Slim {
  constructor() {
    super();
    this.username = 'John Jimmy Junior';
  }
}

Slim.element('my-awesome-component', myHTML, AwesomeComponent);

slim.js 基于浏览器的原生 DOM API 的网络组件规范。如果您希望支持旧版浏览器，您可能需要添加一个 polyfill。将以下标记添加到您的主 HTML 文件中：

代码语言：javascript复制

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.17/webcomponents-lite.js"></script>

Polymer

Polymer 是 Google 推出的 Web Components 库，支持数据的单向和双向绑定，兼容性较好，跨浏览器性能也较好；提供了一组用于创建 custom elements 的功能。这些功能旨在使 custom elements 像标准 DOM 元素一样工作更容易和更快。与标准 DOM 元素类似，Polymer 元素可以是：

使用构造函数或 document.createElement
使用特性或特性配置
在每个实例中填充内部 DOM
响应属性和属性的变化
使用内部默认值或外部样式
响应操纵其内部状态的方法
...

使用以下命令可以运行一个 Polymer 程序：

代码语言：javascript复制

npm install -g polymer-cli@next

git clone https://github.com/PolymerLabs/polymer-3-first-element.git

cd polymer-3-first-element

npm install

polymer serve --open

polymer 这语法和 Web Components 的原生语法真的非常的像。

代码语言：javascript复制

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icon/iron-icon.js';

class IconToggle extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: inline-block;
        }
        iron-icon {
          fill: var(--icon-toggle-color, rgba(0,0,0,0));
          stroke: var(--icon-toggle-outline-color, currentcolor);
        }
        :host([pressed]) iron-icon {
          fill: var(--icon-toggle-pressed-color, currentcolor);
        }
      </style>
      <!-- shadow DOM goes here -->
      <iron-icon icon="[[toggleIcon]]"></iron-icon>
    `;
  }
  static get properties () {
    return {
      toggleIcon: {
        type: String
      },
      pressed: {
        type: Boolean,
        notify: true,
        reflectToAttribute: true,
        value: false
      }
    };
  }
  constructor() {
    super();
    this.addEventListener('click', this.toggle.bind(this));
  }
  toggle() {
    this.pressed = !this.pressed;
  }
}

customElements.define('icon-toggle', IconToggle);

hybrids

hybrids 是一个 JavaScript UI 框架，用于创建功能齐全的 Web 应用程序、组件库或具有独特的混合声明性和功能性架构的单个 Web Components。该框架的主要目标是为网络平台提供一套完整的工具——一切都没有外部依赖。它支持构建 UI 组件、管理复杂状态、使用客户端路由创建应用程序流以及针对全球市场本地化其内容。所有部分都遵循相同的独特概念，使其易于理解和使用！它具有：

简单的结构，组件模型基于普通对象和纯函数，仍然在底层使用Web Components API
无缝本地化，对组件内容自动翻译的内置支持使翻译无缝且易于集成
该框架提供了一种方法来添加具有复数形式的动态消息、HTML 内容，或在模板上下文之外使用消息
复杂状态管理，store 模块提供基于声明式模型定义的全局状态管理，内置对异步外部存储、关系、离线缓存等的支持
结构化客户端路由，路由器模块为客户端应用程序提供了一个全局导航系统。它不是仅仅将 URL 与相应的组件匹配，而是依赖于树状结构的视图，这些视图在组件定义中有自己的路由配置。它使 URL 成为可选的，对对话框、受保护的视图等具有开箱即用的支持
...

这里套用一个官网的例子，给大家演示一下：

代码语言：javascript复制

import { define, html } from "hybrids";

export function increaseCount(host) {
  host.count  = 1;
}

export default define({
  tag: "simple-counter",
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `
});

这代码相对前面几个实例，非常的简单，代码结构也非常的清晰。

X-Tag

X-Tag 是微软推出的开源库，支持 Web Components 规范，兼容Web Components。X-Tag 最初由 Mozilla 开发，现在由 Microsoft 的开发人员提供支持，它是一个开源 JavaScript 库，它包装了 W3C 标准 Web Components API 系列，为组件开发提供了一个紧凑、功能丰富的接口。虽然 X-Tag 可以轻松利用所有 Web Components API（自定义元素、Shadow DOM、模板和 HTML 导入），但它只需要自定义元素 API 支持即可运行。在没有原生自定义元素 API 的情况下，X-Tag 使用 Google 的 Polymer 框架所依赖的相同的 polyfill 。它的特点也很明显：

标准，基于 Web Components API 构建
高效，3k min/gzip中的强大功能
可插拔，可以和其他库一起使用

它有两种版本：

x-tag polyfills
Just x-tag no polyfills

这里演示一个 x-tag polyfills 版本，看看效果：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <x-clock></x-clock>
</body>
<script src="../src/x-tag-polyfilled.min.js"></script>
<script src="../src/index.js"></script>
</html>

代码语言：javascript复制

//index.js
xtag.create('x-clock', class extends XTagElement {
  connectedCallback () {
    this.start();
  }
  start (){
    this.update();
    this._interval = setInterval(() => this.update(), 1000);
  }
  stop (){
    this._interval = clearInterval(this._data.interval);
  }
  update (){
    this.textContent = new Date().toLocaleTimeString();
  }
  'tap::event' (){
    if (this._interval) this.stop();
    else this.start();
  }
});

LitElement

LitElement 是一个简单的基类，用于使用 lit-html 创建快速、轻量级的 Web Components。LitElement 现在是Lit 库 monorepo的一部分。Lit 2 包括 lit-html 2.x 和 LitElement 3.x。LitElement 使用lit-html渲染到元素的Shadow DOM 中，并添加 API 来帮助管理元素属性和特性。LitElement 对属性的变化做出反应。

LitElement 具有以下特点：

简单、现代、安全、小巧且快速
允许您使用带有嵌入式 JavaScript 表达式的模板文字在 JavaScript 中编写 HTML 模板
lit-html 识别模板的静态和动态部分，因此它可以有效地只更新更改的部分
lit-html 不依赖于任何组件模型，它只专注于创建和更新 DOM
...

这里也演示一个简单的例子，运行下面的 HTML 代码：

代码语言：javascript复制

<!doctype html>
<html>
<head>
  <!-- Polyfills only needed for Firefox and Edge. -->
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
  <!-- Works only on browsers that support Javascript modules like
  Chrome, Safari, Firefox 60, Edge 17 -->
  <script type="module">
    import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
    
    class MyElement extends LitElement {

      static get properties() {
        return {
          mood: {type: String}
        }
      }
      
      static get styles() {
        return css`.mood { color: green; }`;
      }

      render() {
        return html`Web Components are <span class="mood">${this.mood}</span>!`;
      }
    }

    customElements.define('my-element', MyElement);
  </script>
  
  <my-element mood="great"></my-element>
  
</body>
</html>

direflow

direflow 是一个 React组件 web component web componen t属性变化重新挂载 React 组件的 web component框架。direflow的响应式其实分为2块：组件内部响应式（通过React自身响应式流程），组件外部响应式（WebComponents属性变化监听重渲染组件）。如果外部属性不会经常变化的话，性能这块没有问题，因为组件内部的响应式完全是走了React自身的响应式。属性外部属性如果会经常变化的话，direflow框架在这块还有一定的优化空间。

direflow 具有以下特点:

使用 React 的强大功能来创建您的组件构建它
Direflow 使开始开发变得非常容易！在几分钟内创建您的第一个 Direflow 组件
创建丰富且完全独立的微前端
构建整个 UI 库并在任何 UI 框架和库中使用它
...

运行下面的命令自己尝试一下：

代码语言：javascript复制

npm i -g direflow-cli

direflow create

cd <project-folder>
  
npm install

npm start

这完全就是在写 React。

代码语言：javascript复制

  import React, { useContext } from 'react';
  import PropTypes from 'prop-types';
  import { EventContext, Styled } from 'direflow-component';
  import styles from './App.css';

  const App = (props) => {
    const dispatch = useContext(EventContext);

    const handleClick = () => {
      const event = new Event('my-event');
      dispatch(event);
    };

    const renderSampleList = props.sampleList.map((sample) => (
      <div key={sample} className='sample-text'>
        → {sample}
      </div>
    ));

    return (
      <Styled styles={styles}>
        <div className='app'>
          <div className='top'>
            <div className='header-image' />
          </div>
          <div className='bottom'>
            <div className='header-title'>{props.componentTitle}</div>
            <div>{renderSampleList}</div>
            <button className='button' onClick={handleClick}>
              Click me!
            </button>
          </div>
        </div>
      </Styled>
    );
  };

  App.defaultProps = {
    componentTitle: 'Test Direflow',
    sampleList: [
      'Create with React',
      'Build as Web Component',
      'Use it anywhere!',
    ],
  }

  App.propTypes = {
    componentTitle: PropTypes.string,
    sampleList: PropTypes.array,
  };

  export default App;

总结

尽管 Web Components 可能还没有全面的进入研发者的视野，现在还备受争议，但是它已经被很多大厂已经直接或者间接将它用于实践，并且在市场上也出现了很多 Web Components 库，可以轻松的使用和构建 Web Components，本文也列举了八个 Web Components 的前端框架：

Stencil：是一个用于构建可重用、可扩展的设计系统的工具链。生成可在每个浏览器中运行的小型、极快且 100% 基于标准的 Web Components。
Omi：是 Web Components JSX/TSX 融合为一个框架，小巧的尺寸和高性能，融合和 React 和 Web Components 各自的优势。
Slim.js：是一个开源的轻量级 Web Components 库，它为组件提供数据绑定和扩展能力，使用 es6 原生类继承。专注于帮助开发者更好的编写原生web组件，而不依赖于其他框架，但是也提供了良好的拓展性，开发者可以自由拓展。
Polymer ：是 Google 推出的 Web Components 库，支持数据的单向和双向绑定，兼容性较好，跨浏览器性能也较好；提供了一组用于创建 custom elements 的功能。这些功能旨在使 custom elements 像标准 DOM 元素一样工作更容易和更快。
hybrids：是一个 JavaScript UI 框架，用于创建功能齐全的 Web 应用程序、组件库或具有独特的混合声明性和功能性架构的单个 Web Components。
X-Tag：是微软推出的开源库，支持 Web Components 规范，兼容Web Components API。
LitElement：是一个简单的基类，用于使用 lit-html 创建快速、轻量级的 Web Components。
direflow：是一个 React组件 web component web componen t属性变化重新挂载 React 组件的 web component框架。

这些框架都有自己的特性，也各具自己的优缺点，在实战了中具体需要用哪一个 Web Components 前端框架完全取决于你自己。好啦，本文的内容到此结束了。

最后，我希望从这个 Web Components 系列教程中你可以学到了很多东西。

如果文中有什么问题或者错误，请在评论区告诉我。

如果你觉得这篇文章对你有帮助，点个赞吧。

参考

github.com/ionic-team/…
stenciljs.com/docs/gettin…
github.com/Tencent/omi…
slimjs.com/#/getting-s…
polymer-library.polymer-project.org/3.0/docs/de…
github.com/Polymer/pol…
github.com/hybridsjs/h…
codesandbox.io/s/simple-co…
juejin.cn/post/714488…
github.com/Silind-Soft…
zhuanlan.zhihu.com/p/506292558
direflow.io/

框架浏览器前端框架 components web

0 人点赞