华为开发者大会 2023（HDC.Cloud 2023）于 7 月 7 日 - 9 日在东莞拉开帷幕, 本届大会以“每一个开发者都了不起”为主题。OpenTiny 作为前端企业级组件库解决方案，在本次大会上正式进行公布。
我的项目倒退历程：从自研走向开源的 TinyVue 组件库
OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 挪动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，领有主题配置零碎 / 中后盾模板 / CLI 命令行等效率晋升工具，可帮忙开发者高效开发 Web 利用。
OpenTiny 孵化自华为云和流程 IT，通过九年继续打磨，服务于华为内外部上千个我的项目，千锤百炼，是一个稳固牢靠的组件库，咱们心愿将外部的优良实际开源进去，服务于更宽广的企业和集体开发者，另一方面技术在一直地提高，咱们心愿携手社区开发者一起摸索新技术，一直扩大 OpenTiny 的能力边界，让更多开发者受害，因而决定全面拥抱开源。
外围亮点
一套代码同时反对 Vue 2 / Vue 3
随着 Vue 3 的逐步遍及以及 Vue 3 开源生态的继续凋敝，将来将会有更多开发者投入 Vue 3 的怀抱，应用 Vue 3 开发新业务，同时存量的 Vue 2 我的项目也会逐步迁徙到 Vue 3 中来。目前业界支流的 Vue 组件库，要么只反对 Vue 3，要么分成 Vue 2 / Vue 3 两套组件库，比方饿了么的 ElementUI，它的 Element UI for Vue 2，而 Element Plus for Vue 3。再比方 Ant Design of Vue，它的 1.x 版本 for Vue 2，而 3.x 版本 for Vue 3。因为 Vue 2 / Vue 3 两套组件库对应两套不同的代码，不免存在组件性能和 API 不同步的状况，开发者如果要从 Vue 2 组件库迁徙到 Vue 3 组件库，将面临肯定的老本和危险。OpenTiny 采纳组件与框架拆散的设计理念（Renderless 架构），将组件拆分为三个形成局部：组件模板、组件款式和组件逻辑，并针对 Vue 2 和 Vue 3 实现了相应的版本适配器，抹平 Vue 2 和 Vue 3 的差别，实现一套代码同时反对 Vue 2 和 Vue 3。这样不论是 Vue 2 我的项目还是 Vue 3 我的项目，应用组件的形式都是一样的，能够实现无缝切换，极大地升高了 Vue 2 迁徙到 Vue 3 的老本和危险。
TinyVue 组件库介绍：[一个 OpenTiny，Vue2 Vue3 都反对！](https://mp.weixin.qq.com/s/2bY_HPPO_9dp0vHTgkWTsw)
一套代码同时反对 PC 和挪动端
得益于 OpenTiny 的 Renderless 架构，咱们不仅实现了一套代码同时反对 Vue 2 和 Vue 3，还实现了一套代码反对多端，这意味着：咱们反对 PC 和挪动端，同一个组件在不同终端体现不同在多端场景下组件的应用形式完全相同
组件丰盛，功能强大
历经 9 年工夫打磨，服务于华为内外部 1500 多个业务，稳固、牢靠、平安。PC 端蕴含 80 多个组件，挪动端蕴含 30 多个组件，Table、Tree、Select 等高频组件均内置虚构滚动，在大数据场景下放弃丝滑体验。除了业界组件库都有的组件，咱们也提供了一些 OpenTiny 独有的特色组件：Split 面板分隔器 IpAddress IP 地址输入框 Calendar 日历 Crop 图片裁切欢送大家体验和应用！
提供 Angular 组件库
国内组件库大多数不提供 Angular 版本，咱们提供基于 Angular + TypeScript 的 TinyNG 组件库，蕴含丰盛的组件，反对国际化、主题定制，波及大数据的组件，已内置虚构滚动，放弃丝滑稳固，并提供企业级平安保障，所有接口杜绝 XSS 攻打。TinyNG 采纳面向对象架构设计，代码反复率远低于竞品一个数量级。
TinyNG 组件库介绍：[TinyNG——开源 Angular 框架，助力 Web 利用疾速开发！](https://mp.weixin.qq.com/s?__biz=MzU5ODA3OTY5Ng==&mid=2247489…)
开箱即用的中后盾模板
为了帮忙开发者疾速开发 Web 利用，OpenTiny 提供了开箱即用的中后盾模板 TinyPro，目前反对中后盾利用和云服务控制台利用两套典型页面模板，同时反对 Vue、NG 两套框架，反对 10+ 实用功能，20+ 典型页面场景。
笼罩前端开发全流程的 CLI 工具
为了晋升前端开发效率，OpenTiny 提供了一个跨平台的前端工程化 CLI 工具 TinyCLI，为开发者提供一系列开发套件及工程插件，笼罩前端开发的整个链路，保障团队开发过程的一致性和可复制性。
TinyCLI 工具介绍：有手就会！一行命令，装置你的 TinyCLI
主题配置零碎
OpenTiny 还提供了一款旨在进步开发效率的主题配置零碎 TinyTheme，让开发者更专一，让你的 Web 利用格调更多变。
面向未来的技术架构
OpenTiny 采纳组件和框架拆散的设计理念，反对跨端跨技术栈跨版本 Web 组件只有一套 API 接口，Web 组件可拆分为三个形成局部：组件模板、组件款式和组件逻辑。组件模板借助 Renderless Component 无渲染组件的设计模式，分离出来的模板能够多样化，以适配不同的终端，比方 PC 端模板和 Mobile 端模板。React 组件的业务逻辑借助 React Hooks API，Vue 组件的业务逻辑借助 Vue Composition API，实现面向业务逻辑编程，这样不同技术栈的雷同业务逻辑代码就汇聚到一起。对于同一个技术栈的不同版本，比方 Vue 2.0 和 Vue 3.0 则能够做一个版本适配器，只有保障组件逻辑函数的输入输出放弃对立即可。
技术架构图：
优良案例
云服务控制台
华为云控制台是治理所有华为云服务的汇合，包含服务总览、资源管理、运维治理、平安治理、自定义控制台。
TinyEngine 可视化设计器引擎
华为首个前端可视化设计器引擎，为可视化设计器开发者提供定制服务，在线构建出本人专属的设计器。反对 Vue、Angular 多技术栈，提供 VSCode 插件，反对高下代码混合开发，反对间接生成 Angular 或 Vue 源代码。
MBM 工业制作零碎
设计制作交融平台云服务，致力于打造凋谢的从工艺设计到制作经营治理畛域的工业 aPaaS 平台，平台提供齐全的标准化数据模型底座、高复用的业务模板组件、通用根底组件以及基于平台的低代码开发工具，生态搭档能够基于此平台疾速低成本地开发出各细分行业和畛域的工业利用 App。
将来瞻望
没有哪个开源我的项目是白璧无瑕的，将来咱们将依据用户反馈和业界趋势一直打磨和欠缺 OpenTiny。
组件库
组件库方面，依据用户反馈继续优化和丰盛组件，反对深色主题，反对全局配置。工程化方面须要欠缺 TypeScript 类型，欠缺组件单元测试。基于 Renderless 组件逻辑，扩大 React 框架适配层，使 OpenTiny 反对 React 框架，咱们也心愿社区开发者与咱们一起共建。将来，随着一些新兴前端框架 Svelte、SolidJS 的风行和宽泛应用，咱们也心愿能通过 Renderless 能力疾速反对这些新兴框架。
周边生态产品
因为每个行业须要的治理后盾模板不完全相同，目前 OpenTiny 反对中后盾零碎和云服务控制台两套行业模板，后续也会依据用户反馈继续进行丰盛，扩大蕴含物联网、工业制作、监控运维、大屏等更多行业场景模板，不便开发者疾速搭建本身行业的 Web 利用，这些模板共用 OpenTiny 所有的根底能力。
后续咱们也心愿搭建一个物料核心的平台，各行各业的开发者能够在其中创立本人的组件，这些组件物料将对所有开发者可见。
OpenTiny 的 CLI 工具是反对插件体系的，内置了丰盛的套件和插件，咱们将继续裁减这块的能力，打算将组件库官网套件、组件开发套件、自动化测试插件等逐渐开源，也心愿社区开发者与咱们一起共建。
随着低代码的风行，咱们也在做这方面的摸索，并心愿将华为首个前端可视化设计器引擎 TinyEngine 开源，开发者能够利用 TinyEngine 引擎开发本人低代码平台，成十上百倍地晋升 Web 利用构建的效率。更多前端新技术和新畛域，期待与你一起摸索！
分割咱们
如果你对咱们 OpenTiny 的开源我的项目感兴趣，欢送增加小助手微信：opentiny-official，拉你进群，一起交换前端技术，一起玩开源。
OpenTiny 官网：https://opentiny.design/
OpenTiny 源码仓库：https://github.com/opentiny/
TinyVue 组件库：https://github.com/opentiny/tiny-vue（欢送 Star）
TinyNG 组件库：https://github.com/opentiny/ng（欢送 Star）
TinyCLI 工具：https://github.com/opentiny/tiny-cli（欢送 Star）
欢送进入 OpenTiny 代码仓库 Star🌟
TinyVue、TinyNG、TinyCLI\~