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