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


theme: fancy
highlight: tomorrow-night-bright

本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

通过之前的系列文章,大家对 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 装饰器:

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 元素一样使用:

<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 设计理念

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

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

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

或者从 CDN 使用:

IIFE / Global: <script src="https://unpkg.com/slim-js"></script>
Module: <script src="https://unpkg.com/slim-js?module"></script>
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 文件中:

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

Polymer

hybrids

例子,给大家演示一下:

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

//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

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 代码:

<!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 框架和库中使用它

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

npm i -g direflow-cli

direflow create

cd <project-folder>
  
npm install

npm start

这完全就是在写 React。

  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 的前端框架:

  • Omi: 是 Web Components + JSX/TSX 融合为一个框架,小巧的尺寸和高性能,融合和 React 和 Web Components 各自的优势。
  • Polymer :是 Google 推出的 Web Components 库,支持数据的单向和双向绑定,兼容性较好,跨浏览器性能也较好;提供了一组用于创建 custom elements 的功能。这些功能旨在使 custom elements 像标准 DOM 元素一样工作更容易和更快。
  • X-Tag: 是微软推出的开源库,支持 Web Components 规范,兼容Web Components API。
  • direflow: 是一个 React组件 + web component +web componen t属性变化重新挂载 React 组件的 web component框架。

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

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

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

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

参考

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容