简介：基于 OpenTiny 组件库的 rendereless 无渲染组件架构

在HAE（Huawei Application Engine）华为应用引擎自研阶段，我们实现的数据双向绑定、面向对象的 JS 库、配置式开发的注册表等特性，随着前端技术的高速发展现在已经失去存在的意义，但是在 AUI 阶段探索的新思路新架构，经过大量的业务落地验证，再次推动前端领域的创新。TinyVue 继承了 HAE、AUI 的基因，所有的新技术都从业务中来，到业务中去。而且，在这个过程中，我们通过不断吸收、融合开源社区的最佳实践和创新，不断提升自身的核心竞争力。

目前OpenTiny的TinyVue组件库，是采用Renderless设计架构，结合面向业务逻辑的开发范式与无渲染组件的设计模式，如果使用面向业务逻辑的开发范式，仅仅只能让使用相同的业务逻辑从原本散落到生命周期各个阶段的部分汇聚到一起。

无渲染组件的设计模式的实现方式有很多种，比如React中可以使用HOC高阶函数，Vue中可以使用scopedSlot作用域插槽，但当组件业务逻辑日趋复杂时，高阶函数和作用域插槽让代码变得难以理解和维护。只有将两者结合在一起，才有实现Web组件支持跨端的可能性。

按无渲染组件的设计模式，首先要将组件的逻辑分离成与技术栈无关的柯里化函数。

在定义组件的时候，借助面向逻辑编程的 API，比如 React 框架的 Hooks API、Vue 框架的 Composition API，将组件外观与组件逻辑完全解耦。

按不同终端编写对应的组件模板，再利用前端框架提供的动态组件，实现动态切换不同组件模板，从而满足不同外观的展示需求。

通过前端组件库跨框架，可以达到以下效果：

1. 提高开发效率和代码复用性，减少重复开发的工作量。

2. 统一 UI 风格和交互体验，提高产品的一致性和可用性。

3. 支持多种前端框架，让开发者更加灵活地选择框架。

4. 降低维护成本，减少代码冗余和重复的工作。

总之，前端组件库跨框架可以在不同的前端框架（如 React、Vue、Solid 等）之间共享和复用组件的能力。这种能力可以让开发者在不同的项目中使用同一套组件库，从而提高开发效率和代码复用性，提高产品的质量和用户体验。

莫春辉，华为云主任工程师，华为云 Web 能力中心低代码平台负责人，AUI 前端框架负责人。2014 年加入华为，带领团队开发 HAE（Huawei Application Engine）前端框架，其底层核心是自研的面向对象的 JS 类架构，支持与 AngularJS 相似的数据双向绑定，可灵活配置的系统、页面、组件生命周期，以及支撑华为内部 IT 应用的高性能 UI 组件库。2017 年 HAE 演进成为基于 Vue 的 AUI 框架，并以落实体验一致性规范的要求，在公司各 BET 领域大规模推行，2019 年底发布了全新架构支持跨端跨框架的 AUI 3.0 版本，2020 年推出同时支持 Vue 2 和 Vue 3 的 AUI 4.0 版本，2021 年开始负责华为云低代码平台研发工作。除前端框架开发、低代码平台研发外，还参与制定公司的前端开发规范，担任信息技术任职的评委、JavaScript 认证考试专家组成员，系公司开源能力中心 Vue SIG 组织 Maintainer 成员。

我们可以使用 Web Component 来解决跨技术栈问题。

目前三大主流前端框架：Angular、React、Vue 都已经提供官方的 Web Component 转换工具，我们利用这些转换工具，就可以轻松的将各技术栈的 UI 组件，全部包裹成 Web Component，然后当做 HTML 原生组件显示到画布上。需要指出的是，在生成的代码里，我们引用的仍然是原始的 UI 组件，而不是 Web Component，这是因为画布是设计态，源码是运行态，两者是不同的。

当前 Angular、React、Vue 是三大主流前端框架，未来又会出现什么样的框架代替它们呢？我们不得而知。但是，不管未来的前端框架如何变化，我们都先用 Web Component 技术收敛，再通过 DSL（Domain Specific Language）机制发散，生成不同框架不同技术栈的源码，这就是我们低代码平台的演进策略。

我们来举个 Vue 的例子说明 Web Component 方案。首先按照 Vue 官方的示例，定义一个 Vue 的组件，并注册成为 Web Component。然后在画布的 HTML 代码里，我们声明该 Web Component。假设这个 Vue 组件暴露的 options 属性，是数组类型。我们知道，在 HTML 标签上，attribute 属性只能设置为字符串或数值类型，因此，我们需要通过 JavaScript 脚本动态设置 options 的属性值。

接下来，我们将画布的 HTML 内容，用 AST 抽象语法树，解析成一个 JSON 对象，即描述页面的 Schema。从下面左侧的图可以看到，Web Component 组件的 options 属性，它仍然是数组类型。然后我们通过 DSL 将页面描述 Schema 转换成 Vue 的源码。从下面右侧的图可以看到，Vue 组件的 options 属性，也仍旧是数组类型。于是我们发现，从 Web Component 封装组件开始，到生成 Vue 的源码，整个过程中，给组件属性设置的值是可以透传的。

讲到这里，大家可能会有疑问，为什么不能在 Vue 应用中，直接使用 Web Component？以下列出 5 个理由，都摘自 Vue 的官网。简而言之，就是 Web Component 技术还不够强大，还不能完全替代现有的主流前端框架。

1. 我们需要一个声明式的、高效的模板系统。

2. 我们需要一个有助于跨组件逻辑提取和重用的响应式状态管理系统。

3. 我们需要一个能在服务器端渲染组件并在客户端集成的高效方法。

4. 原生插槽没有 Vue 的作用域插槽提供的组件整合机制。

5. 隐式 DOM scoped CSS 的自定义元素需要将 CSS 嵌入到 JS 中。

主要是基于 OpenTiny 组件库的 rendereless 无渲染组件架构，实现多种框架的组件库，要求复用现有的 renderless 子包逻辑。

围绕低代码最实用的场景，拓展低代码生态，包括导入新组件库物料、开发通用插件、开发领域专属设计器、与 AI 结合。

参见：

DTSE Tech Talk | 第33期：带你体验很实用的OpenTiny-云社区-华为云

速速报名，30万奖金不容错过！OpenTiny 挑战赛开发指南来咯~

从自研走向开源的 TinyVue 组件库-CSDN博客

从自研走向开源的 TinyVue 组件库_开源_OpenTiny社区_InfoQ写作社区

HDC精彩回顾|7月8日OpenTiny重磅发布 - 哔哩哔哩

低代码平台边界探索：多技术栈支持及高低代码混合开发_语言 & 开发_莫春辉_InfoQ精选文章