[[321430]]

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

在電商活動營銷中互動場景日益增多，對性能要求持續提升的前提下，如何提供一個高性能且穩定的 Canvas 基礎能力服務好富交互的互動場景就成為了一個重點的課題。

在小程序場景中 Canvas 作為承載互動游戲的主要能力發揮了重要作用。然而受限于小程序架構下 app context 和 page context 的隔離設計，存在從 app worker 到 page renderer 的通信瓶頸，無法充分發揮出 web canvas 的性能，如果有一個 native 版的 canvas 實現將可直接在 native 層對接 app worker，降低通信成本，充分發揮 Canvas 的性能。

Flutter 底層基于 Skia，其性能和移動端復雜異構機型的適配性均得到過長期的檢驗，且 Flutter 基于瀏覽器的設計實現了一條平臺無關的渲染管線，并對瀏覽器實現做了極大的簡化，提供了很好的可靠性和性能。那么如果能夠將這條渲染管線直接用于向業務容器提供 Canvas 能力，通過 binding 方式直接向小程序和小游戲容器提供與 Web Canvas 一致的標準 API，一方面可以復用 Flutter 的底層能力，為非 Dart 環境提供渲染支持，另一方面可以借助 Flutter 簡化高效的渲染管線實現提供更好的渲染性能。

目前 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 實現上做到接口統一，再通過各個容器分別提供接口供業務使用，可以更好的做到實現收口，并在統一實現層跨容器實現對系統資源的統一調度、管控和度量。

提升交互能力：UI + 游戲引擎

前文提到過，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 這個技術方向上堅定的走下去。