OpenTiny 前端組件庫正式開源啦!面向未來,為開發(fā)者而生
華為開發(fā)者大會2023（HDC.Cloud 2023）于7月7日-9日在東莞拉開帷幕,本屆大會以“每一個開發(fā)者都了不起”為主題。OpenTiny作為前端企業(yè)級組件庫解決方案，在本次大會上正式進行發(fā)布。
項目發(fā)展歷程：
從自研走向開源的 TinyVue 組件庫
OpenTiny 是一套企業(yè)級組件庫解決方案，適配 PC 端/移動端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術棧，擁有主題配置系統(tǒng) / 中后臺模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應用。
OpenTiny 孵化自華為云和流程IT，經(jīng)過九年持續(xù)打磨，服務于華為內外部上千個項目，千錘百煉，是一個穩(wěn)定可靠的組件庫，我們希望將內部的優(yōu)秀實踐開源出來，服務于更廣大的企業(yè)和個人開發(fā)者，另一方面技術在不斷地進步，我們希望攜手社區(qū)開發(fā)者一起探索新技術，不斷擴展 OpenTiny 的能力邊界，讓更多開發(fā)者受益，因此決定全面擁抱開源。
核心亮點
一套代碼同時支持 Vue 2 / Vue 3
隨著 Vue 3 的逐漸普及以及 Vue 3 開源生態(tài)的持續(xù)繁榮，未來將會有更多開發(fā)者投入 Vue 3 的懷抱，使用 Vue 3 開發(fā)新業(yè)務，同時存量的 Vue 2 項目也會逐漸遷移到 Vue 3 中來。
目前業(yè)界主流的 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 不同步的情況，開發(fā)者如果要從 Vue 2 組件庫遷移到 Vue 3 組件庫，將面臨一定的成本和風險。
OpenTiny 采用組件與框架分離的設計理念（Renderless 架構），將組件拆分為三個構成部分：組件模板、組件樣式和組件邏輯，并針對 Vue 2 和 Vue 3 實現(xiàn)了相應的版本適配器，抹平 Vue 2 和 Vue 3 的差異，實現(xiàn)一套代碼同時支持 Vue 2 和 Vue 3。
這樣不管是 Vue 2 項目還是 Vue 3 項目，使用組件的方式都是一樣的，可以實現(xiàn)無縫切換，極大地降低了 Vue 2 遷移到 Vue 3 的成本和風險。
TinyVue組件庫介紹： 一個 OpenTiny，Vue2 Vue3 都支持！
一套代碼同時支持PC和移動端
得益于 OpenTiny 的 Renderless 架構，我們不僅實現(xiàn)了一套代碼同時支持 Vue 2 和 Vue 3，還實現(xiàn)了一套代碼支持多端，這意味著：
-
我們支持 PC 和移動端，同一個組件在不同終端表現(xiàn)不同
-
在多端場景下組件的使用方式完全相同
組件豐富，功能強大
歷經(jīng) 9 年時間打磨，服務于華為內外部1500多個業(yè)務，穩(wěn)定、可靠、安全。
PC 端包含 80 多個組件，移動端包含 30 多個組件，Table、Tree、Select 等高頻組件均內置虛擬滾動，在大數(shù)據(jù)場景下保持絲滑體驗。
除了業(yè)界組件庫都有的組件，我們也提供了一些 OpenTiny 獨有的特色組件：
-
Split 面板分隔器
-
IpAddress IP 地址輸入框
-
Calendar 日歷
-
Crop 圖片裁切
歡迎大家體驗和使用！
提供 Angular 組件庫
國內組件庫大多數(shù)不提供 Angular 版本，我們提供基于 Angular + TypeScript 的 TinyNG 組件庫，包含豐富的組件，支持國際化、主題定制，涉及大數(shù)據(jù)的組件，已內置虛擬滾動，保持絲滑穩(wěn)定，并提供企業(yè)級安全保障，所有接口杜絕 XSS 攻擊。TinyNG 采用面向對象架構設計，代碼重復率遠低于競品一個數(shù)量級。
TinyNG 組件庫介紹： TinyNG——開源Angular框架，助力Web應用快速開發(fā)！
開箱即用的中后臺模板
為了幫助開發(fā)者快速開發(fā) Web 應用，OpenTiny 提供了開箱即用的中后臺模板 TinyPro，目前支持中后臺應用和云服務控制臺應用兩套典型頁面模板，同時支持 Vue、NG 兩套框架，支持 10+ 實用功能，20+ 典型頁面場景。
覆蓋前端開發(fā)全流程的 CLI 工具
為了提升前端開發(fā)效率，OpenTiny 提供了一個跨平臺的前端工程化 CLI 工具 TinyCLI，為開發(fā)者提供一系列開發(fā)套件及工程插件，覆蓋前端開發(fā)的整個鏈路，保證團隊開發(fā)過程的一致性和可復制性。
TinyCLI工具介紹： 有手就會！一行命令，安裝你的TinyCLI
主題配置系統(tǒng)
OpenTiny 還提供了一款旨在提高開發(fā)效率的主題配置系統(tǒng) TinyTheme，讓開發(fā)者更專注，讓你的 Web 應用風格更多變。
面向未來的技術架構
OpenTiny 采用組件和框架分離的設計理念，支持跨端跨技術?？绨姹?Web 組件只有一套 API 接口，Web 組件可拆分為三個構成部分：組件模板、組件樣式和組件邏輯。
組件模板借助 Renderless Component 無渲染組件的設計模式，分離出來的模板可以多樣化，以適配不同的終端，比如 PC 端模板和 Mobile 端模板。
React 組件的業(yè)務邏輯借助 React Hooks API，Vue 組件的業(yè)務邏輯借助 Vue Composition API，實現(xiàn)面向業(yè)務邏輯編程，這樣不同技術棧的相同業(yè)務邏輯代碼就匯聚到一起。
對于同一個技術棧的不同版本，比如 Vue 2.0 和 Vue 3.0 則可以做一個版本適配器，只要保證組件邏輯函數(shù)的輸入輸出保持統(tǒng)一即可。
技術架構圖：
優(yōu)秀案例
云服務控制臺
華為云控制臺是管理所有華為云服務的集合，包括服務總覽、資源管理、運維管理、安全管理、自定義控制臺。
TinyEngine 可視化設計器引擎
華為首個前端可視化設計器引擎，為可視化設計器開發(fā)者提供定制服務，在線構建出自己專屬的設計器。支持 Vue、Angular 多技術棧，提供 VSCode 插件，支持高低代碼混合開發(fā)，支持直接生成 Angular 或 Vue 源代碼。
MBM 工業(yè)制造系統(tǒng)
設計制造融合平臺云服務，致力于打造開放的從工藝設計到制造運營管理領域的工業(yè) aPaaS 平臺，平臺提供齊全的標準化數(shù)據(jù)模型底座、高復用的業(yè)務模板組件、通用基礎組件以及基于平臺的低代碼開發(fā)工具，生態(tài)伙伴可以基于此平臺快速低成本地開發(fā)出各細分行業(yè)和領域的工業(yè)應用 App。
未來展望
沒有哪個開源項目是完美無缺的，未來我們將根據(jù)用戶反饋和業(yè)界趨勢不斷打磨和完善 OpenTiny。
組件庫
組件庫方面，根據(jù)用戶反饋持續(xù)優(yōu)化和豐富組件，支持深色主題，支持全局配置。工程化方面需要完善 TypeScript 類型，完善組件單元測試。
基于 Renderless 組件邏輯，擴展 React 框架適配層，使 OpenTiny 支持 React 框架，我們也希望社區(qū)開發(fā)者與我們一起共建。
未來，隨著一些新興前端框架 Svelte、SolidJS 的流行和廣泛使用，我們也希望能通過 Renderless 能力快速支持這些新興框架。
周邊生態(tài)產(chǎn)品
由于每個行業(yè)需要的管理后臺模板不完全相同，目前 OpenTiny 支持中后臺系統(tǒng)和云服務控制臺兩套行業(yè)模板，后續(xù)也會根據(jù)用戶反饋持續(xù)進行豐富，擴展包含物聯(lián)網(wǎng)、工業(yè)制造、監(jiān)控運維、大屏等更多行業(yè)場景模板，方便開發(fā)者快速搭建自身行業(yè)的 Web 應用，這些模板共用 OpenTiny 所有的基礎能力。
后續(xù)我們也希望搭建一個物料中心的平臺，各行各業(yè)的開發(fā)者可以在其中創(chuàng)建自己的組件，這些組件物料將對所有開發(fā)者可見。
OpenTiny 的 CLI 工具是支持插件體系的，內置了豐富的套件和插件，我們將持續(xù)擴充這塊的能力，計劃將組件庫官網(wǎng)套件、組件開發(fā)套件、自動化測試插件等逐步開源，也希望社區(qū)開發(fā)者與我們一起共建。
隨著低代碼的流行，我們也在做這方面的探索，并希望將華為首個前端可視化設計器引擎 TinyEngine 開源，開發(fā)者可以利用 TinyEngine 引擎開發(fā)自己低代碼平臺，成十上百倍地提升 Web 應用構建的效率。
更多前端新技術和新領域，期待與你一起探索！
聯(lián)系我們
? OpenTiny 官網(wǎng)： https://opentiny.design/
OpenTiny 源碼倉庫：https://github.com/opentiny/