開源項目專題系列
（八）
1.開源項目名稱：magpie，magpie_sdk，magpie_fly，magpie_log
2.github地址：
https://github.com/wuba/magpie
https://github.com/wuba/magpie_sdk
https://github.com/wuba/magpie_fly
https://github.com/wuba/magpie_log
3.簡介：58跨平臺技術應用實踐， 現有Hybrid、ReactNative、小程序跨平臺框架的性能問題。介紹58對Flutter混合工程的工程化思考，及Magpie一體化解決方案平臺概覽，於2020年4月份開源。
58跨平臺技術應用
由各種不同需求要求，及每種跨平臺技術限制，現在的項目裡混合了多種跨平臺框架，不同的需求要求，需求階段採用不同的跨平臺技術。
1. Hybrid
web+native的混合開發，頁面展示核心邏輯由於webview渲染，交互功能及擴展功能由Native擴展實現，通過JSBridge做雙向通信。從技術實現上看，具有如下的缺陷：
- webview的碎片化，適配成本高：Android 4.4之前是webkit內核，4.4之後是chromium內核，第三方的X5內核；iOS 8.0之前是UIWebview，8.0之後是WKWebview；
- Javascript的解釋運行，性能差：渲染及邏輯都由JS負責，加上JS的解釋執行，交互效果比較差；
- JSBridge通信成本高：數據量傳輸限制，通信頻繁且異步通信；
2. WubaRN
分離渲染與邏輯，JS負責邏輯，Native渲染UI，通過Bridge異步通信，包含三個線程：UI Thread，Shadow Thread，Javascript Thread。從技術實現上看，具有如下的缺陷：
- Javascript的解釋運行：業務邏輯及MVVM的diff操作都由JS負責，同時JS解釋運行，導致Javascript Thread的掉幀嚴重；
- 過度依賴Bridge且異步通信：當列表快速滑動且有大量業務通信時，容易出現白屏，優化成本很高；
- 依賴OEM Widgets導致適配成本高：需要分別適配不同平臺。
3. 小程序
分離渲染層與邏輯層，渲染層由MVVM框架實現，邏輯層由App(), Page()實現，通過Native通信，異步請求由Native實現，提升性能及對JS的管控性，但也有其本身的缺陷：
- Javascript的解釋運行
- 過度依賴Native通信
- 無法複用現有的OEM Widgets
在跨平臺框架的底層，有統一的基礎能力庫，通過封裝，統一底層能力及相應的通信協議。其他上層，通過轉譯框架，實現一套代碼，多次編譯，如wwto框架。
Flutter
Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web, and desktop from a single codebase.
Flutter的靈感來自於React，並從底層實現解決了ReactNative的問題，通過官方文檔可得知如下典型特點：
1. 高性能
- Debug採用JIT編譯為字節碼，實現Hot reload；Release採用AOT編譯為機器碼，實現靜態編譯運行，大大提升運行效率；
- 不依賴OEM Widgets，直接通過Skia渲染，減少平臺適配工作；
- 不依賴Bridge，直接通過Skia渲染，大大減少Bridge通信成本。
2. 開發效率
- 聲明式佈局，一切都是Widget，同樣的業務，代碼比Java要少將近一半的代碼
- 不依賴OEM Widgest，基於Skia，統一UI，減少平臺適配工作；
- Debug的JIT編譯，熱加載（hot reload）；
- 全棧（iOS，Android，腳手架，Web，Desktop），減少不同語言的學習成本。
Flutter工程化上的問題
工程化即系統化、模塊化、規範化的一個過程。目的在於提升軟件開發效率，降低工程實施難度。
混合的方式引入Flutter，需要實現混合開發的工程化流程，實現持續交付能力，涉及如下幾個方面：
1. 開發階段
- 混合開發框架：不同角色的代碼及編譯解藕，add to app的Dart視角的編譯會藕合Native代碼，只有Widgets的變更時，Hod Reload才會生效，而Cold Reload的編譯時間過長；
- 模塊化 & 組件化：由於商業應用的業務很複雜，需要模塊化能力，實現分業務線的並行開發；由於功能的複雜及類似，需要組件化來實現Widgets的複用，提升效率；
- 編譯：在不同角色的解藕的基礎上，實現快速方便的整體編譯。
2. 測試階段
質量與性能測試是持續交付裡最重要的環節，與其他技術類似，主要包括靜態代碼掃描，單元測試，性能監控及基於Redux的Bug回放。
3. 開發部署
主要是指Debug下的JIT編譯及AOT編譯，能快速便捷的發佈JIT及AOT產物，自動依賴到混合工程裡。
4. 發佈部署
通過AOT編譯為機器碼，大大提升了運行效率，但也大幅提升了包大小，尤其是對於推廣及內置渠道，對於發佈的AOT編譯比開發階段的更加的嚴格，更進一步的手段就是業務的動態更新功能。
Magpie開源項目
實現Flutter混合工程的工程化，實現一站式研發解決方案，其基礎是實現一個管理平臺，類似Expo裡的Managed Workflow，實現創建、開發、編譯、打包、部署的全流程的持續交付，同時具備靈活的擴展能力，這個平臺我們稱為Magpie。
Mapgie涉及四個開源庫：
- magpie：類似Expo的Managed Workflow的可視化管理流程，整合每個階段的工具，使用Dart全棧實現
- magpie_sdk：與 magpie 可視化管理流程配套的 Native SDK
- magpie_fly：Widgets管理App及組件庫
- magpie_log：可視化圈選埋點框架
Flutter工程化的關鍵是實現Dart視角的創建、開發、編譯、發佈流程自動化及可視化。同時可以不斷擴展新工具，不斷擴大自動化的範圍，不斷提升開發效率。magpie_workflow開源項目就是為了這個目標而打造的可視化管理平臺，現已經包含了開發階段及開發部署過程中的大部分工具及能力。後續會不斷增加新的功能。
另一個影響開發效率的是組件庫，如果能實現文檔及效果的快速預覽，全業務同學能快速便捷的貢獻新的組件，可以大幅提升開發效率，magpie_fly開源項目基於這個目標，參考Material-UI的效果，實現快速預覽及貢獻。
大部分的產品決策都是由數據驅動，數據驅動的關鍵是埋點，Native經過不斷的發展，從最初的手動埋點，到現在主流的可視化圈選埋點、無痕埋點等自動埋點方案。由於Flutter是基於MVVM的響應式UI框架，分為Widgets、Elements、RenderObject三層，基於屬性做Widgets編程，無法直接複用Native的xpath思想來實現圈選埋點。magpie_log可視化圈選項目如何實現類似xpath的唯一控件ID定位，敬請期待接下來的直播分享。
展望
Magpie平臺是一個不斷髮展，不斷完善的平臺，現在主要完成基本可視化管理流程，對應階段的能力還需要不斷的增加和完善，希望能通過開源社區的力量，一起完善Magpie平臺。
劉陽 / 58同城 Android 負責人，高級架構師，58技術委員會 無線通道 分會主席，2011年加入58同城。目前主要負責同城、同鎮、趕集、英才Android App的研發管理工作。
參考文獻
1. Expo（https://expo.io/）
2. Flutter（https://flutter.dev/docs）
與項目成員零距離交流？
掃碼加入項目群
一切應有盡有
如群已滿，可添加“58技術小秘書”微信 : jishu-58
添加小秘書微信後由小秘書拉您進項目交流群
END
閱讀更多 58技術 的文章
