從0到1實(shí)現(xiàn) OpenTiny 組件庫(kù)跨框架技術(shù)（openui5 框架）
本文分享自華為云社區(qū)《從0到1實(shí)現(xiàn) OpenTiny 組件庫(kù)跨框架技術(shù)-云社區(qū)-華為云》，作者：華為云社區(qū)精選 。
在華為云《DTSE Tech Talk》技術(shù)直播第44期《0基礎(chǔ)玩轉(zhuǎn) OpenTiny 跨框架組件庫(kù)，實(shí)現(xiàn)一站式前端進(jìn)階》中，華為云前端開(kāi)發(fā) DTSE 技術(shù)布道師莫春輝老師在本期直播中與開(kāi)發(fā)者一起交流了OpenTiny組件庫(kù)解決方案的核心優(yōu)勢(shì)和設(shè)計(jì)理念，并通過(guò)具體的實(shí)操給大家演示OpenTiny如何從0到1實(shí)現(xiàn)組件庫(kù)跨框架技術(shù)。
從0到1帶你開(kāi)發(fā)一個(gè)跨框架的UI組件
實(shí)現(xiàn)組件庫(kù)跨框架技術(shù)是一種提高 Web 頁(yè)面開(kāi)發(fā)效率和應(yīng)用靈活性非常重要的方法。隨著前端技術(shù)的快速發(fā)展，組件庫(kù)和框架的種類(lèi)也日益繁多，因此，實(shí)現(xiàn)組件庫(kù)跨框架技術(shù)對(duì)于解決開(kāi)發(fā)痛點(diǎn)、降低開(kāi)發(fā)成本具有重要意義。
本次實(shí)操的目標(biāo)是搭建一個(gè)跨 Vue、React、Solid 框架的按鈕演示 demo，展示如何實(shí)現(xiàn)組件庫(kù)跨框架技術(shù)的應(yīng)用。通過(guò)本期的演練，希望能夠?yàn)殚_(kāi)發(fā)者提供一個(gè)清晰、具體的實(shí)現(xiàn)過(guò)程，幫助大家更好地理解這一技術(shù)的實(shí)際應(yīng)用。
具體源碼可參考：https://github.com/opentiny/dtt-cfc
本次實(shí)操流程主要是分為四個(gè)部分：
1、初始化工程
a) 使用pnpm管理項(xiàng)目，并配置pnpm-workspace.yaml
b) 配置項(xiàng)目eslint、prettier和git環(huán)境
2、創(chuàng)建 vue 應(yīng)用并添加 @opentiny/vue-button 組件相關(guān)邏輯：
a) 初始化 Vue應(yīng)用
b) 開(kāi)發(fā) Vue 組件的適配層和vue-button組件
c) 開(kāi)發(fā)適配無(wú)渲染層renderless的js文件
3、創(chuàng)建 react 應(yīng)用并添加 @opentiny/react-button 組件相關(guān)邏輯：
a) 初始化 React 應(yīng)用
b) 開(kāi)發(fā) React 組件的適配層和react-button組件
c) 開(kāi)發(fā)適配無(wú)渲染層renderless的js文件
4、創(chuàng)建 Solid 應(yīng)用并添加 @opentiny/solid-button 組件相關(guān)邏輯：
a) 初始化 Solid 應(yīng)用
b) 開(kāi)發(fā) Solid 組件的適配層和solid-button組件
c) 開(kāi)發(fā)適配無(wú)渲染層renderless的js文件
TinyVue組件庫(kù)當(dāng)前已實(shí)現(xiàn)跨端、跨框架、跨版本
得益于 Renderless 無(wú)渲染的設(shè)計(jì)架構(gòu)，OpenTiny 項(xiàng)目的 TinyVue 作為一個(gè) Vue 組件庫(kù)，不僅實(shí)現(xiàn)了組件庫(kù)跨框架，同時(shí)也實(shí)現(xiàn)了一套代碼不僅同時(shí)支持 Vue 2 / Vue 3，還同時(shí)支持PC和移動(dòng)端，更適應(yīng)多主題規(guī)范。在實(shí)際應(yīng)用中，開(kāi)發(fā)者是可以開(kāi)發(fā)出跨終端（PC端、移動(dòng)端、手表端）、跨框架（Vue2、Vue3、React、Solid）、跨主題（字體、顏色、圓角、圖標(biāo)…)、跨設(shè)計(jì)規(guī)范（圖標(biāo)、交互、默認(rèn)配置…)的項(xiàng)目。
下圖是 OpenTiny 跨端、跨框架、跨版本、跨設(shè)計(jì)規(guī)范示例啟動(dòng)后的演示效果（具體源碼可以參考：https://github.com/opentiny/cross-framework-component）：
那為什么 OpenTiny 要實(shí)現(xiàn)組件庫(kù)跨端、跨框架、跨版本呢？
目前業(yè)界組件庫(kù)，一般按前端框架React、Angular、Vue的不同來(lái)分類(lèi)。要么按面向的終端，如PC組件庫(kù)、Mobile組件庫(kù)、小程序組件庫(kù)等。由于 Vue 2和 Vue 3版本不能兼容，因此 Vue 2的組件庫(kù)跟 Vue 3的組件庫(kù)代碼是不同的，即同一個(gè)技術(shù)棧也有不同版本的組件庫(kù)。當(dāng)前現(xiàn)狀對(duì)于開(kāi)發(fā)組件庫(kù)和使用組件庫(kù)都無(wú)疑是一種負(fù)擔(dān)。
而且Vue 2 / Vue 3 兩套組件庫(kù)對(duì)應(yīng)兩套不同的代碼，難免存在組件功能和 API 不同步的情況，開(kāi)發(fā)者如果要從 Vue 2 組件庫(kù)遷移到 Vue 3 組件庫(kù)，將面臨一定的成本和風(fēng)險(xiǎn)。
當(dāng)前組件庫(kù)分類(lèi)如下所示：
面對(duì)相當(dāng)業(yè)界的痛點(diǎn)，TinyVue 采用組件與框架分離的設(shè)計(jì)理念（Renderless 架構(gòu)），通過(guò)讓 Web 組件支持跨端跨技術(shù)?？?UX 規(guī)范的特性，使得開(kāi)發(fā)人員只需開(kāi)發(fā)和維護(hù)一套組件庫(kù)代碼，就能推出不同終端不同技術(shù)棧的版本，減少開(kāi)發(fā)和維護(hù)的成本。同時(shí)用戶(hù)在使用這套組件庫(kù)時(shí)，雖然在使用不同終端不同技術(shù)棧的版本，但由于底層基于一套代碼，其 API 接口基本相同，從而降低用戶(hù)學(xué)習(xí)使用以及遷移升級(jí)的成本。
當(dāng)然，這套設(shè)計(jì)架構(gòu)需要同時(shí)結(jié)合面向業(yè)務(wù)邏輯的開(kāi)發(fā)范式與無(wú)渲染組件的設(shè)計(jì)模式。因?yàn)閱渭兪褂妹嫦驑I(yè)務(wù)邏輯的開(kāi)發(fā)范式，僅僅只能讓相同的業(yè)務(wù)邏輯從原本散落到生命周期各個(gè)階段的部分匯聚到一起。而無(wú)渲染組件的設(shè)計(jì)模式的實(shí)現(xiàn)方式有很多種，比如React中可以使用HOC高階函數(shù)，Vue中可以使用 scopedSlot 作用域插槽，但當(dāng)組件業(yè)務(wù)邏輯日趨復(fù)雜時(shí)，高階函數(shù)和作用域插槽讓代碼變得難以理解和維護(hù)。因此只有將兩者結(jié)合在一起，才有實(shí)現(xiàn) Web 組件支持跨端、跨框架的可能性。
TinyVue 通過(guò)完成設(shè)備適配、分辨率適配、交互適配等問(wèn)題，最終達(dá)到在不同的框架和不同終端中使用的效果。不僅如此，針對(duì) Vue 2 和 Vue 3 ，TinyVue 還推出了相應(yīng)的版本適配器，抹平 Vue 2 和 Vue 3 的差異，實(shí)現(xiàn)一套代碼同時(shí)支持 Vue 2 和 Vue 3兩個(gè)版本。這樣不管是 Vue 2 項(xiàng)目還是 Vue 3 項(xiàng)目，使用組件的方式都是一樣的，可以實(shí)現(xiàn)無(wú)縫切換，極大地降低了 Vue 2 遷移到 Vue 3 的成本和風(fēng)險(xiǎn)。
總結(jié)：
OpenTiny 是一套企業(yè)級(jí) Web 前端開(kāi)發(fā)解決方案，提供跨端、跨框架的UI組件庫(kù)，適配 PC 端 / 移動(dòng)端等多端，支持 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有靈活擴(kuò)展的低代碼引擎，包含主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等豐富的效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。
當(dāng)然 OpenTiny 作為華為云解決方案中的重要組成部分，使能開(kāi)發(fā)者構(gòu)建云原生應(yīng)用，也將助力開(kāi)發(fā)者提高應(yīng)用的性能和可靠性，促進(jìn)應(yīng)用的創(chuàng)新和發(fā)展。
未來(lái)，隨著技術(shù)的不斷發(fā)展和應(yīng)用，OpenTiny 也將持續(xù)為開(kāi)發(fā)者帶來(lái)更加便利和高效的體驗(yàn)。
關(guān)注#華為云開(kāi)發(fā)者聯(lián)盟# 點(diǎn)擊下方，第一時(shí)間了解華為云新鮮技術(shù)~
