Web Components实践：如何搭建一个框架无关的AI组件库

作者： 京东科技 牛志伟
一、让人又爱又恨的Web Components

Web Components是一种用于构建可重用的Web元素的技能。它允许开发者创建自定义的HTML元素，这些元素可以在不同的Web应用程序中重复使用，并且具有自己的样式、行为和功能。
Web Components并非一项新技能，而是一组持续演进的、由W3C标准化的组件化API。最早可以追溯到2011年左右，大约在2016年左右各个欣赏器才实现了Custom Element V1版本。然而，在同一时期，诸如Vue和React等组件化框架已经开始主导前端开发生态。
尽管近几年Web Components标准和技能都趋于成熟，但早期面对的兼容性问题以及厥后Vue和React等MVVM框架的崛起，导致Web Components领域一直处于低调状态。接下来，我们将从Web Components的发展历程、上风以及开发中面对的寻衅三个方面更深入地了解Web Components。
1、Web Components发展历程

•2011年：Google发布了Chrome欣赏器，并提出了“Shadow DOM”概念，这是Web Components的一个重要组成部分。
•2013年：谷歌工程师Alex Komoroske在Google I/O大会上首次提出了Web Components的概念，并推动了相干标准的制定。
•2014年：W3C发布了Web Components的规范草案，其中包罗四个重要技能：Custom Elements、Shadow DOM、HTML Templates和HTML Imports。
•2015年：Web Components的规范逐渐得到欣赏器厂商的支持，Chrome、Firefox、Safari等主流欣赏器开始逐步实现相干功能。
•2018年：Web Components逐渐成为前端开发的主流技能之一，越来越多的开发者开始使用Web Components来构建可重用的组件。
•至今：Web Components技能不停发展和完善，越来越多的框架和库开始支持Web Components，使其在前端开发中发挥更大的作用。
2、Web Components有哪些上风

•封装性： Web Components 具有良好的封装性，可以将页面中的功能和样式封装在一个自定义元素内部，避免全局作用域的污染，提高了代码的可维护性和可重用性。
•跨框架兼容：Web Components 是基于 Web 标准的技能，可以在任何支持 Custom Elements 和 Shadow DOM 的当代欣赏器中使用，与各种前端框架和库兼容性良好。
•标准化：Web Components 的规范由 W3C 组织制定，具有较高的标准化程度，有利于统一前端开发的规范和实践，提高了代码的可维护性和可移植性。
•性能上风：通过使用 Shadow DOM 技能，Web Components 可以实现更好的性能优化，避免不必要的重绘和重排，提高页面的渲染服从和用户体验。
现在，前端开发中有许多盛行的框架可供选择，如React、Vue、Angular、Solid、Svelte、Preact等。框架的选择是一个复杂的决策过程。当框架版本升级时，项目可能必要面对重构的问题。例如，从Vue2升级到Vue3可能必要付出较大的改造本钱。如果不进行升级，就无法使用最新特性，甚至可能面对框架旧版本不再维护的尴尬局面。在这种情况下，Web Components 的框架无关性可以在肯定程度上改善这种局面。
就性能而言，以将 React 组件转换为 Web Components 为例，可以优化执行过程，淘汰阻塞，提高页面性能。在普通的 React 组件中，初次执行时必要一次性完成全部必须的节点逻辑，这些逻辑的执行会同步占用在 JavaScript 的主线程上。当页面变得充足复杂时，一些非核心逻辑可能会阻塞后面核心逻辑的执行。而通过使用 Web Components 优化 React 组件，执行过程会变得更简便。例如，注册一个复杂的逻辑组件时，在 React 执行时只需执行一个 createElement 语句，创建组件只必要 1-2 微秒即可完成。真正的逻辑不会立即执行，而是等到“核心任务”执行完毕后再执行，甚至可以在合适的时机再执行，从而降低 Diff 本钱。

3、使用Web Components开发的痛点

虽然Web Components具有许多令人喜欢的优点，但在实际开发中也存在一些棘手的问题。以下是几个典型问题：
•原生开发难题：Web Components是一项原生技能，因此在组件编写过程中必要回归到原生开发。事件处置惩罚、状态管理等方面都必要自行处置惩罚。尽管大多数框架都提供了对Web Components的封装方案，但使用这些方案又必要引入相应框架的运行时，这导致离开了框架无关性这一最大上风。
•Form表单问题：在Shadow DOM中，包罗、或等标签的value不会自动与表单关联，因此在表单提交时无法获取相应的value，必要手动处置惩罚，别的 ElementInternals提案 也在致力于解决这个问题。
•样式隔离问题：虽然样式隔离有助于避免全局样式污染的问题，但在某些场景下，如主题颜色等，仍必要将样式同步到Web Components组件内部。现在可以通过CSS变量实现主题切换。此外，必要留意的是，slot插槽中的DOM元素样式并未得到隔离。
针对这些问题，开发职员可能必要思量接纳一些额外的措施来解决寻衅，以确保Web Components在实际应用中能够更加顺畅地运行。
二、现在主流的Web Components组件方案

