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