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