作 者|董巖(思牧) 

出品|阿里巴巴新零售淘系技術部

2019 年無疑是 Flutter 技術如火如荼發展的一年。每一個移動開發者都在爲 Flutter 帶來的“快速開發、富有表現力和靈活的 UI、原生性能”的特色和理念而癡狂，從超級 App 到獨立應用，從純 Flutter 到混合棧，開發者們在不同的場景下樂此不疲的探索和應用着 Flutter 技術，也在面臨着各種各樣不同的挑戰。

通 通 通 通 通 通 知！

▼

爲什麼是 Flutter？

阿里巴巴集團內也有越來越多的業務和團隊開始嘗試 Flutter 技術棧，從閒魚的一支獨秀引領潮流，到如今淘 寶特價版 、盒馬、優酷、飛豬等BU業務相繼入局，Flutter的業務應用在集團內也已經逐漸形成趨勢。

那麼，是什麼原因讓集團內越來越多的開發者選擇擁抱Flutter技術棧？Flutter的哪些優勢吸引了集團Native開發者們通過Flutter開發並交付業務？ 

從技術上看，個人認爲Flutter最核心的3個特點最爲吸引開發者：

• 極高的開發與交付效率，良好的開發體驗

• 優秀的跨多端多平臺能力

• 極強的 UI 表現力

先說一下 開發效率 。從集團電商業務屬性出發，業務響應效率及其背後的研發效率從來都是最爲重要的指標。 在保證體驗的前提下，儘可能的提高研發效率，就意味着更高的生產力。

傳統的 Native 業務研發 iOS/Android 雙端需要分別投入，研發成本高，端差異性大且依賴端側發版，這也是爲什麼集團電商業務的活動類技術棧一直較爲依賴前端體系，從H5到Weex到小程序，很大程度上就是在追求研發和交付效率以及靈活性。

如今 Flutter 很好的解決了跨端一致性問題，一套代碼無差異的同時跑在 iOS 與 Android 兩端；開發體驗基本接近前端，支持 on device 的 Hot Reload ，去年年底 Flutter 又推出了在 Android Studio 中通過插件實現實時預覽並支持交互的 Hot UI 能力，以及 Layout Explorer 可視化佈局，讓Flutter的開發效率和前端效率基本持平。

電商業務發展到當前階段，已經不再僅僅侷限於移動端場景，越來越多的業務需求對跨端跨平臺性提出了更高的要求。釘釘/千牛桌面端應用場景，甚至天貓精靈、線下門店等業務場景，從長遠看都需要一個比 Web 性能一致性更好適配成本更低的多端方案。

目前跨多端技術方案主要依賴於瀏覽器和前端體系，但瀏覽器本身的沙盒屬性、與系統較低的結合度、以及在低端設備上較差的性能都降低了研發效率和用戶體驗，提高了業務的交付門檻。

可以說目前集團內的跨多端多平臺方案是實質缺失的。Flutter 從設計上就天然支持多平臺開發，它的底層基於 Skia 跨平臺圖形引擎，向上構建出了一整套平臺無關的渲染體系和事件處理體系，並緊貼 Native 研發模式自定義了基於 widgets 的聲明+響應式編程範式，對系統能力依賴度低，並具備出色的跨平臺還原度；支持多平臺也是 Flutter 的戰略目標之一。

目前除了 iOS 和 Android ，官方宣佈支持的平臺有 Mac、Windows 和 Web，Linux 也在開發中，它的技術特性也讓將 Flutter移植到 Linux based IoT 平臺上成本很低，同時 Flutter 還是未來 Google 的下一代操作系統 Fuschia 的官方應用研發框架。

可以說Flutter已經具備了成爲下一代跨多端多平臺研發模式的一切條件，圍繞Flutter建立集團的多端多平臺研發體系是非常可行的選擇。

最後講一下  UI 表現力 。電商業務重體驗，重交互，尤其對於流量精細化運營場景，富交互的遊戲化表現方式已經成爲流量促活的重要手段。

在 UI 表現力方面，前端體系一直具備着優勢，通過 CSS3 強大的動畫能力，開發者可以非常容易的實現複雜的動畫效果和交互體驗，而基於 Native UI ，需要藉助各種動畫特效三方庫，雙端開發體驗不一致，實現複雜且交付效率低。

