華為開發(fā)者大會(huì) 2023（HDC.Cloud 2023）于 7 月 7 日-9 日在東莞拉開帷幕，本屆大會(huì)以“每一個(gè)開發(fā)者都了不起”為主題，面向全球開發(fā)者,為全球開發(fā)者打造了一個(gè)思想碰撞、技術(shù)交流、實(shí)操競(jìng)技的技術(shù)殿堂，讓開發(fā)者全面了解并掌握最新的技術(shù)動(dòng)態(tài)，為未來(lái)技術(shù)創(chuàng)新開拓更廣闊空間。OpenTiny 作為企業(yè)級(jí)前端組件庫(kù)解決方案，也在本次大會(huì)中正式發(fā)布啦！

內(nèi)容介紹：

華為云云嶺團(tuán)隊(duì)前端專家莫春輝作為本次開源項(xiàng)目正式發(fā)布的演講嘉賓，給大家講解了 OpenTiny 作為一個(gè)企業(yè)級(jí)組件庫(kù)解決方案如何給用戶解決痛點(diǎn)和困境。

以下為項(xiàng)目講解材料：

通過(guò)介紹 OpenTiny 全景圖，深入分析開發(fā)者面臨的市場(chǎng)痛點(diǎn)，給到用戶相應(yīng)的解決方案。針對(duì)企業(yè) toB 業(yè)務(wù)場(chǎng)景，提供跨端、跨框架、跨版本的組件庫(kù)和開箱即用的管理系統(tǒng)模板，以及覆蓋前端開發(fā)全流程的 CLI 工具。

通過(guò)介紹 TinyVue 組件庫(kù)的 9 年發(fā)展歷程的三個(gè)階段，經(jīng)過(guò) 1500 多個(gè)項(xiàng)目的驗(yàn)證，3000+用戶的使用，充分驗(yàn)證了 TinyVue 開源組件庫(kù)性能安全、穩(wěn)定且可靠。

TinyVue 組件庫(kù)創(chuàng)新的架構(gòu)設(shè)計(jì)解決了當(dāng)前業(yè)界組件庫(kù)的痛點(diǎn)，統(tǒng)一 API 接口支持不同終端展示和交互規(guī)范，結(jié)合面向業(yè)務(wù)邏輯的開發(fā)范式和無(wú)渲染組件的設(shè)計(jì)模式，支持不同技術(shù)棧和 Vue 不同版本。該架構(gòu)設(shè)計(jì)已申請(qǐng)專利。

通過(guò) Demo 介紹了 TinyVue 支持多主題，展示了流程組件在不同主題下的自適應(yīng)效果。在 PC 端淺色主題下正常展示，在大屏端深色主題下自動(dòng)適配，移動(dòng)端展示也有獨(dú)特的模樣。這一創(chuàng)新架構(gòu)減輕了組件開發(fā)者的負(fù)擔(dān)，降低了組件使用者的成本。

通過(guò)視頻 Demo 展示了,使用 TinyVue 的一套代碼即可支持 PC 和移動(dòng)端交互界面，包括瀏覽和創(chuàng)建待辦事項(xiàng)。日期框和下拉框在不同設(shè)備上有不同的模式。

提供兩套連接云服務(wù)的 TinyPro 模板：基于 Vue 的中后臺(tái)業(yè)務(wù)模板和基于 Angular 的云服務(wù)控制臺(tái)模板。支持布局配置、響應(yīng)式框架、主題定制等，提供 20 個(gè)典型頁(yè)面，包括工作臺(tái)、列表頁(yè)、表單頁(yè)、服務(wù)總覽頁(yè)、服務(wù)購(gòu)買頁(yè)等。

TinyCLI 命令行工具，是一站式的前端工程化工具，提供一系列開發(fā)套件和工程插件，能夠幫助用戶快速構(gòu)建業(yè)務(wù)。只需一條命令就能完成項(xiàng)目的初始化。其中命令行插件主要專注于某些特定的單一的功能，比如代碼發(fā)布上線等等。

TinyTheme 是在線主題配置系統(tǒng)，滿足不同領(lǐng)域的視覺(jué)定制化需求。用戶在官網(wǎng)上實(shí)時(shí)預(yù)覽操作界面，調(diào)配出個(gè)性化的組件樣式。提供不同的主題，每套主題的按鈕顏色、邊框不同，有直角和圓角等。

