Hi-kits UI组件库介绍

1. 项目背景

前端目前比较主流的框架有 React、Angular、Vue 等，我们公司甚至其他公司各个团队搭建都分别使用着不同的框架及对应的组件库产品，以满足各自的业务诉求，提升研发效能。这些组件库体系各自独立维护，彼此割裂。随着各业务的规模不断扩大，这种割裂局面愈发严重。

众所周知，软件行业是发展最快、变化最快的行业之一。这伴随着软件工程中的许多变化和创新。假设明年有人会发布新的优秀的前端框架，这将使任何现有的框架黯然失色。整个团队必将面临框架的切换，而切换到新框架的成本将非常昂贵，因为你不得不每个前端组件都必须迁移到新框架上来，并且可能会中断业务运营。

而且当不同小组的业务需要合并、复用，或者人员变动的时候，切换到新的框架，带来的成本非常高昂。其中有一部分原因是当框架切换的时候，UI 库也必须同步切换。

目前看到的组件库没有特别全面的，大都是按照 ant design、 element ui，这种细较粒度的拆分来做的，正是因为拆分太细，导致几乎都不带什么逻辑，所以大都是带样式的元素这种形态，其实和使用 CSS 样式库没什么区别，反而会因为需要先运行 js 注册组件而导致页面渲染阻塞。

基于这种切换框架随之而来的UI框架切换的高成本，我们想到基于 Web Components 开发一套UI框架，做到一次开发到处使用的最终目的：

1. 不依赖任何框架，在任何生态中都能运行良好，达到高效复用，例如在 同时在 React、Angular、Vue 中使用他们

2. 可以在任何一种框架中使用，不用加载任何模块、代码量小

3. 易于继承，不需要编译

4. 真正的局部CSS作用域

5. 在主流浏览器上的支持已经极其良好

2. 流行趋势

「 有不少大公司充分利用了这项技术 」

• Twitter：嵌入式推文

• YouTube：该站点是使用 Web Components 构建的

• Electronic Arts：该站点也是使用 Web Components 构建的

• Adobe Spectrum：该站点是一个基于 Web Components 的 UI 框架产品

• 维基百科、可口可乐、麦当劳、IBM 和 通用电气 等也使用基于Web 组件的技术和框架

3. 技术优点

「 原生支持 」

原生支持意味着可以不需要任何框架即可完成开发，同时也意味着这将有更好的用户体验，更低的网络请求，以及更稳定的迭代前景。并且我们一直都有在使用这项技术，比如 input、video、select 等等，其实他们都是标准的原生组件，只是如今我们自己也可以使用这项技术去创造这些组件。

「 无排他性 」

这是原生支持的一个延伸表现，作为浏览器原生支持也就意味着它可以在任何环境中使用，例如在 React、Angular、Vue 中使用他们。

「 无依赖性 」

这一点同样是原生支持的一个延伸表现，通过提供连接特定 Web 组件的选项，而无需将框架的依赖项导入到项目中，您就可以拥有优于流行框架的优势。

让我们想象一个场景：如果您喜欢用 React 创建的小部件，并且想将其包含在您的项目中，则必须首先包含整个 React 库，然后才能导入您喜欢的小部件。相反，如果您选择使用 Web 组件创建的小部件，您可以立即将其插入到项目中——这一切都归功于这项技术的原生特性。

「 性能优势-优先逻辑无阻塞 」

Web Components 的优势在于页面网络请求时即可开始进行对自定义组件的注册，当然也可以在加载完成之后完成自定义组件的注册，即可以理解为组件是异步执行与渲染的，同时还可以结合 ES6 Module 来轻松的完成组件的按需加载。比其他框架简单高效的多。

「 性能优势-组件隔离（Shadow Dom） 」

Shadow DOM 为自定义的组件提供了包括 CSS、事件的有效隔离，不再担心不同的组件之间的样式、事件污染了。这相当于为自定义组件提供了一个天然有效的保护伞。

