華為開發(fā)者大會(huì)2023（HDC.Cloud 2023）于7月7日-9日在東莞拉開帷幕,本屆大會(huì)以“每一個(gè)開發(fā)者都了不起”為主題。OpenTiny作為前端企業(yè)級(jí)組件庫(kù)解決方案，在本次大會(huì)上正式進(jìn)行發(fā)布。

項(xiàng)目發(fā)展歷程：從自研走向開源的 TinyVue 組件庫(kù)

OpenTiny 是一套企業(yè)級(jí)組件庫(kù)解決方案，適配 PC 端/移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

OpenTiny 孵化自華為云和流程IT，經(jīng)過(guò)九年持續(xù)打磨，服務(wù)于華為內(nèi)外部上千個(gè)項(xiàng)目，千錘百煉，是一個(gè)穩(wěn)定可靠的組件庫(kù)，我們希望將內(nèi)部的優(yōu)秀實(shí)踐開源出來(lái)，服務(wù)于更廣大的企業(yè)和個(gè)人開發(fā)者，另一方面技術(shù)在不斷地進(jìn)步，我們希望攜手社區(qū)開發(fā)者一起探索新技術(shù)，不斷擴(kuò)展 OpenTiny 的能力邊界，讓更多開發(fā)者受益，因此決定全面擁抱開源。

核心亮點(diǎn)

一套代碼同時(shí)支持 Vue 2 / Vue 3

隨著 Vue 3 的逐漸普及以及 Vue 3 開源生態(tài)的持續(xù)繁榮，未來(lái)將會(huì)有更多開發(fā)者投入 Vue 3 的懷抱，使用 Vue 3 開發(fā)新業(yè)務(wù)，同時(shí)存量的 Vue 2 項(xiàng)目也會(huì)逐漸遷移到 Vue 3 中來(lái)。

目前業(yè)界主流的 Vue 組件庫(kù)，要么只支持 Vue 3，要么分成 Vue 2 / Vue 3 兩套組件庫(kù)，比如餓了么的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 兩套組件庫(kù)對(duì)應(yīng)兩套不同的代碼，難免存在組件功能和 API 不同步的情況，開發(fā)者如果要從 Vue 2 組件庫(kù)遷移到 Vue 3 組件庫(kù)，將面臨一定的成本和風(fēng)險(xiǎn)。

OpenTiny 采用組件與框架分離的設(shè)計(jì)理念（Renderless 架構(gòu)），將組件拆分為三個(gè)構(gòu)成部分：組件模板、組件樣式和組件邏輯，并針對(duì) Vue 2 和 Vue 3 實(shí)現(xiàn)了相應(yīng)的版本適配器，抹平 Vue 2 和 Vue 3 的差異，實(shí)現(xiàn)一套代碼同時(shí)支持 Vue 2 和 Vue 3。

這樣不管是 Vue 2 項(xiàng)目還是 Vue 3 項(xiàng)目，使用組件的方式都是一樣的，可以實(shí)現(xiàn)無(wú)縫切換，極大地降低了 Vue 2 遷移到 Vue 3 的成本和風(fēng)險(xiǎn)。

TinyVue組件庫(kù)介紹：一個(gè) OpenTiny，Vue2 Vue3 都支持！

一套代碼同時(shí)支持PC和移動(dòng)端

得益于 OpenTiny 的 Renderless 架構(gòu)，我們不僅實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue 2 和 Vue 3，還實(shí)現(xiàn)了一套代碼支持多端，這意味著：

• 我們支持 PC 和移動(dòng)端，同一個(gè)組件在不同終端表現(xiàn)不同

• 在多端場(chǎng)景下組件的使用方式完全相同

組件豐富，功能強(qiáng)大

歷經(jīng) 9 年時(shí)間打磨，服務(wù)于華為內(nèi)外部1500多個(gè)業(yè)務(wù)，穩(wěn)定、可靠、安全。

PC 端包含 80 多個(gè)組件，移動(dòng)端包含 30 多個(gè)組件，Table、Tree、Select 等高頻組件均內(nèi)置虛擬滾動(dòng)，在大數(shù)據(jù)場(chǎng)景下保持絲滑體驗(yàn)。