以上就是我們 OpenTiny 的內(nèi)容，詳細(xì)的內(nèi)容請(qǐng)?jiān)L問(wèn)我們的官網(wǎng)，我們的網(wǎng)址是 https://opentiny.design。最后，歡迎大家加入我們 OpenTiny 的開源社區(qū)，跟我們一起共建企業(yè)級(jí)的前端開發(fā)套件，謝謝大家！

7 月 8 日—7 月 9 日 CodeLabs 訓(xùn)練營(yíng)：

訓(xùn)練營(yíng)：

本次 OpenTiny 加入了 CodeLabs 訓(xùn)練營(yíng)，旨在快速幫助開發(fā)者使用 TinyVue 組件庫(kù)實(shí)現(xiàn) Vue2 到 Vue3 的平滑遷移，助力實(shí)戰(zhàn)提升。兩天時(shí)間，共有 10 位開發(fā)者參與并順利完成項(xiàng)目，獲得榮譽(yù)證書。在這個(gè)過(guò)程中小陸同學(xué)有提到：“通過(guò)使用 TinyVue 項(xiàng)目搭建好之后遷移起來(lái)確實(shí)方便，只要改幾行代碼修改下版本號(hào)安裝，遷移起來(lái)確實(shí)挺平滑的”也有開發(fā)者提到“通過(guò)本次訓(xùn)練營(yíng)不僅學(xué)會(huì)了如何將 Vue2 項(xiàng)目升級(jí)到 Vue3,而且了解了如何使用 OpenTiny 制作表格和表單頁(yè)面。”

7 月 8 日?極客挑戰(zhàn)賽：

挑戰(zhàn)賽：

7 月 8 日 OpenTiny 也設(shè)置了極客挑戰(zhàn)賽環(huán)節(jié)，開發(fā)者在這里一決高下，展現(xiàn)技能和智慧。

本次 OpenTiny 設(shè)置的挑戰(zhàn)賽賽題為：開發(fā)者通過(guò)挑戰(zhàn)使用 @vue/repl 和 OpenTiny 組件（Button / Select / Checkbox）創(chuàng)建一個(gè) Playground 代碼演練場(chǎng)。對(duì)于這個(gè)賽題，開發(fā)者也是興趣十足。通過(guò)講師的精湛輔導(dǎo)和耐心講解、開發(fā)者們高超的理解能力和不凡的實(shí)操技巧，最終決出了我們的最佳技術(shù)大俠！

7 月 8 日-7 月 9 日?展臺(tái)交流：

展臺(tái)情況：

當(dāng)然展臺(tái)交流的內(nèi)容也是相當(dāng)豐富，我們前端專家也在一線與開發(fā)者們開展深度的溝通與探討。收集開發(fā)者們遇到的痛點(diǎn)及問(wèn)題，近距離為開發(fā)者分享及解答當(dāng)前前端開發(fā)者的困惑

首先 OpenTiny 作為一套企業(yè)級(jí)組件庫(kù)解決方案，主要是為了解決以下問(wèn)題：

• 多終端需要多次開發(fā)

• 多技術(shù)棧導(dǎo)致能力無(wú)法復(fù)用

• 框架大版本升級(jí)工作量大

• 低代碼系統(tǒng)缺乏配置式組件

• 社區(qū)管理系統(tǒng)模板匱乏

其次在交流過(guò)程中，也有很多開發(fā)者反饋了自己的疑問(wèn)，對(duì)于這些問(wèn)題，我們的展臺(tái)專家們也是給大家一一作出了解答。例如：

1、 為什么 OpenTiny 能夠?qū)崿F(xiàn)一套代碼同時(shí)支持 Vue2 和 Vue3？

OpenTiny 采用無(wú)渲染 Renderlesss 設(shè)計(jì)架構(gòu)，在這個(gè)架構(gòu)下，TinyVue 組件有統(tǒng)一的 API 接口，開發(fā)人員只需寫一份代碼，組件就能支持不同終端的展現(xiàn)，比如 PC 端和 Mobile 端，而且還支持不同的 UX 交互規(guī)范。借助 React 框架的 Hooks API 或者 Vue 框架的 Composition API 可以實(shí)現(xiàn)組件的核心邏輯代碼與前端框架解耦，甚至實(shí)現(xiàn)一套組件庫(kù)代碼，同時(shí)支持 Vue 的不同版本。

2、 如何讓自己的項(xiàng)目從原來(lái)的組件庫(kù)遷移到 OpenTiny 的組件庫(kù)上來(lái)？

