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

华为开发者大会 2023（HDC.Cloud 2023）于 7 月 7 日-9 日在东莞拉开帷幕，本届大会以“每一个开发者都了不起”为主题，面向全球开发者,为全球开发者打造了一个思想碰撞、技术交流、实操竞技的技术殿堂，让开发者全面了解并掌握最新的技术动态，为未来技术创新开拓更广阔空间。OpenTiny 作为企业级前端组件库解决方案，也在本次大会中正式发布啦！

内容介绍：

华为云云岭团队前端专家莫春辉作为本次开源项目正式发布的演讲嘉宾，给大家讲解了 OpenTiny 作为一个企业级组件库解决方案如何给用户解决痛点和困境。

以下为项目讲解材料：

通过介绍 OpenTiny 全景图，深入分析开发者面临的市场痛点，给到用户相应的解决方案。针对企业 toB 业务场景，提供跨端、跨框架、跨版本的组件库和开箱即用的管理系统模板，以及覆盖前端开发全流程的 CLI 工具。

通过介绍 TinyVue 组件库的 9 年发展历程的三个阶段，经过 1500 多个项目的验证，3000+用户的使用，充分验证了 TinyVue 开源组件库性能安全、稳定且可靠。

TinyVue 组件库创新的架构设计解决了当前业界组件库的痛点，统一 API 接口支持不同终端展示和交互规范，结合面向业务逻辑的开发范式和无渲染组件的设计模式，支持不同技术栈和 Vue 不同版本。该架构设计已申请专利。

通过 Demo 介绍了 TinyVue 支持多主题，展示了流程组件在不同主题下的自适应效果。在 PC 端浅色主题下正常展示，在大屏端深色主题下自动适配，移动端展示也有独特的模样。这一创新架构减轻了组件开发者的负担，降低了组件使用者的成本。

通过视频 Demo 展示了,使用 TinyVue 的一套代码即可支持 PC 和移动端交互界面，包括浏览和创建待办事项。日期框和下拉框在不同设备上有不同的模式。

提供两套连接云服务的 TinyPro 模板：基于 Vue 的中后台业务模板和基于 Angular 的云服务控制台模板。支持布局配置、响应式框架、主题定制等，提供 20 个典型页面，包括工作台、列表页、表单页、服务总览页、服务购买页等。

TinyCLI 命令行工具，是一站式的前端工程化工具，提供一系列开发套件和工程插件，能够帮助用户快速构建业务。只需一条命令就能完成项目的初始化。其中命令行插件主要专注于某些特定的单一的功能，比如代码发布上线等等。

TinyTheme 是在线主题配置系统，满足不同领域的视觉定制化需求。用户在官网上实时预览操作界面，调配出个性化的组件样式。提供不同的主题，每套主题的按钮颜色、边框不同，有直角和圆角等。

以上就是我们 OpenTiny 的内容，详细的内容请访问我们的官网，我们的网址是 https://opentiny.design。最后，欢迎大家加入我们 OpenTiny 的开源社区，跟我们一起共建企业级的前端开发套件，谢谢大家！

7 月 8 日—7 月 9 日 CodeLabs 训练营：

训练营：

本次 OpenTiny 加入了 CodeLabs 训练营，旨在快速帮助开发者使用 TinyVue 组件库实现 Vue2 到 Vue3 的平滑迁移，助力实战提升。两天时间，共有 10 位开发者参与并顺利完成项目，获得荣誉证书。在这个过程中小陆同学有提到：“通过使用 TinyVue 项目搭建好之后迁移起来确实方便，只要改几行代码修改下版本号安装，迁移起来确实挺平滑的”也有开发者提到“通过本次训练营不仅学会了如何将 Vue2 项目升级到 Vue3,而且了解了如何使用 OpenTiny 制作表格和表单页面。”

7 月 8 日 极客挑战赛：

挑战赛：

7 月 8 日 OpenTiny 也设置了极客挑战赛环节，开发者在这里一决高下，展现技能和智慧。

本次 OpenTiny 设置的挑战赛赛题为：开发者通过挑战使用 @vue/repl 和 OpenTiny 组件（Button / Select / Checkbox）创建一个 Playground 代码演练场。对于这个赛题，开发者也是兴趣十足。通过讲师的精湛辅导和耐心讲解、开发者们高超的理解能力和不凡的实操技巧，最终决出了我们的最佳技术大侠！

7 月 8 日-7 月 9 日 展台交流：

展台情况：

当然展台交流的内容也是相当丰富，我们前端专家也在一线与开发者们开展深度的沟通与探讨。收集开发者们遇到的痛点及问题，近距离为开发者分享及解答当前前端开发者的困惑

首先 OpenTiny 作为一套企业级组件库解决方案，主要是为了解决以下问题：

• 多终端需要多次开发

• 多技术栈导致能力无法复用

• 框架大版本升级工作量大

• 低代码系统缺乏配置式组件

• 社区管理系统模板匮乏

其次在交流过程中，也有很多开发者反馈了自己的疑问，对于这些问题，我们的展台专家们也是给大家一一作出了解答。例如：

1、 为什么 OpenTiny 能够实现一套代码同时支持 Vue2 和 Vue3？

OpenTiny 采用无渲染 Renderlesss 设计架构，在这个架构下，TinyVue 组件有统一的 API 接口，开发人员只需写一份代码，组件就能支持不同终端的展现，比如 PC 端和 Mobile 端，而且还支持不同的 UX 交互规范。借助 React 框架的 Hooks API 或者 Vue 框架的 Composition API 可以实现组件的核心逻辑代码与前端框架解耦，甚至实现一套组件库代码，同时支持 Vue 的不同版本。

