Flutter 是開源的 UI 工具包，其能夠幫助開發(fā)者通過(guò)一套代碼庫(kù)高效構(gòu)建多平臺(tái)精美應(yīng)用，支持移動(dòng)、Web、桌面和嵌入式平臺(tái)。Flutter 組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，中心思想是用組件 (widget) 構(gòu)建 UI。淘寶終端技術(shù)部無(wú)線技術(shù)專家王康從 Flutter 的原理出發(fā)，介紹了 Flutter 的原理、業(yè)內(nèi)現(xiàn)狀，以及阿里巴巴在 Flutter 上所做的深度實(shí)踐和探索。

一 Flutter 原理

Flutter 主要有四個(gè)特點(diǎn)：美觀、高效、高性能、開放。

• 美觀：Flutter 提供了豐富的 Widget，比如動(dòng)畫、手勢(shì)等。Flutter 采用了組合式 API 模式，因此為 UI 創(chuàng)建帶來(lái)了更強(qiáng)的靈活性。此外，F(xiàn)lutter 使用了游戲引擎的方式來(lái)寫 APP，使得用戶可以具有很強(qiáng)的靈活性，能夠在像素級(jí)別進(jìn)行控制。
• 高效：Flutter 類似于安卓小系統(tǒng)，使得其能夠使用一套代碼運(yùn)行在各種各樣的平臺(tái)之上。此外，在 Debug 模式下還支持熱重載，使其能夠達(dá)到高效的研發(fā)效率。
• 高性能：在 Release 模式下，F(xiàn)lutter 是預(yù)先編譯成機(jī)器碼，執(zhí)行期具有高性能。
• 開放：Flutter 是一個(gè)開源的項(xiàng)目，基本所有工作都可以在 GitHub 上看到。

??

以上四個(gè)特點(diǎn)的背后就是 Flutter 的原理。首先，F(xiàn)lutter 架構(gòu)在 OS 之上，最底下是與平臺(tái)相關(guān)的 Embedder 層，其主要負(fù)責(zé)的工作是 Surface、Thread 以及 Event Loop。在 Embedder 層之上是 Engine，主要包括三部分，Dart Runtime;負(fù)責(zé)將 UI 繪制到 Surface 上的 Skia，負(fù)責(zé)文本繪制的 Text。在 Engine 之上就是大家所熟知的 Dart 的 Framework。基于上述這些，開發(fā)者即可開發(fā)應(yīng)用。

阿里巴巴為什么選擇 Flutter

在阿里巴巴的電商場(chǎng)景下，往往會(huì)有一些非常重要的考量，比如用戶體驗(yàn)的要求，對(duì)于研發(fā)效率的要求，以及如何消除多端之間的差異。在阿里經(jīng)濟(jì)體里面，應(yīng)用所需要部署的目標(biāo)設(shè)備是非常多元的，不僅有常見的 iOS 和 Android，還有釘釘?shù)茸烂鎴?chǎng)景、天貓精靈等 IoT 場(chǎng)景以及各種線下大屏的場(chǎng)景。當(dāng)前，流量增長(zhǎng)紅利不斷減少，需要更多創(chuàng)新玩法為消費(fèi)者提供更好的用戶體驗(yàn)，這就產(chǎn)生了富交互游戲化的需求。Flutter 具有的高性能，高研發(fā)效率、跨端一致性，多端多平臺(tái)支持，以及豐富的表達(dá)力使其可以解決這些痛點(diǎn)。

??

二 Flutter 業(yè)內(nèi)現(xiàn)狀

在阿里巴巴內(nèi)部，目前有十幾個(gè) BU 的幾十個(gè)產(chǎn)品正在使用 Flutter，典型的包括淘寶、閑魚、UC 以及優(yōu)酷等。在業(yè)內(nèi)，騰訊的微信、Now 直播、翻譯君等，字節(jié)跳動(dòng)的西瓜視頻、皮皮蝦，快手的快影，美團(tuán)的美團(tuán)騎手、美團(tuán)外賣商家版、美團(tuán)眾包以及百度的貼吧等也都應(yīng)用了 Flutter。

Flutter 在業(yè)內(nèi)的實(shí)踐現(xiàn)狀主要圍繞著體系化、深度、框架以及更多探索這些維度展開。在體系化方面，需要做一些基礎(chǔ)設(shè)施的建設(shè)，這是因?yàn)?Flutter 以及 Dart 的很多東西還不成熟。使用 Flutter 解決業(yè)務(wù)上線問(wèn)題，需要考慮研發(fā)體系的構(gòu)建。應(yīng)用上線之后，需要監(jiān)控各種指標(biāo)。在深度方面，往往會(huì)關(guān)注引擎大小、包大小、內(nèi)存優(yōu)化以及啟動(dòng)時(shí)間等。除了上述兩部分之外，業(yè)內(nèi)也有很多框架相關(guān)的工作，比如混合?？蚣?、狀態(tài)管理、動(dòng)態(tài)化 UI、AOP 框架以及生態(tài)插件等。此外還有原生 Flutter 以外的一些探索，比如小程序渲染和前后端一體化等實(shí)踐。

