華為開發者大會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應用快速開發！

開箱即用的中後台模板

為了幫助開發者快速開發 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\~