Flutter很好的解決了這個問題，從補間（Tween）動畫、基於物理屬性的動畫，到相對複雜的頁面間Hero動畫、parallax交錯動畫等特效，Flutter都可以跨平臺低成本的高效實現。

這裏貼一個去年年底Flutter Interact大會上GSkinner公佈的基於Flutter實現的交互Demo讓大家直觀感受一下：

可以看到 Flutter 的強大 UI 表現力，可以幫助開發者快速高效低成本的開發出極爲炫酷的 UI ，非常適合電商領域重 UI 視覺交互的各類場景，幫助業務構建出富有表現力的頁面。

Flutter體系化建設現狀

目前集團內有多個業務 BU 均已開始嘗試應用 Flutter 技術棧，涵蓋了從電商詳情業務、導購頻道，到 Feeds 流、遊戲化交互以及國際化等多個業務場景。

目前 Flutter 技術在集團應用的痛點在於，研發基礎設施的中臺基建不夠完善，研發支撐能力與數據運維能力未實現標準化，集團 Flutter 開發者生態還未完全拉通，暫時未能形成合力。 這些問題將是我們後面在集團層面建設 Flutter 技術體系的重點。  

另一方面從行業趨勢上看，Flutter 技術已經成爲越來越多行業夥伴重點投入的技術建設方向。

字節跳動、美團等公司均建設了自己的 Flutter 工程化體系，並服務了各自的業務場景； 騰訊也基於 Flutter 在多個 App 上進行了應用嘗試，並在 Flutter 渲染能力服務小程序的場景下做了有益探索。

行業夥伴們在 Flutter 技術上的投入力度和決心，一方面讓我們對 Flutter 技術的應用前景和社區更有信心，另一方面也讓我們感到聯合集團各方力量共建 Flutter 生態的必要性和緊迫性。

▐    手淘的嘗試和思考

最後，簡單講一下我們從18年到現在在 Flutter 上做的探索和思考。

手淘從18年10月開始探索 Flutter 渲染引擎應用在小程序場景；19年下半年開始建設 Flutter 基礎能力，並服務了淘寶特價版業務，在引擎、圖片庫、內存優化和加載性能等關鍵技術上做了沉澱；同時通過對 Flutter 的引擎改造，封裝出 Flutter 2D Canvas 能力，向上支持小程序 Canvas 組件及小遊戲引擎，服務 2D/2.5D 遊戲化業務，並在業務場景中落地。

在這個過程中，我們也沉澱瞭解決內存問題和圖片問題等方案，以及 Flutter 技術與 Web 技術的對比與思考，取得了一定的技術及業務價值。 

通過這些嘗試，加深了我們對 Flutter 技術的掌控力和理解。在我們看來， Flutter 的橫空出世，完全可以被看作吹響了 Native 體系復興的號角。

在保持 Native 性能優勢的前提下，Flutter 帶來了優秀的跨端一致性、貼近前端的研發效率，以及強大的 UI 表現力，爲集團業務使用 Native技術棧帶來了新的可能。 

從業務應用上看： Flutter 目前帶來的最大價值是研發效率的提升。在基建和 native 擴展能力完備的前提下，開發基於 Flutter 的純 Dart 業務的人效比之前各端分別開發的效率提高了接近 2 倍，單位時間內的需求響應能力也相應提高了接近2倍，目前已在閒魚和特價版業務開發中得到了很好的工程化驗證。

從適應場景看： Flutter 目前比較適合承載富圖文內容，如詳情、Feeds 流、用戶主頁等常規業務開發，以及 2D/2.5D 遊戲場景以及富動效業務。

Flutter 通過單端技術棧可以同時滿足以前需要 iOS、Android 以及前端技術棧分別負責的業務場景，甚至可以通過端雲一體化的開發模式使用 Dart 負責一部分服務端業務邏輯開發，可以幫助業務團隊拓展業務邊界的同時，實現前後端研發能力閉環。

Flutter 目前的限制在於，動態性能力及前期的投入成本。 前期投入成本主要指技術學習與團隊研發模式升級的成本，涉及到技術路線選擇，是我們和每個業務團隊需要一起思考和判斷的，這裏不展開談。

