华为开发者大会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）