1、头部案例

Twitter
Twitter 2016 年开始将自己的嵌入式推文从 iframe 切换成 ShadowDOM，淘汰了内存斲丧、加快了渲染速度，并批量渲染的时间保持丝滑。Upcoming Change to Embedded Tweet Display on Web
Youtube
Youtube 作为 google 系的产品，很早就在全站用上了 Web Components，并且开源了自己播放器组件 GitHub - GoogleWebComponents/google-youtube: YouTube video playback web component此外 google 开源的 Web Components 照旧许多的，Google Web Components · GitHub ，包罗地图、drive、日历等等。
Github
Github 对 Web Components 的使用很早，具体可以看： How we use Web Components at GitHub | The GitHub Blog，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相继实现之后，Github 开始大范围使。要知道 Github 2018 年才刚刚完全移除 jQuery：Removing jQuery from GitHub.com frontend | The GitHub Blog 这既得益于 Github 自身项目组件化的架构，也得益于 Web Components 自己与框架无关的特性非知识互助老项目升级。
Adobe Spectrum
Adobe Spectrum 是由 Adobe 创建的设计系统，该站点是一个基于 Web Components 的 UI 框架产品。
2、方案对比

现在主流的 Web Components 组件方案有三种：
方案一：
•特点：以React和Vue为代表，通过将React或Vue组件包装为Web Components组件的方式实现。
•优点：利用了自己框架的特性如生命周期、状态管理等，易于开发者使用。
•缺点：必要引入自己框架的运行时，导致组件体积增加，同时丧失了框架无关性这一上风。
方案二：
•特点：以Stencil和LitElement为代表，提供了专门的编译器、工具链和语法糖来构建 Web Components。
•优点：相比第一种方案，引入自己框架的运行时可能更小，淘汰了体积。
•缺点：必要学习新的语法和工具，可能增加开发者的心智负担。
方案三：
特点：以Svelte和Solid为代表，直接将组件编译成原生 Web Components
优点：放弃了假造DOM，利用编译或转译本领直接天生操作DOM的更新函数，性能良好，接近原生DOM。别的Vue3中的Vapor模式，正是鉴戒了这种模式，现在正在试验阶段。
三、与SolidJS结合的“化学反应”

1、SolidJS有何不同

SolidJS 是一个快速、机动、可扩展的 JavaScript 库，用于构建用户界面。与其他前端框架相比，SolidJS 有一些独特的特点和上风：
•Reactivity System: SolidJS 使用基于数据变化的相应式系统，可以精确追踪状态的变化，并只更新发生变化的部分，从而提高性能。
•Fine-grained Reactivity: SolidJS 提供了细粒度的相应式更新，可以在组件级别、元素级别甚至属性级别进行更新，避免不必要的重新渲染。
•No Virtual DOM: 与其他框架不同，SolidJS 不使用假造 DOM，而是直接编译天生操作真实 DOM的函数，淘汰了 diff 算法的开销，提高了性能。
•Hooks-based API: SolidJS 使用类似 React Hooks 的 API，使得组件逻辑更易于复用和组合
2、可以解决哪些问题

•直接在编译阶段天生原生Web Components，核心库非常小巧，没有额外的依靠，可以资助淘汰项目的体积。
•提供相应式状态管理、事件管理、生命周期等，解决原生开发的痛点。
•类React语法，上手容易，降低开发者心智负担，转换成Web Components非常流通。
四、从0到1搭建 Aura Design Web Components组件库

1、工程目次设计

该项目接纳了 Monorepo 设计，旨在统一管理各个子项目，避免开发阶段频仍发布/安装 npm 包来同步代码。具体内容包罗：
•packages/eslint-config-aurai： 用于管理ESLint设置，集成了TypeScript和Prettier（用于JavaScript/TypeScript格式化）。
•packages/stylelint-config-aurai： 用于管理StyleLint设置，集成了stylelint-order（用于样式属性排序）和Prettier（用于样式格式化）。
•packages/aura-design： 基于eslint-config-aurai和stylelint-config-aurai规范，使用Solid和Solid Element构建的Web Components元组件库，包罗按钮、图标、卡片、布局等基础组件。
•packages/aura-design-pro： 与aura-design类似，但封装了一些复杂组件，通常是依靠第三方库的组件，例如支持Markdown渲染的富文本组件、视频播放组件等。
•apps/aura-design-docs： 基于Storybook的组件文档库，支持检察代码、组件预览，并可及时预览修改组件属性。
•apps/react-starter、apps/vue-starter： 计划用于验证Web Components在React和Vue组件中的兼容性等问题。

