活动回顾|OpenTiny: 跨框架前端组件库的技术实现和实践 (内含 ppt 课件）

OpenTiny: 跨框架前端组件库的技术实现和实践

华为云高级前端工程师 kagol 老师技术布道

与追光少年们一起赋能未来

教你如何玩转前端组件库~

全程干货满满，

精彩不容错过！

活动背景

本次 OpenTiny 参与了北京理工大学线下 meetup，为在校学生进行开源科普，让大家了解参与开源的意义与价值，选择自己感兴趣的开源项目参与开源。同时结合项目目前的技术领域，做开源技术分享，通过面对面技术交流，帮助高校大学生了解当前前沿技术的应用实践，加强对前端技术领域知识的了解。通过前端开源技术介绍+课后作业的形式，加强在校学生对于开源前端技术的了解程度，通过现场训练营实操强化记忆，实现针对高校学生的技术编程类活动信息共享。

活动流程

（一）活动日程安排

13:30-14:00 签到

14:00-14:10 主持人开场

14:10-14:40 议题一：大咖讲开源--高校大学生如何参与开源

14:40-15:10 议题二：数据结构和算法在数据库中的应用

15:10-15:40 议题三：Volcano 高阶调度能力加速云原生 AI 训练

15:40-16:10 议题四：跨框架前端组件库的技术实现和实践

16:10-16:20 开放互动交流

16:20-17:20 训练营--分组并行

活动详情

向宇老师在《数据结构和算法在数据库中的应用》的主题演讲中分享了 openGemini 时序数据库中使用的数据结构和算法，分别从意义、结构、与 B+tree 的区别、优化等方面对 LSM-Tree 做了重点讲解。他认为，在学校学好数据结构和算法很重要，但缺乏和实际产品或者场景的结合，openGemini 开源社区是一个非常好的补充，各类算法和数据结构除了需要经受住海量数据考验外，还应该关注性能、以及算法对资源的使用等。向宇表示，openGemini 从 2019 年开始演进，积累了非常多的数据结构和算法方面的优化实践经验，欢迎同学们参与到社区学习、开发、提升个人技术能力，社区针对高校开发者提供技术指导和相关的社区开发培训。

汪洋老师与大家分享了云原生批量计算（HPC、大数据、AI）的发展历程与挑战，主要包括作业管理、高阶调度策略和性能，领域框架支持，资源共享和异构计算等，针对以上挑战详细展开 Volcano 的架构设计与特性实现，为大家展现 Volcano 在云原生 AI 训练场景中所发挥的作用与价值。

曾令卡老师给大家分享了前端框架 20 年的发展史，并由此引出 OpenTiny 为了应对未来的挑战，构想了一套跨框架的组件设计架构，通过抽离出无渲染组件逻辑层，并增加对应框架的适配层，从而实现跨框架，这套架构目前已经在 OpenTiny 项目中落地，并被大量业务验证是可行的。接着通过一个 TODO 组件的具体例子，带着大家完整得实现了这套 renderless 组件架构，现场验证了跨框架组件库的可行性，只需要编写一套代码逻辑，就可以应用在 PC/Mobile 多端，Vue/React 多技术栈上面，对外暴露的 API 完全一致，解决了业务在框架之间迁移的难题，节省了开发成本，真正做到面向未来。

OpenTiny 主要内容分享

1、 框架：没有一成不变的前端框架

介绍前端框架的发展史，探讨如何实现面向未来的组件架构

按照过去、现在和未来来划分，将前端框架的发展简单分成三个阶段。第一阶段 jQuery 时代，jQuery 第一个版本是 2006 年发布的，当时已经有很多框架在争雄，比如 Dojo、Prototype、ExtJS 等，jQuery 凭借 2009 年推出的 Sizzle 选择器引擎，加上便捷的链式 DOM 操作，才取得了压倒性的优势，进入了长达 7 年的 jQuery 时代。直到 2014 年左右，Angular、React、Vue 陆续推出，并在 2016 年形成三足鼎立之势，前端开发的模式也从操作 DOM 进入了 MVC/MVVM 的时代，并通过虚拟 DOM 和 diff 算法尽可能减少 DOM 操作，提升前端应用的性能，三大框架时代一直持续至今。未来，Svelte、SolidJS 等新兴的框架正在崭露头角，并越来越受到开发者们的喜爱。作为前端组件库的开发者，需要思考如何应对未来挑战，因为外部因素不能够再使用的情况下，如何生存？如何从架构上保证业务的连续性？这就是 OpenTiny 组件库构想跨框架组件架构的原因。

2、 架构：设计一个跨端跨框架的组件架构

介绍组件架构的设计思路和设计理念

左边这张图，可以看出，一个 Vue 组件可以拆分成三个部分：分别是渲染模板、逻辑脚本以及组件样式。如果一个组件可以有多套渲染模板，比如不同场景和终端分别有对应的模板，那么这个组件就能适应各种场景和终端。但是，如果这些渲染模板可以共享一份逻辑脚本，这样就能保证组件 API 接口的统一，使得用户只需写一套代码。假如某个场景下，组件默认的逻辑脚本不能满足需求，用户还可以扩展，指定组件使用自定义的逻辑脚本。而对于组件的样式，可以为不同场景和终端单独设计，通过 CSS 变量技术，让用户可以动态修改组件样式。

右边这张图，说明了 OpenTiny 的设计理念是：业务与框架分离，这里的业务不仅包括 UI 组件的实现逻辑，还包括应用的页面逻辑，因为不管是 UI 组件还是页面，在 Vue 里面都属于组件。所以，架构的最底层是业务逻辑核心，不管上层采用什么开源框架，都要以不变应万变。如果因为外部因素，Vue 和 React 都不能用了，我们还可以迁移到其他框架。

3、 技术：React 钩子和无渲染组件

介绍实现面向未来的设计架构的技术方法

OpenTiny 是用 composition-api 开发完成的。这里给出 Vue 官方提供的一个 TODO 组件的例子，左边代码块是用 Vue 2.0 写的，右边代码块则是用 Vue 3.0 写的，它们都实现相同的组件及功能。从右图可以看出，代码相关联的部分用相同颜色表示，Vue2.0 显得比较零散杂乱，而 Vue3.0 就整洁有序得多。

另外一项技术，无渲染组件，这个称之为概念可能更合适一些。这篇文章同样也是一个 TODO 组件，其思路就是只实现功能不作渲染，因此它可以让一个组件看起来不一样，但功能完全相同。文章介绍的方案受当时的技术限制，只能通过 Vue 的作用域插槽实现。

将这两个技术结合起来看一下，这些代码是 Vue 3.0 的 TODO 组件，左边是组件的渲染模板，右边是组件的逻辑脚本，我们的思路是，将逻辑脚本里 setup 方法返回的对象拆分成独立的 renderless 文件，由它返回渲染所需的数据和方法。比如这里的 todo.vue 文件就拆成了两个，一个是简化后的 todo.vue 文件，另一个则是包含所有组件逻辑的 renderless.js 脚本文件。

4、 实战：构建一个跨端跨框架的 TODO 组件

通过技术解读，实践开发 TODO 组件

这个 TODO 组件，其实来自 Vue 官方 Composition API 的示例，还有之前 Renderless 文章里的示例。这里要做的就是将这些示例做成一个 TODO 组件在不同场景不同终端的展现形态。为了让大家能够体验这个 TODO 组件的运行效果，这里提供两个链接，一个是在线演示的网址，另一个是这个工程的源码。打开演示网址，可以看到页面分成左右两块，左边是用 Vue 实现的，右边是用 React 实现的，这两种实现都共用了相同的组件逻辑代码。

整个 TODO 组件示例要实现三个功能。第一个功能，实现组件 PC 和 Mobile 状态切换。具体一点就是提供两个按钮，点击 PC 按钮，组件切换到 PC 的展示形态，点击 Mobile 按钮，组件切换到 Mobile 的展示形态，切换的过程中，组件的数据和输入状态保持同步。第二个功能，实现组件支持自定义渲染模板。比如开发者觉得这个 TODO 组件的 PC 展现形态，不符合业务场景，想按自己的方式调整，但又不想重新写一个新的组件，因为现有组件的功能是满足他们要求的。第三个功能，实现组件 Renderless 函数的重写。同样，开发者觉得这个 TODO 组件的功能不能满足他们的需求，也想按自己的方式调整，这时就需要提供一个覆盖现有组件逻辑的能力。

演示：  https://kevinmoch.github.io/aui3-poc-demo

源码：  https://github.com/kevinmoch/aui3-poc-demo

5、 总结：架构的影响力

解读架构的优势和不足

优点方面：第一个就是业务与框架分离，除了组件库自身实现与开源框架解耦，也可以引导应用的开发人员，将其业务代码尽量与框架解耦。第二个就是一次编码多端适配，很显然这个架构开发出来的组件，可以通过复用 renderless 逻辑，降低多端组件开发工作量。第三个就是统一前端技术栈，由于这个架构具有极大的弹性、包容性和扩展性，它能覆盖多框架多终端多主题，最终促使各领域技术栈归一，这是 OpenTiny 未来要走的路。

缺点方面：异步组件，加载完成前无法调用组件方法；跨框架开发，在框架差异较大的情况下复用性较低；仅限 Web 端，不支持 Android 和 iOS 端，不支持各类小程序。

6、课后实践：给跨端组件库的 TODO 组件增加清除全部待办项的功能

操作手册：https://gitee.com/kagol/aui3-poc-demo/wikis/clear-tags

以上是 OpenTiny 的全部内容，也欢迎大家多多使用 OpenTiny 开源项目，一起参与前端技术的探讨分享。

活动反馈

活动之余，学生们也给到了一些反馈，例如，A 同学希望搭建一个学校信息展示的网站应用，由于之前用的是 jQuery 技术栈，很多组件都是手写的，开发效率不高，希望能用 Vue 技术栈+OpenTiny 组件库进行开发。

而 B 同学对前端框架也很感兴趣，老师分享完以后单独咨询了很多前端和前端框架的知识，比如 DOM 是什么，MVVM 框架是什么，如何实现数据变化之后对应的视图也发生变化。

还有部分学生认为，前端作为 Web 应用构建的基础，对于提高整个应用的质量起着至关重要的作用。然而，由于目前大多数同学在前端方面的认知还没有很深入，因此在学校普及前端知识是非常必要的，不仅能够加深学生对前端的了解，还能够调动学生对于前端的兴趣。普及前端知识可以帮助学生了解 Web 开发的基础知识，掌握开发技能，提高应用质量，同时也有助于后续就业后进入企业更好地了解市场需求，提高应用开发效率。

关于 OpenTiny

OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

核心亮点：

1. 跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。

2. 组件丰富：PC 端有 80+组件，移动端有 30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历、Crop 图片裁切等

3. 配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化

4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供包含 10+ 实用功能、20+ 典型页面的 TinyPro 中后台模板，提供覆盖前端开发全流程的 TinyCLI 工程化工具，提供强大的在线主题配置平台 TinyTheme

联系我们：

• 官方公众号：OpenTiny
  

• OpenTiny 官网：opentiny.design/
  

• OpenTiny 代码仓库：github.com/opentiny/
  

• Vue 组件库：github.com/opentiny/ti… （欢迎 Star）

• Angluar组件库：github.com/opentiny/ng （欢迎 Star）

• CLI工具：github.com/opentiny/ti… （欢迎 Star）