一 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 研發模式的考量和未來發展方向。