當(dāng)一個(gè)項(xiàng)目想要遷移到 OpenTiny 組件庫(kù)時(shí)，可以采用漸進(jìn)式遷移的方式，任何項(xiàng)目的切換都需要一定的成本。但 OpenTiny 組件庫(kù)項(xiàng)目從 Vue2 遷移到 Vue3 的時(shí)候就能做到一個(gè)簡(jiǎn)單平滑的遷移，并且隨著前端技術(shù)的發(fā)展 OpenTiny 也能夠不斷的適應(yīng)未來(lái)，面向未來(lái)。例如除了當(dāng)前應(yīng)用比較廣泛的三大主流框架，還有 Svelte 等新興框架也受到大家的矚目，后續(xù)為了滿足某些業(yè)務(wù)需求需要進(jìn)行項(xiàng)目改造，也可以進(jìn)行一個(gè)平滑的遷移。如果想從原有的 Vue2 的項(xiàng)目切換使用 OpenTiny 組件庫(kù)項(xiàng)目，可以通過(guò)先保持自己原有搭建的頁(yè)面特性及效果不變的情況下，進(jìn)行單個(gè)組件的切換。當(dāng)項(xiàng)目工程完成整體切換之后，再通過(guò)修改版本號(hào)就可以做到簡(jiǎn)單平滑遷移。

3、 一個(gè)項(xiàng)目用了 OpenTiny 組件庫(kù)之后，從原來(lái)的老版本更新到新版本是否會(huì)影響老特性的使用？

當(dāng)開發(fā)者之前用自己的組件庫(kù)切換到 OpenTiny 組件庫(kù)之后進(jìn)行版本升級(jí)是否會(huì)影響之前舊版本的特性。這個(gè)問(wèn)題需要具體問(wèn)題具體分析，根據(jù)開發(fā)者的開發(fā)場(chǎng)景及業(yè)務(wù)場(chǎng)景，但一般情況下，為了保證業(yè)務(wù)的連續(xù)性，是不會(huì)對(duì)功能特性產(chǎn)生較大的影響。如果是進(jìn)行大版本升級(jí)，可能會(huì)出現(xiàn)少量影響。

4、 開發(fā)者如何能夠快速的上手使用 OpenTiny 開源組件庫(kù)項(xiàng)目？

對(duì)于組件庫(kù)上手，OpenTiny 也是在不斷幫助開發(fā)者降低學(xué)習(xí)成本，首先可以通過(guò)進(jìn)到 OpenTiny 的官網(wǎng)查看幫助文檔進(jìn)行學(xué)習(xí)，其次我們會(huì)定期進(jìn)行直播分享，幫助開發(fā)者快速上手使用，同時(shí)，我們也會(huì)通過(guò)文章和視頻的形式幫助開發(fā)者理解項(xiàng)目?jī)?nèi)容使用項(xiàng)目，接著我們還會(huì)定期參與或開展開發(fā)者活動(dòng)及交流大會(huì)，與開發(fā)者近距離溝通，了解開發(fā)者痛點(diǎn)和困境，幫助開發(fā)者解決問(wèn)題，最后，我們還有社群答疑服務(wù)，感興趣的開發(fā)者可以加入我們的技術(shù)交流群，群里有各個(gè)技術(shù)工程師會(huì)給大家進(jìn)行答疑。

5、 OpenTiny 組件庫(kù)與競(jìng)品組件庫(kù)的優(yōu)勢(shì)在于哪里？