Shadow DOM 实际上是一个独立的子 DOM Tree，通过有限的接口和外部发生作用。我们都知道页面中的 DOM 节点数越多，运行时性能将会越差，这是因为 DOM 节点的相互作用会时常在触发重绘（Repaint）和重排（reflow）时会关联计算大量 Frame 关系。

而对 CSS 的隔离也将加快选择器的匹配速度，即便可能是微秒级的提升，但是在极端的性能情况下，依然是有效的手段。

「 性能优势-Tagged Template VS jsx 」

ES6 中的 template + tagged template 也是 Web Components 的标准特性之一，作为浏览器的原生支持，相比于 JSX 不仅无需预编译预处理，并且还有这更强的扩展能力。在性能上原生支持有着更优的处理性能。而 JSX 在每次 render 时，都需要完整的构造一个虚拟DOM，并且它还需要 JSS 将 CSS-in-JS 转换为样式表。因此同样功能的 JSX 将占用更多的 CPU 运算。

由于使用了 Template 技术，模版节点操作的对象是一个 DocumentFragement，而并非是真实 DOM 的一部分，相比 JSX 产生的 JS 堆栈其内存占用更小。

尤其当 VDOM 较大时，性能边界就尤其明显，大体积的 VDOM 与 tagged template 相比或差 1-2 个量级水平。

「 性能优势-原生的生命周期控制 」

Web Components 具有原生的组件生命周期回调支持，当其与文档的连接与段开时无需额外的外部状态标记，这使得当组件被移动或被移除等场景无需通过钩子函数即可获取，同时也无需 VDOM 去应对 Diff 元素变化。即回归纯粹，又更优于性能。

「 更高的可靠性 」

Web Components 更符合 OO思想，同时也很好的优化开发者对开闭原则的运用。强约束将使得组件与组件之间做到充分的独立功能与扩展，从而改变开发者松散的设计习惯，更利于使得生产出的产品具有良好的可靠性和稳定性。

我们常常把代码约束理解为不便利，这也是阻碍 Web Components 更加流行的一项原因，但是我们需要知道，性能和可靠性的确是需要付出成本的，而这个成本相对可靠性来说一定是很值得的。

「 良好的可读性 」

使用 Web Components 的另一大优势是项目代码的组织和调试。

例如，当你尝试在 DOM 中查找 React 制作的组件时，您在 DOM 中看到了什么？Div, div, div... 我的 **Heade 在哪里？所以在 DOM 中查找 JSX 代码的反射可能会很头疼。对于 Web 组件，如果您定义了my-super-header **而你将直接在 DOM 中看到你的组件。非常方便调试。

4. HI-kits

「 地址 」

官网地址：Hi-kits

HI-kits 是基于 Web Components 规范封装的跨框架 UI 组件库，可以优雅的在原生、vue、react、angular 等框架中使用。Hi-kits 在构建统一/多端覆盖/跨技术栈的前端应用时更具优势。

「 特性 」

• 跨框架。无论是react、vue还是原生项目均可使用。

• 组件化。shadow dom真正意义上实现了样式和功能的组件化。

• 类原生。一个组件就像使用一个div标签一样。

• 无依赖。纯原生，无需任何预处理器编译。

• 无障碍。支持键盘访问。

• 跨终端。组件库同时满足桌面端和移动端的需求。

• 高效。没有庞大的运行时，加载速度快。真正的实现一次编写，到处运行。

「 迭代规划 」

目前我们已经有近100个组件。

接来下 Hi-kits将按照如下规划，快速迭代完善：

• 持续丰富组件种类

• 组件动效的持续优化

• 持续优化 基于 GitHub 的 CI/CD 基础设施建设

• 提供在线色彩配置能力

• 组件库的国际化支持能力

我们最大的特色是可以定制的业务组件，提高开发效率。