動態性能力是 Flutter 的相對短板， 目前能夠通過 Flutter 模板化技術實現基於模板的組件級動態化能力，但基於性能、審覈及對原生 Flutter 體系的侵入性等多種因素，目前還不能去直接實現UI + 邏輯動態化能力。

Flutter Web 方案雖然不存在審覈限制，但受限於瀏覽器 DOM API 與 widgets 體系的差異性，目前仍舊存在較嚴重的性能瓶頸和渲染差異性，僅可作爲降級的備用方案，暫時無法作爲動態化的主要實現方案。

未來在動態化方向的探索也將是個長期的博弈過程。 如果後面我們可以解決好 Flutter 動態化的問題，那麼 Flutter 完全有機會成爲集團業務的核心研發模式之一。

綜上我們認爲，入局 Flutter 的時機已成熟，合力共建 Flutter 集團移動生態，這件事情大有可爲。

AliFlutter - 經濟體移動小組Flutter共建項目

在這樣的背景下，經濟體移動技術小組今年也將端側架構治理的重點方向放在 了 Flutter 上。移動技術小組從戰略角度提出了 AliFlutter 項目，目標非常明確：

• 從經濟體層面拉通 Flutter 體系建設，打造 Flutter 的公共技術基礎設施，制定 Flutter 容器、中間件與 API 標準，建設 Flutter 研發支撐與數據運維能力，複用關鍵技術；

• 聯合各 BU 構建經濟體Flutter技術社區，沉澱共享集團 Flutter 技術及業務組件、能力與解決方案，服務集團 Flutter 業務，共建集團 Flutter 技術生態；

• 在經濟體層面構建 Flutter 的對外影響力，聯合各 BU 一致對外，打造阿里在行業內的 Flutter 技術制高點。

爲經濟體的 Flutter 技術體系“建基礎、育社區、扛大旗”，我們責無旁貸。

未來 AliFlutter 的整體架構如下所示： 

AliFlutter 建設的第一步， 就是要構建集團的 Flutter 基礎設施、提供公共容器與組件、研發支撐服務與標準化研發流程， 爲集團的 Flutter 業務提供一個基礎的Flutter公共研發服務能力，搭建好技術共建共享的基礎和平臺； 

第二步， 我們要服務好 Flutter 業務應用，探索業務應用模式與 Flutter 技術特性的結合點， 並在過程中打磨技術，形成針對業務特點的解決方案與技術沉澱，真正盤活集團內的 Flutter 社區共建氛圍與生態； 

第三步， 面向未來，解決好Flutter應用的幾個核心關鍵問題： 跨端與交互能力、業務研發效率與業務交付效率，通過技術賦能業務，讓 Flutter 真正成爲集團移動業務的核心研發模式。

接下來，就詳細講一講每個階段 AliFlutter 所做的工作和麪向未來的思考。

基礎設施建設

從19年10月 AliFlutter 項目啓動開始到現在，我們基本構建起了一套 Flutter 的公共基礎設施，包括 Artifacts 與 pub 庫，Flutter 標準容器與 API 標準，並實現了 Flutter 的構建打包自動化，定義了標準的引擎定製工作流與業務研發工作流。目前基礎設施已經具備支撐集團 Flutter 業務研發的能力，並支持各 BU 按需定製。

▐    Artifacts倉庫

產物服務器主要是爲了配合引擎定製，加速通過 Flutter 命令獲取 Engine 中間產物的後端服務，便於統一 Flutter 開發者的工作環境。

開發者可通過設置 FLUTTER_STORAGE_BASE_URL來將Flutter工具鏈獲取 artifacts 的地址指向該服務，同時通過 namespace 便可實現定製化的獲取 artifacts 的能力以及內網加速服務。 

Namespace 設計爲區分不同 BU 的引擎產物，同時提供了公共 namespace 來存儲公共產物，確保定製性和公共能力的按需配置；若後端存儲上不存在需要獲取的產物地址，則會觸發從 Flutter 官方鏡像做一次獲取並緩存在服務端。 

各 BU 可按需定製引擎，並按規定的路徑格式上傳至自己 namespace 中，即可實現從 namespace 中獲取定製版本的引擎中間產物。

