一文看完阿里巴巴 AliFlutter 客戶端研發體系

簡介： Flutter 是開源的 UI 工具包，其可以幫助開發者經過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺。Flutter 組件採用現代響應式框架構建，中心思想是用組件 (widget) 構建 UI。淘寶終端技術部無線技術專家王康從 Flutter 的原理出發，介紹了 Flutter 的原理、業內現狀，以及阿里巴巴在 Flutter 上所作的深度實踐和探索。

一 Flutter 原理

Flutter 主要有四個特色：美觀、高效、高性能、開放。

• 美觀：Flutter 提供了豐富的 Widget，好比動畫、手勢等。Flutter 採用了組合式 API 模式，所以爲 UI 建立帶來了更強的靈活性。此外，Flutter 使用了遊戲引擎的方式來寫 APP，使得用戶能夠具備很強的靈活性，可以在像素級別進行控制。
• 高效：Flutter 相似於安卓小系統，使得其可以使用一套代碼運行在各類各樣的平臺之上。此外，在 Debug 模式下還支持熱重載，使其可以達到高效的研發效率。
• 高性能：在 Release 模式下，Flutter 是預先編譯成機器碼，執行期具備高性能。
• 開放：Flutter 是一個開源的項目，基本全部工做均可以在 GitHub 上看到。

以上四個特色的背後就是 Flutter 的原理。首先，Flutter 架構在 OS 之上，最底下是與平臺相關的 Embedder 層，其主要負責的工做是 Surface、Thread 以及 Event Loop。在 Embedder 層之上是 Engine，主要包括三部分，Dart Runtime；負責將 UI 繪製到 Surface 上的 Skia，負責文本繪製的 Text。在 Engine 之上就是你們所熟知的 Dart 的 Framework。基於上述這些，開發者便可開發應用。

阿里巴巴爲何選擇 Flutter

在阿里巴巴的電商場景下，每每會有一些很是重要的考量，好比用戶體驗的要求，對於研發效率的要求，以及如何消除多端之間的差別。在阿里經濟體裏面，應用所須要部署的目標設備是很是多元的，不只有常見的 iOS 和 Android，還有釘釘等桌面場景、天貓精靈等 IoT 場景以及各類線下大屏的場景。當前，流量增加紅利不斷減小，須要更多創新玩法爲消費者提供更好的用戶體驗，這就產生了富交互遊戲化的需求。Flutter 具備的高性能，高研發效率、跨端一致性，多端多平臺支持，以及豐富的表達力使其能夠解決這些痛點。

二 Flutter 業內現狀

在阿里巴巴內部，目前有十幾個 BU 的幾十個產品正在使用 Flutter，典型的包括淘寶、閒魚、UC 以及優酷等。在業內，騰訊的微信、Now 直播、翻譯君等，字節跳動的西瓜視頻、皮皮蝦，快手的快影，美團的美團騎手、美團外賣商家版、美團衆包以及百度的貼吧等也都應用了 Flutter。

Flutter 在業內的實踐現狀主要圍繞着體系化、深度、框架以及更多探索這些維度展開。在體系化方面，須要作一些基礎設施的建設，這是由於 Flutter 以及 Dart 的不少東西還不成熟。使用 Flutter 解決業務上線問題，須要考慮研發體系的構建。應用上線以後，須要監控各類指標。在深度方面，每每會關注引擎大小、包大小、內存優化以及啓動時間等。除了上述兩部分以外，業內也有不少框架相關的工做，好比混合棧框架、狀態管理、動態化 UI、AOP 框架以及生態插件等。此外還有原生 Flutter 之外的一些探索，好比小程序渲染和先後端一體化等實踐。

三 AliFlutter 建設與深度實踐

AliFlutter 業務實踐

下圖選取了阿里經濟體中一些應用了 Flutter 的典型場景。好比寶貝詳情是一個業務邏輯很是複雜的頁面，屬於圖文混排的頁面，而且具備大量圖片，有時還包括一個視頻播放器，在這個場景下就所有應用了 Flutter。有團隊使用 Flutter 框架用於遊戲業務的開發，好比下圖所示的是盒馬使用 Flutter 構建的一個遊戲頁面。此外，在 Alibaba 這一應用中，也大量使用 Flutter 用於構建主鏈路以及訂單頁面等。

