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 训练营--分组并行
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 都不能用了，OpenTiny还可以迁移到其他框架。
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 组件的功能不能满足他们的需求，也想按自己的方式调整，这时就需要提供一个覆盖现有组件逻辑的能力。
演示 kevinmoch.github.io/aui3-poc-de...
5、 总结：架构的影响力
解读架构的优势和不足
优点方面：第一个就是业务与框架分离，除了组件库自身实现与开源框架解耦，也可以引导应用的开发人员，将其业务代码尽量与框架解耦。第二个就是一次编码多端适配，很显然这个架构开发出来的组件，可以通过复用renderless逻辑，降低多端组件开发工作量。第三个就是统一前端技术栈，由于这个架构具有极大的弹性、包容性和扩展性，它能覆盖多框架多终端多主题，最终促使各领域技术栈归一，这是 OpenTiny 未来要走的路。
缺点方面：异步组件，加载完成前无法调用组件方法；跨框架开发，在框架差异较大的情况下复用性较低；仅限Web端，不支持 Android 和 iOS 端，不支持各类小程序。
6、课后实践：给跨端组件库的TODO组件增加清除全部待办项的功能
关于 OpenTiny
OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。
核心亮点：
跨端跨框架：使用 Renderless 无渲染组件设计架构，实现了一套代码同时支持 Vue2 / Vue3，PC / Mobile 端，并支持函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。组件丰富：PC 端有80+组件，移动端有30+组件，包含高频组件 Table、Tree、Select 等，内置虚拟滚动，保证大数据场景下的流畅体验，除了业界常见组件之外，我们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等配置式组件：组件支持模板式和配置式两种使用方式，适合低代码平台，目前团队已经将 OpenTiny 集成到内部的低代码平台，针对低码平台做了大量优化周边生态齐全：提供了基于 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）