開源專案專題系列

（八）

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 SDKmagpie_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定位，敬請期待接下來的直播分享。

作者介紹

參考文獻

1. Expo（https://expo.io/）

2. Flutter（https://flutter.dev/docs）

想了解更多開源專案資訊？

與專案成員零距離交流？

掃碼加入專案群

一切應有盡有

END