之因此選擇 Flutter，有幾個典型緣由。首先，HotReoload 和跨端一致性使得研發很是高效；其次，可用於遊戲化的豐富 UI 表達力、動畫、圖文混排性能等訴求都能被 Flutter 很好地知足。

AliFlutter 業務研發模型

在業務場景的背後是 AliFlutter 的業務研發模型。其實，Flutter 自己主要解決兩個問題，邏輯和 UI。其自己沒有各類 Native 能力，須要爲其補齊如網絡、推送以及接入網關等，使其更加接近於業務開發容器，而不只僅是 UI 開發框架。再上面就是應用開發框架，好比狀態管理框架、遊戲化框架、動態化 UI 以及組件庫，在此之上就能夠構建一些業務了。除此以外還會涉及到一些研發協同方面的工做，好比打包構建、Linter、Pub 庫等。

AliFlutter 引擎研發模型

在 AliFlutter 之下，存在不少引擎修改的場景。舉例而言，在 iOS 13 如下可能存在一些後臺 GPU 渲染 Crash 的問題，在 Android 上存在特別機型 Flutter 啓動閃退的問題。此外，還須要考慮如何讓 Flutter 和目前已有生態進行融合，好比圖片庫、網絡庫等在阿里內部都有比較好的實踐。不管是 Bug 修復仍是 Native 能力提高，其實都是對於 Flutter 引擎所作的定製化工做。

上圖展現的就是在阿里內部對於 Flutter 引擎進行定製所作工做的邏輯，首先經過 Flutter 框架獲取對應的引擎代碼，拉取依賴，進行開發，到 Gitlab 作 CI，代碼審覈完成以後將產物構建出來上升到服務上面，最終經過簡單的方式來提供服務。

AliFlutter 基礎設施建設

自定義引擎服務

前面所提到的是自定義 Flutter 引擎的開發流程，而想要將開發完成的東西提供給其餘人使用，就須要以下圖所示的自定義引擎服務了。對於 Flutter 開發者而言，只需設置一個環境變量去服務上查詢是否有對應的產物便可，若是有的話，就作一些定製並返回給開發者；若是沒有則去官方上游拉取。固然了，對於 Flutter 的基礎設施而言，須要有一些多團隊的支持，好比 Namespace 等機制。最先的時候，阿里巴巴經過 Git 方式管理自定義引擎，可是 Git 對於二進制很不友好，因此就使用了高效自定義引擎服務來解決問題。

私有 Pub 服務

除此以外，AliFlutter 還實現了私有 Pub 服務。最初的想法是將不一樣人開發的庫等工做歸類組織起來，建設更好的內部生態，實現更好的複用。Pub 自己就是 Flutter 所提供的開源框架，可是其深度綁定了谷歌雲服務，因此在作這部分的時候須要將對於谷歌雲的依賴變成對於阿里內部的依賴。主要工做分爲兩部分，一部分是對於包的簡單管理和存儲，這部分能夠經過阿里雲存儲 OSS 實現；還有一部分是監控包的下載量以及健康程度等，這部分還部署了 Meta 數據庫服務，在將包上傳的時候將數據同步過去，以及面向使用者的前端服務。

持續構建

這部分的主要工做就是如何將所寫的 Flutter 代碼提供給沒有 Flutter 環境專門用於打包平臺。Flutter 工程能夠經過一些腳本構建出一個 Pod 或者 Gradle，進而集成起來變成一個 APP。

AliFlutter 深度實踐

圖片庫優化

在阿里巴巴內部，除了對於 Flutter 作的一些體系化實踐，還有很多深度化實踐。好比對於圖片庫的優化，對於 Flutter 而言，自己的圖片庫存在一些問題，好比內存佔用高，不釋放問題、CPU 佔用問題。爲了儘量遵循 Flutter 原生的圖片庫邏輯，作了圖片庫的優化。主要工做包括對於 Flutter 框架的總體修改，可以較好地實現一致性，與官方體系無縫融合，對接內部圖片庫，其在性能以及易用性上面也具備較好的表現。

引擎大小優化

咱們在 Flutter 引擎大小優化方面也作了很多工做，簡單介紹對於庫的裁剪。以下所示的兩張火焰圖，其較好地表達了 Flutter 引擎所依賴的各個庫裁剪先後的比例對比。裁剪後的內容既保證了功能的完備性，也顯著下降了引擎大小。

大圖片內存 GC 優化

