02、孫浩2023 DevOps武漢峰會 - 跨框架組件開發探秘 -.pdf

1、中國DevOps社區峰會 2022 武漢峰會 2022 武漢 孫浩 禪道基礎平臺部架構師中國DevOps社區峰會 武漢從造輪子說起中國DevOps社區峰會 武漢程序員為什么喜歡造輪子顯而易見，輪子是個好東西！“歷史的車輪”滾滾向前，“程序員的輪子”一個又一個！中國DevOps社區峰會 武漢程序員為什么喜歡造輪子為什么程序員喜歡木工？兩者目標都是在親手創造一個對目標用戶有用的東西；兩者都需要用到大量的工具 兩者都受有外界限制 兩者都可能需要等待https:/www.zainrizvi.io/blog/why-software-engineers-like-woodworking/中國DevOps

2、社區峰會 武漢程序員為什么喜歡造輪子造輪子的動力 現有的“輪子”不兼容當前環境，或者兼容成本高，也不好維護 現有的“輪子”功能缺失，無法滿足更多的需求，包括效率、功能或外觀（不好看）就是“想造”，“造輪子”是一種很務實學習途徑中國DevOps社區峰會 武漢組件化與造輪子前端組件開發天生具有造輪子屬性，組件作為一個需要重復使用的模塊，通常希望：1.使用靈活，包含多種功能選項和便利方法2.一致的外觀和交互體驗3.兼容性好，適應多種瀏覽器環境中國DevOps社區峰會 武漢組件化與造輪子組件化輪子中國DevOps社區峰會 武漢組件化與造輪子基礎開發框架UI 組件庫中國DevOps社區峰會 武漢組件化與

3、造輪子?UI 框架被限制在基礎開發框架下只依賴原生 JS 的框架幾乎沒有中國DevOps社區峰會 武漢跨框架組件開發中國DevOps社區峰會 武漢什么是跨框架組件？跨框架組件Cross Framework Component一種支持多種基礎開發框架的組件技術方案中國DevOps社區峰會 武漢為何需要跨框架組件多開發框架模式痛點：開發成本高，對于相同的需求需要針對不同的開發框架重新開發 無法統一交互體驗 更新技術棧和升級困難中國DevOps社區峰會 武漢為何需要跨框架組件好處：開發一次即可支持各種開發框架（包括單組件庫），大大提升開發效率 共享設計理念，使得開發的產品具備統一的交互體驗 升級、遷

4、移和更換技術方向成本低中國DevOps社區峰會 武漢常見方案 使用不同的開發框架重寫一遍 Web Components 對不同框架的組件進行轉換中國DevOps社區峰會 武漢Web ComponentsWeb Components 是現代瀏覽器提供了一系列 API 用于創建直接像原生元素一樣使用的組件，擁有如下優勢：原生支持，無依賴 使用方便，可以直接在 React、Vue.js 等開發框架中直接使用 組件隔離，避免 CSS 污染 高性能，直接使用瀏覽器提供的 API 中國DevOps社區峰會 武漢Web Components大約 18%由 Google 跟蹤的網站使用了 Web Compon

5、ents，這個數字在 2019 年還是 5%。中國DevOps社區峰會 武漢Web Components基于 Web Components 實現的組件庫 FAST-Microsoft Material Design-Google Fluent UI-Microsoft Github Elements-Github Spectrum-Adobe OMI-Tencent使用 Web Components 的網站 Twitter：嵌入式推文 YouTube：使用了 Polymer 3.0 框架 MS Office Online Github Electronic Arts中國DevOps社區峰會 武

6、漢Web Components困境 實現復雜，需要寫大量 DOM 操作代碼 一些場景存在缺陷 目前生態不成熟 兼容性不好（舊瀏覽器、漸進式增強）SEO 不友好中國DevOps社區峰會 武漢Web Components用來開發 Web Components 的開發框架 Stencil-357,795 Lit-282,068 Lightning Web Components-35,452 Solid-26,261 hybrids Slim.js上面的數據統計到 2022年6月24日。中國DevOps社區峰會 武漢Web ComponentsSencil、Lit 這些用來開發 Web Compone

7、nts 的開發框架能解決一些困境問題，但仍然無法解決所有問題。另外不要忘了，我們又得學習一種新的框架中國DevOps社區峰會 武漢轉化將基于一種開發框架開發的組件轉化為兼容其他開發框架的形式1.選擇基礎開發框架，React、Vue.js、或原生2.基于基礎開發框架實現組件3.對組件進行轉換實現跨框架調用中國DevOps社區峰會 武漢轉化優勢 使用熟悉的技術開發，節省成本 享受 React、Vue.js 這類框架的好處，狀態管理和雙向綁定 有良好的生態支持 轉化過程可以自動化完成中國DevOps社區峰會 武漢轉化限制 需要提前統一組件設計和開發規范，包括調用方式、屬性和事件 對外的 API 數據

8、類型不能依賴框架，只能使用原生等框架無關的數據類型 對于一些簡單的交互控件實現繁瑣中國DevOps社區峰會 武漢跨框架組件開發方案對比方案方案優點優點缺點缺點重寫重寫 兼容性好 開發成本極高 無法統一交互體驗 多技術棧維護升級困難WebWebComponentsComponents 原生支持，無依賴 使用方便，適應多種框架 組件隔離 高性能 實現復雜一些場景存在缺陷 目前生態不成熟 無法兼容較早的瀏覽器 SEO 不友好轉化轉化 開發成本低 支持狀態管理等實用特性 有良好的生態支持 轉化過程自動化 統一組件設計和開發規范 數據類型受限 簡單組件實現略顯繁瑣中國DevOps社區峰會 武漢跨框架組件