??

三 AliFlutter 建設(shè)與深度實(shí)踐

AliFlutter 業(yè)務(wù)實(shí)踐

下圖選取了阿里經(jīng)濟(jì)體中一些應(yīng)用了 Flutter 的典型場(chǎng)景。比如寶貝詳情是一個(gè)業(yè)務(wù)邏輯非常復(fù)雜的頁(yè)面，屬于圖文混排的頁(yè)面，并且具有大量圖片，有時(shí)還包括一個(gè)視頻播放器，在這個(gè)場(chǎng)景下就全部應(yīng)用了 Flutter。有團(tuán)隊(duì)使用 Flutter 框架用于游戲業(yè)務(wù)的開發(fā)，比如下圖所示的是盒馬使用 Flutter 構(gòu)建的一個(gè)游戲頁(yè)面。此外，在 Alibaba 這一應(yīng)用中，也大量使用 Flutter 用于構(gòu)建主鏈路以及訂單頁(yè)面等。

??

之所以選擇 Flutter，有幾個(gè)典型原因。首先，HotReoload 和跨端一致性使得研發(fā)非常高效;其次，可用于游戲化的豐富 UI 表達(dá)力、動(dòng)畫、圖文混排性能等訴求都能被 Flutter 很好地滿足。

AliFlutter 業(yè)務(wù)研發(fā)模型

在業(yè)務(wù)場(chǎng)景的背后是 AliFlutter 的業(yè)務(wù)研發(fā)模型。其實(shí)，F(xiàn)lutter 本身主要解決兩個(gè)問(wèn)題，邏輯和 UI。其本身沒有各種 Native 能力，需要為其補(bǔ)齊如網(wǎng)絡(luò)、推送以及接入網(wǎng)關(guān)等，使其更加接近于業(yè)務(wù)開發(fā)容器，而不僅僅是 UI 開發(fā)框架。再上面就是應(yīng)用開發(fā)框架，比如狀態(tài)管理框架、游戲化框架、動(dòng)態(tài)化 UI 以及組件庫(kù)，在此之上就可以構(gòu)建一些業(yè)務(wù)了。除此之外還會(huì)涉及到一些研發(fā)協(xié)同方面的工作，比如打包構(gòu)建、Linter、Pub 庫(kù)等。

??

AliFlutter 引擎研發(fā)模型

在 AliFlutter 之下，存在很多引擎修改的場(chǎng)景。舉例而言，在 iOS 13 以下可能存在一些后臺(tái) GPU 渲染 Crash 的問(wèn)題，在 Android 上存在特別機(jī)型 Flutter 啟動(dòng)閃退的問(wèn)題。此外，還需要考慮如何讓 Flutter 和目前已有生態(tài)進(jìn)行融合，比如圖片庫(kù)、網(wǎng)絡(luò)庫(kù)等在阿里內(nèi)部都有比較好的實(shí)踐。無(wú)論是 Bug 修復(fù)還是 Native 能力提升，其實(shí)都是對(duì)于 Flutter 引擎所做的定制化工作。

??

上圖展示的就是在阿里內(nèi)部對(duì)于 Flutter 引擎進(jìn)行定制所做工作的邏輯，首先通過(guò) Flutter 框架獲取對(duì)應(yīng)的引擎代碼，拉取依賴，進(jìn)行開發(fā)，到 Gitlab 做 CI，代碼審核完成之后將產(chǎn)物構(gòu)建出來(lái)上升到服務(wù)上面，最終通過(guò)簡(jiǎn)單的方式來(lái)提供服務(wù)。

AliFlutter 基礎(chǔ)設(shè)施建設(shè)

自定義引擎服務(wù)

前面所提到的是自定義 Flutter 引擎的開發(fā)流程，而想要將開發(fā)完成的東西提供給其他人使用，就需要如下圖所示的自定義引擎服務(wù)了。對(duì)于 Flutter 開發(fā)者而言，只需設(shè)置一個(gè)環(huán)境變量去服務(wù)上查詢是否有對(duì)應(yīng)的產(chǎn)物即可，如果有的話，就做一些定制并返回給開發(fā)者;如果沒有則去官方上游拉取。當(dāng)然了，對(duì)于 Flutter 的基礎(chǔ)設(shè)施而言，需要有一些多團(tuán)隊(duì)的支持，比如 Namespace 等機(jī)制。最早的時(shí)候，阿里巴巴通過(guò) Git 方式管理自定義引擎，但是 Git 對(duì)于二進(jìn)制很不友好，所以就使用了高效自定義引擎服務(wù)來(lái)解決問(wèn)題。

