開源｜Magpie：58 跨平臺技術應用及 Flutter 實踐概覽

2020-09-05 58技術

開源項目專題系列

（八）

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

相關焦點

  • 開源｜Magpie：平臺工具鏈開發實踐
    開源項目專題系列（八）1.開源項目名稱：magpie2.針對Flutter的技術優勢，大家可以從官方介紹得到解答。他所具備的性能體驗，研發效率，多端一致性以及開源可控等特性，都吸引著廣大開發者。但是，Flutter並不是萬金油；就目前來說，每個團隊是否採用該技術棧，影響因子很多，我們需要結合自身的業務和訴求加以考慮。
  • 58技術沙龍｜第五期：Flutter在58的應用實踐系列話題
    58技術沙龍第五期——Flutter在58的應用實踐系列話題4月12、19、26日，58同城舉辦Flutter在58的應用實踐系列話題技術沙龍，共6位來自58同城的嘉賓參加，通過6個話題，為大家詳解Flutter
  • Flutter篇:跨平臺技術詳解篇
    相對於混合應用，由於React Native是原生控制項渲染，所以性能會比混合應用中H5好很多，同時React Native是Web開發技術棧，也只需維護一份代碼，同樣是跨平臺框架。2.React Native和Weex的渲染/排版引擎是集成到框架中的，每一個APP都需要打包一份，安裝包體積較大；而快應用渲染/排版引擎是集成到ROM中的，應用中無需打包，安裝包體積小，正因如此，快應用才能在保證性能的同時做到快速分發。3.QT Moblie與Flutter跨平臺技術：自繪UI+原生。
  • 火起來的 Flutter 開源項目大放送
    通過最近各個平臺更新的文章標題來看，就能發現 Flutter 非常火，抱著簡單瞧一瞧的心態，搭建了一下環境，準備看些已經開源的完整項目。肯定有同學要問我 Flutter 與其他跨平臺方案的對比，這裡引用下一位各種跨平臺方案都熟悉的作者的文章：移動端跨平臺開發的深度解析本文簡單跟大家聊聊入門級的知識，忙的同學收藏下就行了，也不是一定要立刻投入學習。
  • 從新手到Flutter架構師，一篇就夠！最全開源項目
    在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。作為目前最流行的跨平臺技術框架，Flutter受到被越來越多的開發者和組織追捧，截止2019年11月，Flutter已獲得超過80K的關注和10k的fork量。所以，把Flutter說成是2019年最火熱的前端技術也不過分。
  • 阿里淘系優質開源項目推薦（下）
    多年來，阿里巴巴淘系技術一直積極擁抱開源事業，無論是開源軟體的應用、回饋以至自研技術的開源都非常活躍，近兩年我們更是開源了MNN、飛冰ICE、3D-FUTURE & 3D-FRONT 等項目,在開源社區中，也獲得了廣泛開發者的支持和使用。還記得《阿里淘系優質開源項目推薦（上）》文末的問題嗎？你知道淘系還有哪些開源項目？
  • 阿里開源項目上新,Flutter Go 請查收!
    前言新年伊始，阿里開源項目上新了！此次是阿里拍賣前端團隊帶來的FluttrGo，針對於時下很火的跨平臺移動解決方案推出的實例APP項目，對於Flutter初學者，學習掌握此項目是極其有益的。Flutter 是什麼2018年6月21日Google發布Flutter首個release預覽版，作為Google 大力推出的一種全新的響應式，跨平臺，高性能的移動開發框架。Flutter是一個跨平臺的移動UI框架，旨在幫助開發者使用一套代碼開發高性能、高保真的Android和iOS應用。
  • Flutter 到底香不香？看完這幾個開源項目再做決定
    雖然 Flutter 的確仍舊存在一些問題，但依然是不少開發者們在跨平臺開發時的第一選擇。今天 Gitee 為開發者們推薦的就是幾款優秀的 Flutter 開源項目，希望不論是接觸 Flutter 的新人，還是使用了很久的老炮，都會有所收穫。
  • Flutter混合開發探索與實踐
    所以在Native App中嵌入Flutter功能的混合開發模式是應用Flutter技術的穩健型改造方式。公寓PMS是一款給公寓管家提供房源管理的APP，前期功能已使用Native開發上線。跳轉框架我們用的是58JumpCenterLib，[h1]跳轉協議如下所示：wbapartment://jump/house/flutter?
  • 1-Flutter簡介與環境搭建
    歡迎關注轉發點讚評論 1 Flutter簡介 Flutter 是Google 推出的開源跨端移動應用解決方案技術，跨平臺，高性能，高保真，豐富組件是它獨有優勢，大公司出品能讓其持續發展，開源社區活躍有問題能得到解決， 開發者用Dart語言就可創作移動應用。
  • 「Flutter應用」Flutter精仿抖音開源
    flutter_TiktokFlutter精仿抖音開源了，左滑搜索，右滑個人中心，上下滑動刷視頻，雙擊點讚冒愛心，無敵精仿，感謝點Star。應用截圖左右滑動去搜索與個人中心雙擊冒愛心點讚看評論切換底部Tabbar項目結構依賴： Bilibili開源的視頻播放組件
  • 跨平臺Flutter接入WebView,Android和IOS兩大平臺解決方案建收藏
    本頭條核心宗旨歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。
  • Flutter Go
    2018年6月21日Google發布Flutter首個release預覽版,作為Google 大力推出的一種全新的響應式，跨平臺，高性能的移動開發框架。Flutter是一個跨平臺的移動UI框架，旨在幫助開發者使用一套代碼開發高性能、高保真的Android和iOS應用。
  • 移動網際網路這十年,跨平臺技術的演進及 Flutter 的未來
    性能體驗：一般地，跨端技術方案擁有以上多重優勢，但在性能方面比原生流暢更差些。犧牲部分體驗換來效率提升，這一點也是情理之中，試想一下，跨平臺技術方案同時兼得這4點，那麼原生技術恐怕已退出歷史舞臺，早已是跨平臺技術的天下，所以往往跨平臺技術的性能優劣便成為核心指標。4.
  • Flutter Go首頁、文檔和下載 - Flutter 學習 App - OSCHINA
    2018年6月21日Google發布Flutter首個release預覽版,作為Google 大力推出的一種全新的響應式，跨平臺，高性能的移動開發框架。Flutter是一個跨平臺的移動UI框架，旨在幫助開發者使用一套代碼開發高性能、高保真的Android和iOS應用。
  • 實時音視頻技術專場活動回顧(一):Flutter實時音視頻應用場景實踐
    11月7日，即構和上海GDG技術社區聯合舉辦了實時音視頻雲上技術分享專場，來自即構科技和Bilibili的資深技術專家進行了深度分享。大會吸引了眾多開發人員交流、觀看，並在活動過程中與分享嘉賓進行了熱烈互動。下面我們將整理嘉賓們分享的核心內容，錯過活動直播的小夥伴可以繼續觀看學習。
  • 字節跳動技術整理：一文秒懂Flutter 跨平臺演進及架構
    跨平臺技術演進跨平臺技術，一直以來是每一個有追求的開發者所追逐的夢想，同時也是守舊者的噩夢，跨平臺的多端一體化方案勢必顛覆現有的原生各端獨立開發模式，接下來列舉眾多的跨平臺技術中最為關鍵的幾個技術方案的演進階段。
  • 一套代碼 iOS、Android 兩端運行,Google Flutter 對開發者意味著...
    Flutter 旨在幫助開發者創建擁有美觀 UI 界面、高性能、高穩定、高幀率、低延遲的跨平臺（Android 和 iOS）移動應用。Flutter 的界面設計與 Web 應用類似，所以開發者很容易在 Flutter 上找到類似 HTML/CSS 編碼的感覺。和 React Native 相比，雖然使用的語言不同，但 Flutter 也提供響應式的視圖。
  • 開源 | Umajs：輕量級 Node.js Web 框架
    3.簡介：Umajs 是58同城推出的一款輕量級 node web 框架。這裡主要和大家分享一下 Umajs 在搭建過程中的設計及其應用的介紹。技術小秘書」微信 : jishu-58添加小秘書微信後由小秘書拉您進項目交流群作者簡介：王亮，58同城 本地服務技術部 前端工程師團隊簡介：
  • flutter入門簡介
    Flutter目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程式，並且兼容滾動行為、排版、圖標等方面的差異。flutter的開發語言是Dart，如果您使用過Java或JavaScript之類的語言，則能夠很快上手，甚至有一些Flutter應用是沒有編程經驗的人寫的！在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。