▐     pub倉庫

類似於 Node.js 世界的 npm，Flutter 使用 pub 來管理三方組件與依賴。考慮到易用性、安全性等需求，爲了管理集團內的公共二方組件，我們也搭建了內網環境的 Flutter pub 庫。該庫的目標是成爲集團的 pub 發佈平臺，管理集團內所有二、三方 pub package。

用戶可通過設置 PUB_HOSTED_URL 指向內部地址，來實現通過 Flutter 工具鏈獲取配置以及發佈二方 pub 的能力，用戶也可以通過 Web portal 的方式訪問 pub 庫並查詢已發佈的 pub 組件。

▐     容器、中間件與API

對於業務的接入而言，現階段核心要解決的問題就是提供一個統一的 Flutter 運行時容器，以及一系列集團標準化移動中間件的 Flutter 封裝與 API 能力，並提供集團標準的插件擴展方式供業務方獨立開發業務功能。 

鑑於集團應用基本上均以混合棧爲主，我們將 FlutterBoost 作爲 Flutter 容器混合棧的基礎，並配合集團標準路由與導航中間件提供了統一的混合棧路由導航能力，業務通過標準路由註冊即可快速實現 Flutter 頁面和 Native 頁面的混合導航能力。 

容器通過對接高可用平臺，提供了初始化性能埋點與 Crash 數據上報等標準監控能力，爲 Flutter 業務的技術性能分析和問題排查提供了基礎。集團移動端積累了一整套的標準中間件體系，包括網絡庫、圖片庫、push 消息、配置下發、數據採集與監控等一系列基礎能力，在 Flutter 體系內無縫使用移動中間件能力對於業務是剛需。

同時，小程序體系建設過程中形成的一系列標準 API，也很大程度上實現了一個完整的小程序運行環境的底層能力抽象，對於 Flutter 體系標準化的訪問系統能力，實現平臺無關的跨端能力是個非常好的補充。

我們聯合淘寶中間件團隊與小程序團隊，對基礎中間件和小程序 API 實現做了 Flutter 側的封裝與標準化，未來也將對 Flutter 中間件和 API 能力進行系統支持。

▐    標準化Flutter構建

由於 Flutter 研發體系較新，且構建 Pipeline 相較傳統的移動構建流程又存在一定特殊性，產物構建配置複雜耗時長易出錯，給 Flutter 業務的構建和發版帶來了很大阻礙。

因此我們也聯合研發支撐部的同學，以插件的形式實現了 Flutter 腳本化的構建流程，支持雙端自動整包打包和 Flutter Module 打包。 

目前 AliFlutter 的構建流程默認使用 AliFlutter 的 Flutter 倉庫以及集團內部 pub 倉庫，引擎產物也統一按配置從 artifacts 倉庫獲取，較好的實現了支持 Flutter 業務的自動化構建需求。

業務應用

在夯實 Flutter 集團共建基礎之後，第二步，我們 AliFlutter 在業務應用方面也做了大量工作。

一方面通過原生 Flutter 的工程化能力持續服務淘系與集團業務；另一方面通過 Flutter Canvas 項目服務了小程序場景及遊戲化場景下的互動業務

▐    淘系與集團業務支撐

目前淘寶特價版已完成詳情業務的 Flutter 改造並上線，採用 Flutter 使業務在需求節奏不變的情況下人力投入減少一半，對緩解業務研發壓力起到了明顯的作用；同時應用的整體性能和穩定性與 Native 基本持平。

後續特價版將基於 Flutter 繼續拓展業務改造範圍，並沉澱基於 Flutter 的業務域解決方案。 

目前盒馬、ICBU 、優酷也基於 AliFlutter 進行了容器接入升級與業務適配，盒馬依託閒魚的 Flutter 遊戲引擎實現了盒馬小鎮業務，ICBU 在主鏈路相關頁面使用了 Flutter，優酷則基於 Flutter 實現了會員訂單頁等場景。

同時我們也在和釘釘及 Google 一起探索 Flutter 桌面端的解決方案。

▐     Flutter Canvas

目前 Flutter Canvas 已落地手機淘寶，並在小程序運動銀行業務進行了灰度試點，初步具備了承載小程序 Canvas 業務的能力；其性能在 Android 低端機上的表現有優勢，可以作爲 Web Canvas 方案的有益補充。