對(duì)于前端開發(fā)者而言，如果需要搭建一個(gè)新項(xiàng)目，勢(shì)必會(huì)根據(jù)自己的業(yè)務(wù)場(chǎng)景和業(yè)務(wù)需求去進(jìn)行技術(shù)選型。就目前市面上的組件庫(kù)來(lái)說(shuō)，大家也各有優(yōu)勢(shì)。但目前存在一個(gè)問(wèn)題在于業(yè)界的前端 UI 組件庫(kù)，一般按其前端框架 Angular、React 和 Vue 的不同來(lái)分類，比如 React 組件庫(kù)，Angular 組件庫(kù)、Vue 組件庫(kù)，也可以按面向的終端，比如 PC、Mobile 等不同來(lái)分類，比如 PC 組件庫(kù)、Mobile 組件庫(kù)、小程序組件庫(kù)等。兩種分類交叉后，又可分為 React PC 組件庫(kù)、React Mobile 組件庫(kù)、Angular PC 組件庫(kù)、Angular Mobile 組件庫(kù)、Vue PC 組件庫(kù)、Vue Mobile 組件庫(kù)等。另外，由于前端框架 Angular、React?和?Vue?的大版本不能向下兼容，導(dǎo)致不同版本對(duì)應(yīng)不同的組件庫(kù)。以 Vue 為例，Vue 2.0?和 Vue 3.0?版本不能兼容，因此 Vue 2.0?的 UI 組件庫(kù)跟 Vue 3.0?的 UI 組件庫(kù)代碼是不同的，即同一個(gè)技術(shù)棧也有不同版本的 UI 組件庫(kù)。我們將上面不同分類的 UI 組件庫(kù)匯總在一張圖里，然后站在組件庫(kù)使用者的角度上看，如果要開發(fā)一個(gè)應(yīng)用，那么先要從以下組件庫(kù)中挑選一個(gè)，然后再學(xué)習(xí)和掌握該組件庫(kù)，可見(jiàn)當(dāng)前多端多技術(shù)棧的組件庫(kù)給使用者帶來(lái)沉重的學(xué)習(xí)負(fù)擔(dān)。

那 OpenTiny 可以如何解決這個(gè)問(wèn)題呢？OpenTiny 采用 Renderless 無(wú)渲染的設(shè)計(jì)架構(gòu)，通過(guò)組件邏輯、組件樣式、組件模板分離的設(shè)計(jì)理念使得代碼更易于理解和維護(hù)：

• 邏輯與 UI 分離：通過(guò)將邏輯處理和數(shù)據(jù)轉(zhuǎn)換等任務(wù)抽象成無(wú)渲染組件，可以將關(guān)注點(diǎn)分離，提高代碼的可讀性和可維護(hù)性。

• 提高可復(fù)用性：組件的邏輯可以在多個(gè)場(chǎng)景中復(fù)用。這些組件不依賴于特定的 UI 組件或前端框架，可以獨(dú)立于界面進(jìn)行測(cè)試和使用，從而提高代碼的可復(fù)用性和可測(cè)試性。

• 符合單一職責(zé)原則：這種設(shè)計(jì)鼓勵(lì)遵循單一職責(zé)原則，每個(gè)組件只負(fù)責(zé)特定的邏輯或數(shù)據(jù)處理任務(wù)。這樣的設(shè)計(jì)使得代碼更加模塊化、可擴(kuò)展和可維護(hù)，減少了組件之間的耦合度。

• 更好的可測(cè)試性：由于無(wú)渲染組件獨(dú)立于 UI 進(jìn)行測(cè)試，可以更容易地編寫單元測(cè)試和集成測(cè)試。測(cè)試可以專注于組件的邏輯和數(shù)據(jù)轉(zhuǎn)換，而無(wú)需關(guān)注界面的渲染和交互細(xì)節(jié)，提高了測(cè)試的效率和可靠性。

• 提高開發(fā)效率：開發(fā)人員可以更加專注于業(yè)務(wù)邏輯和數(shù)據(jù)處理，而無(wú)需關(guān)心具體的 UI 渲染細(xì)節(jié)。這樣可以提高開發(fā)效率，減少重復(fù)的代碼編寫，同時(shí)也為團(tuán)隊(duì)協(xié)作提供了更好的可能性。

當(dāng)然除了這些問(wèn)題，我們也會(huì)更加關(guān)注前端未來(lái)的發(fā)展趨勢(shì)，例如微前端、低代碼等方向的內(nèi)容。這些場(chǎng)景也將在后續(xù)進(jìn)行不斷的完善優(yōu)化，讓 OpenTiny 有足夠的能力去能適應(yīng)現(xiàn)在和未來(lái)。與此同時(shí)我們也將與外部開發(fā)者一起將 OpenTiny 組件庫(kù)解決方案建設(shè)得更加完備，持續(xù)打造更加豐富的開源生態(tài)。讓更多的開發(fā)者受益~

其他說(shuō)明

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

• 跨端跨框架：?使用 Renderless 無(wú)渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強(qiáng)

• 組件豐富：PC 端有 80+組件，移動(dòng)端有 30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見(jiàn)組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP 地址輸入框、Calendar 日歷、Crop 圖片裁切等

• 配置式組件：?組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化

• 周邊生態(tài)齊全：?提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺(tái) TinyTheme

歡迎加入 OpenTiny 開源社區(qū)。添加微信小助手：opentiny-official 一起參與共建～

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

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

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

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

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