除了前面所提到的相似於音頻圖片釋放等內容以外，阿里在實踐的過程當中發現 Flutter 在大圖片內存 GC 方面存在一些問題，好比在用戶退出的時候內存沒法獲得很好釋放。對於社區中使用 Flutter 的同窗而言，面對這樣的問題建議你們在 Profile 模型下看下點擊了 GC 按鈕是否可以將內存下降下來。基於此邏輯咱們提供了一套供上層業務使用的 GC API。從 FlutterEngine 開始依次調用 Shell、Engine、RuntimeController 以及 Dart 的 NotifyGC。

Flutter Canvas 實踐

Flutter 包含了 Skia，可提供 Canvas 能力。以前的邏輯是經過 Dart 調用 Engine，再調到 Skia，而咱們經過實踐中對其部分 API 的暴露，將 Skia 的 Canvas 能力加以透出。在 JS 部分有一些 2D 和 3D 的 API，能夠將這些暴露成爲 Canvas API，總體而言，相比於 Web 的 Pipeline 表現很是不錯，這一功能目前已經在部分業務開始灰度測試，數據表現也很是不錯。

AOP 框架（AspectD）

Flutter 的 AOP 框架的核心基於 dill 變換，dill 自己是從 Dart 代碼到最終代碼之間的中間語言表達。其原理簡要來講是當咱們寫了一個 hello_fultter 的時候，再寫一個 AOP 包，AOP 的包會包裹 hello_fultter 包，使得在 AOP 包的產物 (dill) 裏面 hello_flutter 和 AOP 的邏輯都存在，即其包括兩部份內容，hello_flutter 自己代碼的 dill 表達，以及 AOP 框架中寫的註解的 dill 表達，將這二者都包含在 app.dill 裏面，基於此咱們能夠經過 dill transform 方式來作變換。這裏比較複雜，須要考慮 AST 抽象語法樹的各類邏輯。須要將註解提取出來並基於這些註解進行操做，並最終寫入到 dill 裏面去，這些操做處理完成以後，就變成了 aop_aspectd.dill，替換掉以前的 app.dill 便可。

四 AliFlutter 研發模式探索

AliFlutter 研發模式

下圖中最重要的就是研發模式和跨平臺運行時，目標是提供一種多端多平臺的能力。在平臺底層是基礎庫、網絡庫的基礎能力，此外還須要在垂直能力上的擴展，支持各類垂直的基礎能力。基礎設施之上是 Flutter 的跨平臺運行時，運行時基於 Flutter Engine，提供了具備豐富表達力的圖形接口、跨平臺、能力拓展、性能以及穩定性等。在此之上，Flutter Framework 提供了能夠複用的基礎能力，好比核心佈局渲染、彈性擴展能力、組件能力以及定製性等。除此以外，也有一些研發支撐上面的工做，好比編譯打包、調試、灰度發佈、線上監控、運維能力以及數據化等。

AliFlutter 研發模式展望

在 Flutter 的將來發展方向，阿里巴巴主要的工做將集中於如下四點：

• 跨端能力：咱們考慮對於上層的各類平臺提供標準基礎能力並 API 化，從而更好在多端多平臺進行部署。此外，還但願經過 Flutter 的容器化，使得研發和業務方可以更多地專一在自身業務上面去。
• 交互能力：咱們考慮利用 Flutter 豐富的表達能力在遊戲化方向進行更好的擴展，以遊戲引擎的方式來開發 APP。基於泛化的交互能力以及更多的可玩性和創新性可以爲業務帶來更多可能。
• 研發效率：咱們考慮實現工程解耦和雲端一體化，目標是業務方只需關注所寫的包，經過很簡潔的方式集成進來並看到效果，從而提供相似於前端的開發體驗。此外經過雲端一體從面向端側負責轉變到面向業務總體負責。
• 交付效率：這部分主要包含兩部分，一部分是動態化 UI，另一部分是 Web On Flutter，指望經過提供更加靈活的動態性，以及前端技術棧下的動態化能力。

總結

在本文中，首先，爲你們分享了 Flutter 的原理，介紹了 Flutter 美觀、高效、高性能、開放的特色，以及阿里巴巴爲何選擇 Flutter。其次，爲你們分享了 Flutter 的業內現狀，有大量投入的主流廠商，以及體系化、深度、框架和更多的探索。再次，爲你們介紹了 AliFlutter 的建設與實踐，包括了業務、研發模型、引擎研發等方面的實踐。最後，展望了對於 AliFlutter 研發模式的考量和將來發展方向。