除了業(yè)界組件庫(kù)都有的組件，我們也提供了一些 OpenTiny 獨(dú)有的特色組件：

• Split 面板分隔器

• IpAddress IP 地址輸入框

• Calendar 日歷

• Crop 圖片裁切

歡迎大家體驗(yàn)和使用！

提供 Angular 組件庫(kù)

國(guó)內(nèi)組件庫(kù)大多數(shù)不提供 Angular 版本，我們提供基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，包含豐富的組件，支持國(guó)際化、主題定制，涉及大數(shù)據(jù)的組件，已內(nèi)置虛擬滾動(dòng)，保持絲滑穩(wěn)定，并提供企業(yè)級(jí)安全保障，所有接口杜絕 XSS 攻擊。TinyNG 采用面向?qū)ο蠹軜?gòu)設(shè)計(jì)，代碼重復(fù)率遠(yuǎn)低于競(jìng)品一個(gè)數(shù)量級(jí)。

TinyNG組件庫(kù)介紹：TinyNG——開源Angular框架，助力Web應(yīng)用快速開發(fā)！

開箱即用的中后臺(tái)模板

為了幫助開發(fā)者快速開發(fā) Web 應(yīng)用，OpenTiny 提供了開箱即用的中后臺(tái)模板 TinyPro，目前支持中后臺(tái)應(yīng)用和云服務(wù)控制臺(tái)應(yīng)用兩套典型頁(yè)面模板，同時(shí)支持 Vue、NG 兩套框架，支持 10+ 實(shí)用功能，20+ 典型頁(yè)面場(chǎng)景。

覆蓋前端開發(fā)全流程的 CLI 工具

為了提升前端開發(fā)效率，OpenTiny 提供了一個(gè)跨平臺(tái)的前端工程化 CLI 工具 TinyCLI，為開發(fā)者提供一系列開發(fā)套件及工程插件，覆蓋前端開發(fā)的整個(gè)鏈路，保證團(tuán)隊(duì)開發(fā)過(guò)程的一致性和可復(fù)制性。

TinyCLI工具介紹：有手就會(huì)！一行命令，安裝你的TinyCLI

主題配置系統(tǒng)

OpenTiny 還提供了一款旨在提高開發(fā)效率的主題配置系統(tǒng) TinyTheme，讓開發(fā)者更專注，讓你的 Web 應(yīng)用風(fēng)格更多變。

面向未來(lái)的技術(shù)架構(gòu)

OpenTiny 采用組件和框架分離的設(shè)計(jì)理念，支持跨端跨技術(shù)棧跨版本 Web 組件只有一套 API 接口，Web 組件可拆分為三個(gè)構(gòu)成部分：組件模板、組件樣式和組件邏輯。

組件模板借助 Renderless Component 無(wú)渲染組件的設(shè)計(jì)模式，分離出來(lái)的模板可以多樣化，以適配不同的終端，比如 PC 端模板和 Mobile 端模板。

React 組件的業(yè)務(wù)邏輯借助 React Hooks API，Vue 組件的業(yè)務(wù)邏輯借助 Vue Composition API，實(shí)現(xiàn)面向業(yè)務(wù)邏輯編程，這樣不同技術(shù)棧的相同業(yè)務(wù)邏輯代碼就匯聚到一起。

對(duì)于同一個(gè)技術(shù)棧的不同版本，比如 Vue 2.0 和 Vue 3.0 則可以做一個(gè)版本適配器，只要保證組件邏輯函數(shù)的輸入輸出保持統(tǒng)一即可。

技術(shù)架構(gòu)圖：

優(yōu)秀案例

云服務(wù)控制臺(tái)

華為云控制臺(tái)是管理所有華為云服務(wù)的集合，包括服務(wù)總覽、資源管理、運(yùn)維管理、安全管理、自定義控制臺(tái)。

TinyEngine 可視化設(shè)計(jì)器引擎

華為首個(gè)前端可視化設(shè)計(jì)器引擎，為可視化設(shè)計(jì)器開發(fā)者提供定制服務(wù)，在線構(gòu)建出自己專屬的設(shè)計(jì)器。支持 Vue、Angular 多技術(shù)棧，提供 VSCode 插件，支持高低代碼混合開發(fā)，支持直接生成 Angular 或 Vue 源代碼。