未來 Flutter Canvas 一方面將藉助 Flutter 渲染管線的跨平臺與高性能特點，以及 Flutter 對 Vulkan 和 Metal 的適配支持，在移動端獲得更好的適配性以及性能；同時將繼續實現 3D API ，支撐未來互動類的業務應用。

未來建設

紮根業務之後，接下來的第三步，我們要緊貼 Flutter 體系在阿里集團未來的建設目標，持續回答好Flutter面向未來建設路徑中的幾個關鍵問題。那麼首先，Flutter體系在阿里集團的建設目標應該是什麼？個人以爲：

Flutter應成爲阿里集團未來跨多端多平臺的核心業務研發模式之一。

那麼，我們目前離這個目標還有多大差距？在我看來，如果要想讓Flutter成爲業務的核心研發模式，那麼必須解決好 跨端能力、交互能力、業務研發效率以及業務交付效率四個核心問題。 

• 從跨端能力看： Flutter雖然已具備了很好的跨多端能力與高還原度，但涉及到平臺能力時，仍然需要通過各端擴展實現，還未形成小程序體系這樣的標準化的容器和API封裝能力。那麼如何更好的解決Flutter的容器化問題，讓業務不感知平臺差異性？

• 從交互能力看： Flutter如何利用好自身交互能力的優勢，在提供媲美前端的富交互體驗的同時，降低Native富交互特性開發的門檻，真正吸引Native開發者使用Flutter技術開發業務？

• 從業務研發效率看： 雖然 Flutter 的 Hot Reload/Hot UI 機制已經讓開發 Native 頁面的效率追上了前端，但在工程解耦方面仍然有很大提升空間，目前還無法高效的支持多業務團隊並行開發；另一方面如何與現今流行的 Serverless 能力結合，實現端雲一體研發模式，使業務實現研發閉環，也需要實踐的檢驗。

• 從業務交付效率看： 目前 Flutter 仍屬於 Native 方案，依賴端側發版，交付效率低，無法很好的承載電商系靈活性和實效性的需求；那麼如何解決Flutter的動態化，幫助業務實現快速迭代？

解決好這幾個問題，才能真正讓 Flutter 成爲集團移動業務的核心研發模式，爲集團業務研發帶來一個飛躍性的提升。下面講講我們在這幾個方向的思考和探索。

▐     提升跨端能力： Flutter 容器化

從工程角度看，雖然 Flutter 通過 Skia 跨平臺圖形渲染和自建事件體系基本實現了對宿主平臺的最小依賴，但對於平臺側能力，目前 Flutter 還未也沒有必要從應用框架角度做到一個統一的抽象，這就需要我們根據業務的訴求和特點進行有選擇的封裝。

小程序 API 就做了一個非常好的示範，目前阿里小程序體系提供的API達到了200+，很好的對移動端的UI、多媒體、文件緩存、網絡、設備能力、數據安全以及業務相關能力進行了封裝，讓業務開發者在小程序側針對API進行系統能力調用，無需關心平臺實現。 

因此 AliFlutter 容器接下來的規劃就是從工程體系的角度，提供一套標準化的 API 能力，以規範並抽象移動端的端基礎能力，使業務儘量少甚至不關心平臺差異性，專注於業務；同時藉助標準化 API 的能力，實現跨多端多平臺部署。 

從移動端架構角度看，各個時期的跨平臺方案都對 API 能力有着共同的訴求，從 H5 到 Weex ，再到後面的小程序，以及 Flutter 等容器環境，進行了多輪的 API 重複建設，造成了缺少 API 接口的標準化定義，以及缺少實現層統一管控的現狀。

如果能夠在 API 的 native 實現上做到接口統一，再通過各個容器分別提供接口供業務使用，可以更好的做到實現收口，並在統一實現層跨容器實現對系統資源的統一調度、管控和度量。

▐  提升交互能力：U I + 遊戲引擎

前文提到過， Flutter 目前最大的價值在於研發效率的提升， 這是吸引業務團隊應用Flutter技術的起點；但僅僅依靠研發提效還遠遠不夠，當通過各種工程化手段解決好當前研發痛點，提升研發效率之後，如何說服業務繼續使用Flutter體系進行業務開發？Flutter帶來的長遠價值在哪裏？

