从 0 到 1 实现 OpenTiny 组件库跨框架技术

2023-10-20
广东
本文字数：2118 字
阅读完需：约 7 分钟

本文分享自华为云社区《从0到1实现 OpenTiny 组件库跨框架技术》，作者：华为云社区精选。

在华为云《DTSE Tech Talk》技术直播第 44 期《0 基础玩转 OpenTiny 跨框架组件库，实现一站式前端进阶》中，华为云前端开发 DTSE 技术布道师莫春辉老师在本期直播中与开发者一起交流了 OpenTiny 组件库解决方案的核心优势和设计理念，并通过具体的实操给大家演示 OpenTiny 如何从 0 到 1 实现组件库跨框架技术。

从 0 到 1 带你开发一个跨框架的 UI 组件

实现组件库跨框架技术是一种提高 Web 页面开发效率和应用灵活性非常重要的方法。随着前端技术的快速发展，组件库和框架的种类也日益繁多，因此，实现组件库跨框架技术对于解决开发痛点、降低开发成本具有重要意义。

本次实操的目标是搭建一个跨 Vue、React、Solid 框架的按钮演示 demo，展示如何实现组件库跨框架技术的应用。通过本期的演练，希望能够为开发者提供一个清晰、具体的实现过程，帮助大家更好地理解这一技术的实际应用。

具体源码可参考：https://github.com/opentiny/dtt-cfc

本次实操流程主要是分为四个部分：

1、初始化工程

a) 使用 pnpm 管理项目，并配置 pnpm-workspace.yaml

b) 配置项目 eslint、prettier 和 git 环境

2、创建 Vue 应用并添加 @opentiny/vue-button 组件相关逻辑：

a) 初始化 Vue 应用

b) 开发 Vue 组件的适配层和 vue-button 组件

c) 开发适配无渲染层 renderless 的 js 文件

3、创建 React 应用并添加 @opentiny/react-button 组件相关逻辑：

a) 初始化 React 应用

b) 开发 React 组件的适配层和 react-button 组件

c) 开发适配无渲染层 renderless 的 js 文件

4、创建 Solid 应用并添加 @opentiny/solid-button 组件相关逻辑：

a) 初始化 Solid 应用

b) 开发 Solid 组件的适配层和 solid-button 组件

c) 开发适配无渲染层 renderless 的 js 文件

TinyVue 组件库当前已实现跨端、跨框架、跨版本

得益于 Renderless 无渲染的设计架构，OpenTiny 项目的 TinyVue 作为一个 Vue 组件库，不仅实现了组件库跨框架，同时也实现了一套代码不仅同时支持 Vue 2 / Vue 3，还同时支持 PC 和移动端，更适应多主题规范。在实际应用中，开发者是可以开发出跨终端（PC 端、移动端、手表端）、跨框架（Vue2、Vue3、React、Solid）、跨主题（字体、颜色、圆角、图标...)、跨设计规范（图标、交互、默认配置...)的项目。

下图是 OpenTiny 跨端、跨框架、跨版本、跨设计规范示例启动后的演示效果（具体源码可以参考：https://github.com/opentiny/cross-framework-component）：

那为什么 OpenTiny 要实现组件库跨端、跨框架、跨版本呢？

目前业界组件库，一般按前端框架 React、Angular、Vue 的不同来分类。要么按面向的终端，如 PC 组件库、Mobile 组件库、小程序组件库等。由于 Vue 2 和 Vue 3 版本不能兼容，因此 Vue 2 的组件库跟 Vue 3 的组件库代码是不同的，即同一个技术栈也有不同版本的组件库。当前现状对于开发组件库和使用组件库都无疑是一种负担。

而且 Vue 2 / Vue 3 两套组件库对应两套不同的代码，难免存在组件功能和 API 不同步的情况，开发者如果要从 Vue 2 组件库迁移到 Vue 3 组件库，将面临一定的成本和风险。

当前组件库分类如下所示：

面对相当业界的痛点，TinyVue 采用组件与框架分离的设计理念（Renderless 架构），通过让 Web 组件支持跨端跨技术栈跨 UX 规范的特性，使得开发人员只需开发和维护一套组件库代码，就能推出不同终端不同技术栈的版本，减少开发和维护的成本。同时用户在使用这套组件库时，虽然在使用不同终端不同技术栈的版本，但由于底层基于一套代码，其 API 接口基本相同，从而降低用户学习使用以及迁移升级的成本。

当然，这套设计架构需要同时结合面向业务逻辑的开发范式与无渲染组件的设计模式。因为单纯使用面向业务逻辑的开发范式，仅仅只能让相同的业务逻辑从原本散落到生命周期各个阶段的部分汇聚到一起。而无渲染组件的设计模式的实现方式有很多种，比如 React 中可以使用 HOC 高阶函数，Vue 中可以使用 scopedSlot 作用域插槽，但当组件业务逻辑日趋复杂时，高阶函数和作用域插槽让代码变得难以理解和维护。因此只有将两者结合在一起，才有实现 Web 组件支持跨端、跨框架的可能性。

TinyVue 通过完成设备适配、分辨率适配、交互适配等问题，最终达到在不同的框架和不同终端中使用的效果。不仅如此，针对 Vue 2 和 Vue 3 ，TinyVue 还推出了相应的版本适配器，抹平 Vue 2 和 Vue 3 的差异，实现一套代码同时支持 Vue 2 和 Vue 3 两个版本。这样不管是 Vue 2 项目还是 Vue 3 项目，使用组件的方式都是一样的，可以实现无缝切换，极大地降低了 Vue 2 迁移到 Vue 3 的成本和风险。

总结：

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架的 UI 组件库，适配 PC 端 / 移动端等多端，支持 Vue2 / Vue3 / Angular 多技术栈，拥有灵活扩展的低代码引擎，包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

当然 OpenTiny 作为华为云解决方案中的重要组成部分，使能开发者构建云原生应用，也将助力开发者提高应用的性能和可靠性，促进应用的创新和发展。