MBM 工業(yè)制造系統(tǒng)

設(shè)計(jì)制造融合平臺(tái)云服務(wù)，致力于打造開放的從工藝設(shè)計(jì)到制造運(yùn)營(yíng)管理領(lǐng)域的工業(yè) aPaaS 平臺(tái)，平臺(tái)提供齊全的標(biāo)準(zhǔn)化數(shù)據(jù)模型底座、高復(fù)用的業(yè)務(wù)模板組件、通用基礎(chǔ)組件以及基于平臺(tái)的低代碼開發(fā)工具，生態(tài)伙伴可以基于此平臺(tái)快速低成本地開發(fā)出各細(xì)分行業(yè)和領(lǐng)域的工業(yè)應(yīng)用 App。

未來(lái)展望

沒(méi)有哪個(gè)開源項(xiàng)目是完美無(wú)缺的，未來(lái)我們將根據(jù)用戶反饋和業(yè)界趨勢(shì)不斷打磨和完善 OpenTiny。

組件庫(kù)

組件庫(kù)方面，根據(jù)用戶反饋持續(xù)優(yōu)化和豐富組件，支持深色主題，支持全局配置。工程化方面需要完善 TypeScript 類型，完善組件單元測(cè)試。

基于 Renderless 組件邏輯，擴(kuò)展 React 框架適配層，使 OpenTiny 支持 React 框架，我們也希望社區(qū)開發(fā)者與我們一起共建。

未來(lái)，隨著一些新興前端框架 Svelte、SolidJS 的流行和廣泛使用，我們也希望能通過(guò) Renderless 能力快速支持這些新興框架。

周邊生態(tài)產(chǎn)品

由于每個(gè)行業(yè)需要的管理后臺(tái)模板不完全相同，目前 OpenTiny 支持中后臺(tái)系統(tǒng)和云服務(wù)控制臺(tái)兩套行業(yè)模板，后續(xù)也會(huì)根據(jù)用戶反饋持續(xù)進(jìn)行豐富，擴(kuò)展包含物聯(lián)網(wǎng)、工業(yè)制造、監(jiān)控運(yùn)維、大屏等更多行業(yè)場(chǎng)景模板，方便開發(fā)者快速搭建自身行業(yè)的 Web 應(yīng)用，這些模板共用 OpenTiny 所有的基礎(chǔ)能力。

后續(xù)我們也希望搭建一個(gè)物料中心的平臺(tái)，各行各業(yè)的開發(fā)者可以在其中創(chuàng)建自己的組件，這些組件物料將對(duì)所有開發(fā)者可見。

OpenTiny 的 CLI 工具是支持插件體系的，內(nèi)置了豐富的套件和插件，我們將持續(xù)擴(kuò)充這塊的能力，計(jì)劃將組件庫(kù)官網(wǎng)套件、組件開發(fā)套件、自動(dòng)化測(cè)試插件等逐步開源，也希望社區(qū)開發(fā)者與我們一起共建。

隨著低代碼的流行，我們也在做這方面的探索，并希望將華為首個(gè)前端可視化設(shè)計(jì)器引擎 TinyEngine 開源，開發(fā)者可以利用 TinyEngine 引擎開發(fā)自己低代碼平臺(tái)，成十上百倍地提升 Web 應(yīng)用構(gòu)建的效率。

更多前端新技術(shù)和新領(lǐng)域，期待與你一起探索！

聯(lián)系我們

如果你對(duì)我們 OpenTiny 的開源項(xiàng)目感興趣，歡迎添加小助手微信：opentiny-official，拉你進(jìn)群，一起交流前端技術(shù)，一起玩開源。

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 源碼倉(cāng)庫(kù)：https://github.com/opentiny/

TinyVue 組件庫(kù)：< https://github.com/opentiny/tiny-vue> （歡迎 Star）

TinyNG 組件庫(kù)：< https://github.com/opentiny/ng> （歡迎 Star）

TinyCLI 工具： < https://github.com/opentiny/tiny-cli> （歡迎 Star）

歡迎進(jìn)入 OpenTiny 代碼倉(cāng)庫(kù) Star?? TinyVue、TinyNG、TinyCLI\~