個人認爲，這個落腳點應該在通過遊戲交互能力的泛化，打破 UI 與遊戲引擎的邊界，用遊戲化的方式創造更有表現力的交互體驗，創造新的業務玩法和價值。 

大家知道傳統的 UI 和遊戲引擎是相互獨立的兩個體系，在 H5 應用中，往往是通過 DOM 或者上層應用框架做 UI，通過建立在 canvas 上的 H5 遊戲引擎實現遊戲能力。

如果在遊戲應用中有 UI 的需求，解決方案一般是自建一套簡單的 UI 體系與事件體系，通過自繪的方式在遊戲中疊加 UI ，獨立遊戲引擎亦是如此。

Flutter 從技術原理上看更像是一個建立在 Skia 圖形庫上的遊戲引擎， 它通過細粒度的 widgets 設計向上構建 UI 系統；同樣得益於這樣的細粒度設計，我們也完全可以直接通過 widgets 能力組合出一個完整的遊戲引擎，提供Game，Scene 及 Sprite 動效等 widgets 並擴展對應的 elements 和 render objects，並與 UI 體系共用一套事件處理機制、分層與渲染合成機制。

這樣做就相當於打破了原來H5中DOM UI和Canvas遊戲的邊界，讓兩個體系在 widgets 概念下完美融合起來，通過遊戲引擎的能力賦能UI實現更多以前UI體系難以低成本實現的動效效果（比如一隻小盒馬一口吃掉了一個訂單組件等等）。

我們相信，這個方向的探索將會進一步釋放 Flutter 的技術潛力，帶來更多的業務可玩性與創造性，解放產品和設計的想象力，爲業務創造更多價值。

▐     提升研發效率：工程解耦與端雲一體化

Flutter 工程解耦

前端體系的研發效率很大程度上來自於基於 URI 的統一路由體系帶來的頁面間解耦性，與頁面內基於 Web API 的標準化帶來的內聚性。

然而目前的 Flutter 研發模式，仍需要多個業務團隊工作在同一個工程下，互相之間存在源碼依賴，未來如果跨業務團隊大規模應用Flutter技術，必將拖慢業務的研發效率。 

從工程解耦角度看，目前 AliFlutter 容器通過混合棧與標準路由能力基本實現了頁面研發的解耦，未來的容器化建設通過提供小程序對等的 API 能力封裝，業務對平臺無感知，能夠讓我們有機會解耦業務研發，實現與小程序開發接近的研發體驗和效率。 

理想的方案是： 業 務可以從業務維度創建一個獨立的 Dart 工程，只包含業務相關的頁面和邏輯代碼，通過 Flutter 的 Hot UI 開發頁面，通過IDE提供的基於 Flutter Web 的能力本地預覽工程並調試 API 與系統調用，完成研發期工作；也可生成預覽二維碼，使用預裝有 AliFlutter SDK 環境的宿主應用掃碼預覽；研發與構建鏈路分離，雲端主動拉取業務倉庫代碼參與整包構建。以此達到類似小程序研發方式的前端研發體驗，同時實現業務間的研發解耦和並行發佈，提高業務的交付效率。

端雲一體化

如今 Serverless 概念越來越多的受到業務研發的重視和應用，集團在新一代的端雲一體化研發模式上的探索這一年多來也做的如火如荼。

結合輕量級容器環境、多語言支持能力與統一的 API 服務端編程，端側同學可以很容易的使用客戶端語言如 Java、JS、Swift 甚至 Dart 來開發服務端業務能力，實現服務編排、服務端 FaaS 業務邏輯與 API 自動生成，達到前後端工程體系歸一，業務研發閉環的效果。

目前閒魚在 Dart FaaS 雲端一體化的探索走在了前面，通過集團的容器規範實現了Dart function容器，並聯合服務端爲部分業務需要的領域服務抽象出來 BaaS 層（存儲、消息隊列等），並封裝了面向前端的 BFF（Backend for Frontend）能力層，使移動端開發者可以很容易的使用Dart封裝FaaS業務邏輯，同時進行移動端和服務端 FaaS 開發，大大提高了業務研發效率。