9、開發注意事項 注意組件隔離，避免使用全局變量以及樣式污染 特殊名稱、Headless UI 避免依賴全局狀態，考慮通過 CSS 變量實現主題 制定開發規范 設計規范 名稱、屬性、事件 選擇依賴的框架 體積 熟練程度中國DevOps社區峰會 武漢跨框架組件轉化方案實例通常在 UI 組件庫中，數據表格通常是屬于最復雜的那一類。通常有如下“奇葩”需求：支持自適應的布局，自動根據列中的內容調整列寬 支持對數據進行分頁、排序、過濾和搜索 支持無限嵌套的層級展示，并且可折疊 支持固定表頭、表尾，還有對列進行固定 支持虛擬渲染，在有大量數據的情況保證交互流程 支持對行進行可拖拽式排序 支持直接選擇、編輯、復

10、制、粘貼，“像 Excel 一樣”，還需要右鍵菜單和快捷鍵 以上功能不能沖突中國DevOps社區峰會 武漢跨框架組件轉化方案實例DTable 是我們在 ZUI 中開發的一個數據表格組件。包含有豐富的功能：響應式布局、自適應列寬、可定制的表頭、表尾和單元格、預設常見單元格樣式、表頭表尾固定、列左右固定、排序、分頁、搜索、過濾、行選中、單元格拖放選擇、單元格編輯、復制、粘貼、歷史記錄（撤銷和重做）、快捷鍵、虛擬渲染（支持大量數據）、無限層級嵌套且支持折疊、可配置的操作工具欄、右鍵菜單中國DevOps社區峰會 武漢在線示例：https:/catouse.github.io/dtable/項目源碼：h

11、ttps:/ 武漢跨框架組件轉化方案實例開發方案 使用 Preact.js 開發 采用基礎組件+插件機制實現，組件本身提供基本布局和插件機制接口，通過十幾款插件實現了復雜功能 原生支持 Preact 和 React，通過轉化使得組件支持 Vue.js、原生、jQuery、Web Components 等其他開發框架Dtable中國DevOps社區峰會 武漢跨框架組件轉化方案實例第一步：使用 preact 實現組件中國DevOps社區峰會 武漢跨框架組件轉化方案實例第二步：將組件轉化為原生組件中國DevOps社區峰會 武漢跨框架組件轉化方案實例第三步：將組件轉化為 jQuery 組件中國DevO

12、ps社區峰會 武漢跨框架組件轉化方案實例第四步：將組件轉化為 Web Component 組件第五步：將組件轉化為 Vue.js 組件第六步：中國DevOps社區峰會 武漢通過 DevOps 加速跨框架組件開發中國DevOps社區峰會 武漢DevOps 加速跨框架組件開發DevOps 在前端開發和協同中已被廣泛使用，下面以“轉化”方案為例來了解跨框架組件開發如何與 DevOps 流程結合：Plan 階段應該指定跨框架組件開發規范，根據規范來設計一系列新的組件 Code 階段使用約定的框架對組件進行開發 Build 階段通過腳本自動生成適合多個框架的組件產物 Test 階段對組件在多個基礎框架上

13、進行測試 Rlease 階段發布適合多個框架的并行版本 Deploy 階段自動生成跨框架的示例和文檔中國DevOps社區峰會 武漢跨框架開發自動化要實踐 DevOps，自動化是首要工作，在使用轉化方案開發跨框架組件過程中，以下工作已經實施自動化：持續集成和持續交付：開發過程中及時在多個開發框架環境中預覽組件，自動轉化適合多個開發框架的組件 自動化測試：使用工具對跨框架組件進行自動化測試，從而快速發現和修復代碼缺陷，提高代碼質量和穩定性，測試需要特別針對不同的框架運行環境 自動化部署：使用工具自動生成適合不同開發框架的示例和文檔，快速將組件庫部署到特定的環境，方便集成到各個產品中中國DevOps

14、社區峰會 武漢協同和反饋要讓 DevOps 發揮價值，協同和反饋是必不可缺的環節，可以在如下方面進行實踐：設計人員通過實時部署的在線示例和文檔審查組件開發是否符合規范，如有問題可以立即反饋給開發人員 產品開發團隊可以將組件開發流程繼承到應用開發流程中，實現組件開發與應用開發無縫集成中國DevOps社區峰會 武漢回歸造輪子中國DevOps社區峰會 武漢回歸造輪子跨框架組件開發是一種更好的造輪子方法。但目前來看使用此方案的公司并不多，開源社區也缺少類似的組件庫出現。結合“轉換”的方案，從已有方式進行遷移的成本并不高，希望更多的人來試試?？缈蚣苁悄芰?，但不是我們的目的，我們最終需要的是“無框架”組件。就像 Web Components 這樣面向未來技術方案一樣，組件就應該直接被使用，完全自治、環境隔離、不受框架和版本限制的，無需借助開發框架層。類似 React、Vue.js 這些開發框架，我相信他們要么擁抱跨框架，要么消失在歷史中因為所有鴻溝終將被跨越。中國DevOps社區峰會 2022 武漢中國DevOps社區峰會 武漢關注社區公眾號了解更多活動