2、 如何让自己的项目从原来的组件库迁移到 OpenTiny 的组件库上来？

当一个项目想要迁移到 OpenTiny 组件库时，可以采用渐进式迁移的方式，任何项目的切换都需要一定的成本。但 OpenTiny 组件库项目从 Vue2 迁移到 Vue3 的时候就能做到一个简单平滑的迁移，并且随着前端技术的发展 OpenTiny 也能够不断的适应未来，面向未来。例如除了当前应用比较广泛的三大主流框架，还有 Svelte 等新兴框架也受到大家的瞩目，后续为了满足某些业务需求需要进行项目改造，也可以进行一个平滑的迁移。如果想从原有的 Vue2 的项目切换使用 OpenTiny 组件库项目，可以通过先保持自己原有搭建的页面特性及效果不变的情况下，进行单个组件的切换。当项目工程完成整体切换之后，再通过修改版本号就可以做到简单平滑迁移。

3、 一个项目用了 OpenTiny 组件库之后，从原来的老版本更新到新版本是否会影响老特性的使用？

当开发者之前用自己的组件库切换到 OpenTiny 组件库之后进行版本升级是否会影响之前旧版本的特性。这个问题需要具体问题具体分析，根据开发者的开发场景及业务场景，但一般情况下，为了保证业务的连续性，是不会对功能特性产生较大的影响。如果是进行大版本升级，可能会出现少量影响。

4、 开发者如何能够快速的上手使用 OpenTiny 开源组件库项目？

对于组件库上手，OpenTiny 也是在不断帮助开发者降低学习成本，首先可以通过进到 OpenTiny 的官网查看帮助文档进行学习，其次我们会定期进行直播分享，帮助开发者快速上手使用，同时，我们也会通过文章和视频的形式帮助开发者理解项目内容使用项目，接着我们还会定期参与或开展开发者活动及交流大会，与开发者近距离沟通，了解开发者痛点和困境，帮助开发者解决问题，最后，我们还有社群答疑服务，感兴趣的开发者可以加入我们的技术交流群，群里有各个技术工程师会给大家进行答疑。

5、 OpenTiny 组件库与竞品组件库的优势在于哪里？

对于前端开发者而言，如果需要搭建一个新项目，势必会根据自己的业务场景和业务需求去进行技术选型。就目前市面上的组件库来说，大家也各有优势。但目前存在一个问题在于业界的前端 UI 组件库，一般按其前端框架 Angular、React 和 Vue 的不同来分类，比如 React 组件库，Angular 组件库、Vue 组件库，也可以按面向的终端，比如 PC、Mobile 等不同来分类，比如 PC 组件库、Mobile 组件库、小程序组件库等。两种分类交叉后，又可分为 React PC 组件库、React Mobile 组件库、Angular PC 组件库、Angular Mobile 组件库、Vue PC 组件库、Vue Mobile 组件库等。另外，由于前端框架 Angular、React 和 Vue 的大版本不能向下兼容，导致不同版本对应不同的组件库。以 Vue 为例，Vue 2.0 和 Vue 3.0 版本不能兼容，因此 Vue 2.0 的 UI 组件库跟 Vue 3.0 的 UI 组件库代码是不同的，即同一个技术栈也有不同版本的 UI 组件库。我们将上面不同分类的 UI 组件库汇总在一张图里，然后站在组件库使用者的角度上看，如果要开发一个应用，那么先要从以下组件库中挑选一个，然后再学习和掌握该组件库，可见当前多端多技术栈的组件库给使用者带来沉重的学习负担。

那 OpenTiny 可以如何解决这个问题呢？OpenTiny 采用 Renderless 无渲染的设计架构，通过组件逻辑、组件样式、组件模板分离的设计理念使得代码更易于理解和维护：

• 逻辑与 UI 分离：通过将逻辑处理和数据转换等任务抽象成无渲染组件，可以将关注点分离，提高代码的可读性和可维护性。

• 提高可复用性：组件的逻辑可以在多个场景中复用。这些组件不依赖于特定的 UI 组件或前端框架，可以独立于界面进行测试和使用，从而提高代码的可复用性和可测试性。

• 符合单一职责原则：这种设计鼓励遵循单一职责原则，每个组件只负责特定的逻辑或数据处理任务。这样的设计使得代码更加模块化、可扩展和可维护，减少了组件之间的耦合度。

• 更好的可测试性：由于无渲染组件独立于 UI 进行测试，可以更容易地编写单元测试和集成测试。测试可以专注于组件的逻辑和数据转换，而无需关注界面的渲染和交互细节，提高了测试的效率和可靠性。

• 提高开发效率：开发人员可以更加专注于业务逻辑和数据处理，而无需关心具体的 UI 渲染细节。这样可以提高开发效率，减少重复的代码编写，同时也为团队协作提供了更好的可能性。

当然除了这些问题，我们也会更加关注前端未来的发展趋势，例如微前端、低代码等方向的内容。这些场景也将在后续进行不断的完善优化，让 OpenTiny 有足够的能力去能适应现在和未来。与此同时我们也将与外部开发者一起将 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-official 一起参与共建～

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

Vue 组件库：https://github.com/opentiny/tiny-vue（欢迎 Star）

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

CLI工具：https://github.com/opentiny/tiny-cli（欢迎 Star）