活动回顾 | 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）