2、部分细节展示

2.1、组件样式编写

Web Components组件中的样式是内联到每一个组件的Shadow DOM中，因此不能用常规的CSS Modules等方案。本项目中使用了大约4种不同的内联样式方案，以对应不同的应用场景：
•原子化CSS方案：UnoCSS致力于将全部样式属性细分为最小单元的CSS，以便实现最大程度的自由组合和复用。此外，UnoCSS还具有自动分析文件中使用的样式的功能，只将实际使用的样式打包，从而减小文件巨细。

•CSS inline模式：利用Vite的功能，将外部样式作为内联模式引入，当必要自定义复杂样式或语义化场景时，可能会使用此模式。

1. import styles from './Button.css?inline';

复制代码

•CSS Template：CSS模板字符串类似于CSS-in-JS方案，通常用于根据prop变量动态控制样式。尽管这种方法会增加肯定的运行时处置惩罚逻辑，但可以有效淘汰CSS重复和文件巨细。

1. const styles = css`
2.   :host {
3.       display: inline-block;
4.   }
5.   .box {
6.       height: ${props.size + 2}px;
7.       line-height: ${props.size + 2}px;
8.       position: relative;
9.       overflow: hidden;
10.   }
11.   .nums-chip {
12.       transition: transform 1.5s;
13.       transform: translate(0, -50%);
14.       overflow: hidden;
15.   }
16.   .number {
17.       font-size: ${props.size}px;
18.       line-height: ${props.size + 2}px;
19.   }
20. `;

复制代码

•CSS Link：使用link标签引入外部样式表，当组件样式比较多、体积较大时，如果直接内嵌到组件内部，当有N个组件时，体积就会增大N倍（暂不思量欣赏器内置优化逻辑），而使用link标签淘汰体积同时也可以利用上欣赏器缓存的特性。

1. ...
2. return (
3.   <>
4.     <link href={`https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/styles/atom-one-${props.theme}.min.css`} rel="stylesheet"></link>
5.     <style>{styles}</style>
6.     <div innerHTML={md.render(props.text)}></div>
7.   </>
8. );
9. ...

复制代码

2.2、Svg图标集成

Icon组件引入和注册

1. import {
2. defineCustomElements,
3. registerIcon,
4. Icon,
5. } from '@aura-group/aura-design';
6. registerIcon('/iconfont.svg'); // 自定义svg图标注册，使用主项目根目录的svg图标文件，如果不注册则使用默认图标
7. defineCustomElements({ Icon }); // 注册Web Components图标组件

复制代码

组件使用

1. <ar-icon name="download" size="20px" color="#4213de"></ar-icon>

复制代码

2.3、组件打包

支持ES（按需加载）和UMD两种范式，自动天生Typescript声明文件：
package.json

1. {
2. "name": "@aura-group/aura-design",
3. "version": "0.3.9",
4. "description": "",
5. "main": "dist/aura-design.umd.js",
6. "module": "dist/aura-design.es.js",
7. "typings": "dist/types/components/index.d.ts",
8. "files": [
9. "dist"
10.   ],
11. "type": "module",
12. ...
13. }

复制代码

Vite相干设置

1. ...
2. build: {   
3.   lib: {
4.     entry: 'src/components/index.ts',
5.     name: 'aura-design',
6.     fileName: (format) => `aura-design.${format}.js`,
7.   },
8. },
9. ...

复制代码

3、基于Storybook的组件文档

Storybook 是一个开源工具，用于开发和展示 React、Vue、Angular 等前端组件的交互式 UI 组件库。通过 Storybook，开发职员可以在一个独立的环境中编写、展示和测试组件，而不必依靠于整个应用程序。这样可以更快地开发和调试组件，同时也方便团队成员之间的协作。
Storybook 提供了一个交互式的界面，开发职员可以在其中创建不同的“故事”（stories），每个故事对应一个组件的不同状态或交互方式。通过 Storybook，开发职员可以轻松地检察和测试组件在不同状态下的表现，从而更好地理解和调试组件的行为。
Aura Design 组件库文档

4、未来规划

现在，我们的组件库中包罗了16个基础组件和一些与AI Chat相干的组件。在 A-M 网站中，95% 的组件都源自 Aura Design 组件库。未来，除了继承封装一些基础组件外，我们将优先开发常规组件库中缺失的比如AI应用的相干组件。随着组件库的逐步丰富和条件的成熟，我们会思量将其开源。如果您有任何相干组件的封装需求或希望成为项目的成员，请随时与我联系。
参考文献

•ChatGPT
•Web Components从技能解析到生态应用个人心得指北
•2022 Web Components 趋势解读和展望
•你不知道的 Web Components - 过去和未来
•浅析Web components的痛点

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告