通過將原有的端側請求接口、組裝數據並轉換爲 ViewModel 的邏輯都後移到了服務端，經過字段映射與頁面編排，移動端可直接獲取 ViewModel 並刷新頁面，通過 BinderAction 雙向交互狀態數據，有效屏蔽了通信細節，提高了開發效率。

雲端一體化除了帶來了研發與協同效率的提升，同時也重塑了生產關係，使端側業務從只關注端側體驗和邏輯的開發角色，變成能夠向業務整體結果負責；同時也讓服務端更專注於領域服務的沉澱。

Flutter 良好的跨端特性，能夠屏蔽掉端差異化，配合 Flutter 容器化改造，更近一步的簡化了業務的全鏈路研發模式。

未來如何在 FaaS 模式下，沉澱出一套可以服務集團業務研發的通用端側和服務端通信調度框架，讓集團 Flutter 開發者和業務都能共享到 Serverless 技術和雲端一體化提效的紅利，是需要我們共同去探索和定義的新問題。

▐     提升交付效率：Flutter 動態化

實現動態化是交付效率提升的重要方式。

對於電商強運營強時效性特性來說，動態化幾乎是一個必備的訴求，但從技術上看也是一個非常敏感的需求，是一個在系統廠商平臺管控下長期博弈的過程。

在我看來，動態化技術需要解決的核心問題，是在保證業務發佈確定性的前提下，尋求技術性能、業務迭代效率與靈活性三者之間合理的平衡點。

下面講講我們在 Flutter 動態化上的兩個思路與嘗試： Flutter 模板化方案與 Web on Flutter。

Flutter 模板化方案

動態模板化方案是集團內較爲成熟的一套基於Native技術的模板化方案，專注於 UI  模板渲染，沒有執行邏輯和運行時環境，目前被廣泛應用於電商系的一些核心業務場景。

同時該方案提供了配套的組件平臺，支持在線模板編輯、預覽、測試及發佈整套流程，結合發佈平臺形成了一整套完善的業務開發生態閉環。 

在 Flutter 體系下，目前閒魚團隊依據標準模板協議在 Flutter 側實現了一套 Dart 版 SDK ， 通過模板下發實現了Flutter端的輕量級動態化組件編排能力；並通過一年多的迭代逐步解決了渲染性能與渲染一致性問題，較好的賦能了Flutter業務的組件動態化能力。 

那麼，未來 Flutter 與動態模板化方案有沒有更好的結合點？

答案是肯定的。從 DSL 角度看，目前模板的寫法基本上來自 Android XML ，對組件開發者尤其是非 Android 開發者不夠友好，具備一定的學習成本；而 Flutter 的結構與屬性均可通過 widgets 表達，可以極爲靈活且平臺中立的用聲明式代碼構建UI並綁定數據，易於開發者編寫組件並通過 Flutter 框架獨立調試與測試；在移動端運行時，可以按需按場景翻譯成 native 組件或 Flutter 組件。

未來我們也將持續在這個方向上做探索。

Web on Flutter

相比貼近 Native 研發模式的模板組件化渲染方案，Web on Flutter 希望通過類 H5 的 DSL + JS ，藉助Flutter的渲染能力，實現貼前端技術棧的動態化能力。 

目前基於 Web 渲染的小程序方案存在啓動耗時高，渲染性能距原生 UI 有較大差距等性能問題，這些問題很大程度上都源自於瀏覽器引擎的設計歷史包袱（渲染管線複雜、CSS multi-pass layout及legacy實現等），以及JS到Native通信效率低（bridge）。

Flutter 的設計思路源自瀏覽器，一方面直接吸收了前端框架近年來的演進成就，原生支持了聲明式-響應式編程範式，提高了移動端的研發效率；另一方面，Flutter 緊貼 native 開發模式有限定義了 UI 結構、佈局與渲染的必要元素，在滿足native UI開發模式的前提下簡化了能力定義與佈局算法（single-pass layout與repaint boundary等概念），很大程度上簡化了渲染管線的複雜度，直接爲Flutter帶來了接近原生的性能體驗。