??

私有 Pub 服務(wù)

除此之外，AliFlutter 還實(shí)現(xiàn)了私有 Pub 服務(wù)。最初的想法是將不同人開發(fā)的庫(kù)等工作歸類組織起來(lái)，建設(shè)更好的內(nèi)部生態(tài)，實(shí)現(xiàn)更好的復(fù)用。Pub 本身就是 Flutter 所提供的開源框架，但是其深度綁定了谷歌云服務(wù)，所以在做這部分的時(shí)候需要將對(duì)于谷歌云的依賴變成對(duì)于阿里內(nèi)部的依賴。主要工作分為兩部分，一部分是對(duì)于包的簡(jiǎn)單管理和存儲(chǔ)，這部分可以通過(guò)阿里云存儲(chǔ) OSS 實(shí)現(xiàn);還有一部分是監(jiān)控包的下載量以及健康程度等，這部分還部署了 Meta 數(shù)據(jù)庫(kù)服務(wù)，在將包上傳的時(shí)候?qū)?shù)據(jù)同步過(guò)去，以及面向使用者的前端服務(wù)。

??

持續(xù)構(gòu)建

這部分的主要工作就是如何將所寫的 Flutter 代碼提供給沒有 Flutter 環(huán)境專門用于打包平臺(tái)。Flutter 工程可以通過(guò)一些腳本構(gòu)建出一個(gè) Pod 或者 Gradle，進(jìn)而集成起來(lái)變成一個(gè) APP。

??

AliFlutter 深度實(shí)踐

圖片庫(kù)優(yōu)化

在阿里巴巴內(nèi)部，除了對(duì)于 Flutter 做的一些體系化實(shí)踐，還有不少深度化實(shí)踐。比如對(duì)于圖片庫(kù)的優(yōu)化，對(duì)于 Flutter 而言，本身的圖片庫(kù)存在一些問(wèn)題，比如內(nèi)存占用高，不釋放問(wèn)題、CPU 占用問(wèn)題。為了盡可能遵循 Flutter 原生的圖片庫(kù)邏輯，做了圖片庫(kù)的優(yōu)化。主要工作包括對(duì)于 Flutter 框架的整體修改，能夠較好地實(shí)現(xiàn)一致性，與官方體系無(wú)縫融合，對(duì)接內(nèi)部圖片庫(kù)，其在性能以及易用性上面也具有較好的表現(xiàn)。

??

引擎大小優(yōu)化

我們?cè)?Flutter 引擎大小優(yōu)化方面也做了不少工作，簡(jiǎn)單介紹對(duì)于庫(kù)的裁剪。如下所示的兩張火焰圖，其較好地表達(dá)了 Flutter 引擎所依賴的各個(gè)庫(kù)裁剪前后的比例對(duì)比。裁剪后的內(nèi)容既保證了功能的完備性，也顯著降低了引擎大小。

??

大圖片內(nèi)存 GC 優(yōu)化

除了前面所提到的類似于音頻圖片釋放等內(nèi)容之外，阿里在實(shí)踐的過(guò)程中發(fā)現(xiàn) Flutter 在大圖片內(nèi)存 GC 方面存在一些問(wèn)題，比如在用戶退出的時(shí)候內(nèi)存無(wú)法得到很好釋放。對(duì)于社區(qū)中使用 Flutter 的同學(xué)而言，面對(duì)這樣的問(wèn)題建議大家在 Profile 模型下看下點(diǎn)擊了 GC 按鈕是否能夠?qū)?nèi)存降低下來(lái)?；诖诉壿嬑覀兲峁┝艘惶坠┥蠈訕I(yè)務(wù)使用的 GC API。從 FlutterEngine 開始依次調(diào)用 Shell、Engine、RuntimeController 以及 Dart 的 NotifyGC。

??

Flutter Canvas 實(shí)踐

Flutter 包含了 Skia，可提供 Canvas 能力。之前的邏輯是通過(guò) Dart 調(diào)用 Engine，再調(diào)到 Skia，而我們通過(guò)實(shí)踐中對(duì)其部分 API 的暴露，將 Skia 的 Canvas 能力加以透出。在 JS 部分有一些 2D 和 3D 的 API，可以將這些暴露成為 Canvas API，整體而言，相比于 Web 的 Pipeline 表現(xiàn)非常不錯(cuò)，這一功能目前已經(jīng)在部分業(yè)務(wù)開始灰度測(cè)試，數(shù)據(jù)表現(xiàn)也非常不錯(cuò)。

??

AOP 框架(AspectD)

Flutter 的 AOP 框架的核心基于 dill 變換，dill 本身是從 Dart 代碼到最終代碼之間的中間語(yǔ)言表達(dá)。其原理簡(jiǎn)要來(lái)說(shuō)是當(dāng)我們寫了一個(gè) hello_fultter 的時(shí)候，再寫一個(gè) AOP 包，AOP 的包會(huì)包裹 hello_fultter 包，使得在 AOP 包的產(chǎn)物 (dill) 里面 hello_flutter 和 AOP 的邏輯都存在，即其包括兩部分內(nèi)容，hello_flutter 本身代碼的 dill 表達(dá)，以及 AOP 框架中寫的注解的 dill 表達(dá)，將這兩者都包含在 app.dill 里面，基于此我們可以通過(guò) dill transform 方式來(lái)做變換。這里比較復(fù)雜，需要考慮 AST 抽象語(yǔ)法樹的各種邏輯。需要將注解提取出來(lái)并基于這些注解進(jìn)行操作，并最終寫入到 dill 里面去，這些操作處理完成之后，就變成了 aop_aspectd.dill，替換掉之前的 app.dill 即可。

??

四 AliFlutter 研發(fā)模式探索

AliFlutter 研發(fā)模式

下圖中最重要的就是研發(fā)模式和跨平臺(tái)運(yùn)行時(shí)，目標(biāo)是提供一種多端多平臺(tái)的能力。在平臺(tái)底層是基礎(chǔ)庫(kù)、網(wǎng)絡(luò)庫(kù)的基礎(chǔ)能力，此外還需要在垂直能力上的擴(kuò)展，支持各種垂直的基礎(chǔ)能力?；A(chǔ)設(shè)施之上是 Flutter 的跨平臺(tái)運(yùn)行時(shí)，運(yùn)行時(shí)基于 Flutter Engine，提供了具有豐富表達(dá)力的圖形接口、跨平臺(tái)、能力拓展、性能以及穩(wěn)定性等。在此之上，F(xiàn)lutter Framework 提供了可以復(fù)用的基礎(chǔ)能力，比如核心布局渲染、彈性擴(kuò)展能力、組件能力以及定制性等。除此之外，也有一些研發(fā)支撐上面的工作，比如編譯打包、調(diào)試、灰度發(fā)布、線上監(jiān)控、運(yùn)維能力以及數(shù)據(jù)化等。

??

AliFlutter 研發(fā)模式展望

在 Flutter 的未來(lái)發(fā)展方向，阿里巴巴主要的工作將集中于以下四點(diǎn)：

• 跨端能力：我們考慮對(duì)于上層的各種平臺(tái)提供標(biāo)準(zhǔn)基礎(chǔ)能力并 API 化，從而更好在多端多平臺(tái)進(jìn)行部署。此外，還希望通過(guò) Flutter 的容器化，使得研發(fā)和業(yè)務(wù)方能夠更多地專注在自身業(yè)務(wù)上面去。
• 交互能力：我們考慮利用 Flutter 豐富的表達(dá)能力在游戲化方向進(jìn)行更好的擴(kuò)展，以游戲引擎的方式來(lái)開發(fā) APP。基于泛化的交互能力以及更多的可玩性和創(chuàng)新性能夠?yàn)闃I(yè)務(wù)帶來(lái)更多可能。
• 研發(fā)效率：我們考慮實(shí)現(xiàn)工程解耦和云端一體化，目標(biāo)是業(yè)務(wù)方只需關(guān)注所寫的包，通過(guò)很簡(jiǎn)潔的方式集成進(jìn)來(lái)并看到效果，從而提供類似于前端的開發(fā)體驗(yàn)。此外通過(guò)云端一體從面向端側(cè)負(fù)責(zé)轉(zhuǎn)變到面向業(yè)務(wù)整體負(fù)責(zé)。
• 交付效率：這部分主要包含兩部分，一部分是動(dòng)態(tài)化 UI，另外一部分是 Web On Flutter，期望通過(guò)提供更加靈活的動(dòng)態(tài)性，以及前端技術(shù)棧下的動(dòng)態(tài)化能力。

??

總結(jié)

在本文中，首先，為大家分享了 Flutter 的原理，介紹了 Flutter 美觀、高效、高性能、開放的特點(diǎn)，以及阿里巴巴為什么選擇 Flutter。其次，為大家分享了 Flutter 的業(yè)內(nèi)現(xiàn)狀，有大量投入的主流廠商，以及體系化、深度、框架和更多的探索。再次，為大家介紹了 AliFlutter 的建設(shè)與實(shí)踐，包括了業(yè)務(wù)、研發(fā)模型、引擎研發(fā)等方面的實(shí)踐。最后，展望了對(duì)于 AliFlutter 研發(fā)模式的考量和未來(lái)發(fā)展方向。