同時，Flutter 的 widgets 設計巧妙，結構佈局屬性等基礎元素均使用 widgets 表達，且可通過基礎 widgets 的組合來構成複雜組件，這種細粒度+組合能力設計讓 Flutter 有極強的表現力，並具備向上對接各種研發模式的可能性。 

因此，通過 widgets 組合小程序 DSL，支持小程序 CSS 有限集，實現渲染層替換瀏覽器引擎，並對接JS引擎支持JS執行能力，是一個將Flutter應用於小程序生態的合理探索方向。

相比把開發者慣壞了的瀏覽器，這種方案在 CSS 的能力支持上必然是受限的，無法滿足所有 CSS3 標準的實現，更多通過緊貼 Flutter widgets 的現有能力以及必要的 widgets 擴展，在不破壞 single-pass layout 的前提下組合出 CSS 能力。

但從 Flutter 原生開發的角度看，只要 Flutter 現有的原生能力能夠滿足業務需求，那麼受限的 CSS 實現也一樣可以提供和 Flutter 對等的能力解決業務問題。同時，通過受限的 CSS 可以換來與 Flutter 相當的高性能，與基於 Web 的實現相比，在性能上帶來了質變。 

我們在18年底通過一個內部項目實現了這個思路的原型，通過使用 C++ 重寫 Flutter 的 widgets、rendering、painting 及事件管理等 Dart framework 中的中低層能力，並在 widget 上用 C++ 實現了 CSSOM + DSL -> Widgets 的響應式框架，直接從 C++ 層提供 render 實現，將傳統由 JS 承擔的模板展開、tree-diff計算與渲染工作交給C++層，通過Flutter提供的Widgets tree到RenderObjects tree的diff能力實現，顯著提高了性能。

從實現的簡單的demo看，相對小程序的web渲染性能有了大幅的提升。這種方案的問題在於和Google代碼庫分裂後的長期維護性。 “Flutter和Web生態如何對接” 這篇文章對集團內在這個方向上嘗試的幾種思路做了較爲全面的對比，未來我們也將繼續在這個方向上做深入和持續的探索。

總結與展望

Flutter 體系化建設目前在淘系剛剛起步，仍然有大量工作需要去做，我們在基礎設施、工程化以及通過Flutter定義和收斂業務域研發模式上做的許多建設性的事情，正朝着把Flutter打造爲統一移動應用基礎研發框架，助力業務迴歸移動端研發模式這個大目標一點點邁進。 

在移動技術小組啓動 AliFlutter 項目之前，閒魚技術部已經在 Flutter 技術建設上做了大量探索和投入。

一方面通過 Flutter 技術賦能業務提效升級，拿到了很好的業務成績；

另一方面沉澱Flutter的技術與業務解決方案，並通過開源反哺社區，在海內外Flutter技術社區中建立了顯著的技術影響力與領導力，也湧現出一衆Flutter技術專家。 

接下來AliFlutter的重點任務，就是要和閒魚、財富等先驅應用者以及盒馬、釘釘、飛豬、優酷、餓了麼、CBU等Flutter的實踐者一起，在集團層面把Flutter的場子建起來，把集團Flutter生態拉起來，讓技術和經驗能夠共同沉澱和分享，一起來把Flutter技術體系在阿里的應用生態內做大做強，真正成爲集團業務的核心研發模式，並讓每個參與者都能從中受益。 

我們一直堅信 Flutter 技術的先進性和應用前景，未來我們將繼續立足淘系服務集團業務，和集團開發者攜手前行，在 Flutter 這個技術方向上堅定的走下去。

We are hiring

淘系技術部 依託淘系豐富的業務形態和海量的用戶，我們持續以技術驅動產品和商業創新，不斷探索和衍生顛覆型互聯網新技術，以更加智能、友好、普惠的科技深度重塑產業和用戶體驗，打造新商業。我們不斷吸引用戶增長、機器學習、視覺算法、音視頻通信、數字媒體、移動技術、端側智能等領域全球頂尖專業人才加入，讓科技引領面向未來的商業創新和進步。

請投遞簡歷至郵箱： [email protected]

END

瞭解更多

點擊下方圖片即可閱讀

打破重重阻礙，Flutter 和 Web 生態如何對接？

Weex、RN還是Flutter？資深技術專家與你聊聊阿里跨平臺思路