掘力計劃第 20 期：孫哲-Flutter 動態方案 Fair 原理與實踐
在掘力計劃系列活動第20場， 58 集團-房產事業部跨端技術負責人、移動端架構師孫哲為我們分享 Flutter 動態方案 Fair 原理與實踐。
摘要
跨平臺技術對整體大前端的研發效率提升明顯，58 集團對跨平臺方案同樣有著強烈訴求。Flutter 相較于其它跨端技術，在渲染效率和多端適配度上有非常大的優勢，但其無法實現動態化更新，使得 Flutter 的發版成本較高。基于此背景，58 技術委員會推出了 Flutter 動態化開源項目—Fair。本次分享將對 Fair 進行一些介紹，講解 Fair 是如何實現 Flutter 動態化以及使用 Fair 的一些最佳實踐。
1 Fair 背景介紹
近年來，跨平臺技術的迅速發展為移動端開發帶來了革命性的變化。以 React Native 和 Flutter 為代表的跨平臺技術，極大地提升了前端開發者的工作效率。
58 同城作為房產行業的龍頭企業，其技術部門也在積極探索跨平臺技術的應用。經過調研和實踐，58 選擇了 Flutter 作為主要的跨平臺開發方案。相較于 React Native 等方案，Flutter 在性能和適配性方面更占優勢。
但是，Flutter 也存在一些短板。其中最主要的就是無法實現動態化更新。這導致每次功能修改都需要重新構建發布，大大增加了發布成本。
為了解決這一痛點，58 技術委員會推出了開源項目 Fair，通過一系列工具鏈實現了 Flutter 頁面的動態化。
2 Fair 實現原理淺析
2.1 架構設計
Fair 整體設計原則是要打造一個還是 Flutter 技術棧的、可通過市場審核的熱更新方案。所以整體架構設計，是將 Dart 源文件轉譯成 DSL 通過下發 JSON 和 JS 來分別實現布局動態化和邏輯動態化。
Fair 架構圖
因此 Fair 的動態化方案就包含以下三個方面：
- 布局動態化
- 邏輯動態化
- 動態內容通信
布局動態化通過自定義 DSL 語法，將 Flutter 頁面描述為可解析的 JSON 格式，然后在運行時動態加載解析，重建頁面布局。
邏輯動態化則是通過自定義的 Dart 轉 JS 的編譯工具，將 Dart 中的業務邏輯抽取出來，編譯為 JS 格式，與頁面交互。
動態內容通信是通過 FFI 和 method channel 搭建的 JSBridge，在 Dart 端與 JS 端建立了橋梁，讓兩端可以相互調用對方的方法。
2.2 布局動態化實現
布局動態化的實現主要分為三個步驟：
- 使用 Analyzer 庫解析 Dart 代碼生成抽象語法樹 AST
- 遍歷 AST，生成自定義的 JSON DSL 格式描述頁面結構
- 運行時通過反射調用 flutter 組件構建頁面
具體來說，Fair 會解析 Dart 代碼，生成包含組件信息的 AST。然后根據 AST 生成 JSON 格式的 DSL，比如：
JSON |
該 JSON 描述了一個 Center widget，child 屬性為一個 Text widget。
運行時，Fair 通過 className 映射組件構造函數，通過反射調用該構造函數即可動態構建頁面布局。
再通過 Function.apply（）方法動態運行映射出的方法返回 widget。
詳細解析可以查看：布局 DSL 生成原理
2.3 邏輯動態化實現
邏輯動態化同樣分三步：
- 分析 Dart 代碼，提取業務邏輯部分
- 自定義 Dart 轉 JS 的編譯器，生成 JS 文件
- 頁面通過 JsChannel 與 JS 運行環境通信
Fair 會解析 Dart 代碼，提取所有的變量，方法等作為業務邏輯。然后通過自定義的編譯器，將這些邏輯轉換成 JS。
舉個例子：
Fair 中的 MVVM 依賴于 Flutter 原生模式，如上圖所示，JS 域的數據同步給 Dart 域，只需要在 JS 側調用熟悉的 setState 即可。當然這部分對使用 Fair 框架的開發者是無感知的，編譯工具幫我們完成了相關的轉換。原生代碼和生成的 JS 代碼，對比如下：
JavaScript |
Dart |
大家可以看到，除了 JS 簡化訪問域的 with 和通信目標對象需要的 FairKey，其他代碼差別并不大。
詳細解析可以查看：Fair 邏輯動態化架構設計與實現
2.4 動態內容通訊
js 與布局文件的通信，本質上就是 js 與 dart 之間的通信，因為兩者都是以 native 平臺做依托，所以需要 native 作為消息的轉發器，負責消息的分發。
對于 dart 與 native 之間的通信，我們使用的是官方提供的 message-channel 與 dart:FFI。message-channel 主要有、BasicMessageChannel、MethodChannel、EventChannel，該通道主要用于異步通信，dart:FFI 是官方提供的直接調用 native c/c++代碼的工具，主要用于同步通信。
對于 native 與 js 之間的通信，我們則可以用注入方法的形式建立聯系，native 側注入本地方法，那么 js 則可以調用該方法發送消息并獲取結果值，而如果是 js 提供本地方法， 那 native 側可以執行 js 中的方法獲取 js 發送的結果。
詳細解析可以查看：Fair 邏輯動態化通信實現
3 Fair 生態建設
為了更好地幫助開發者使用 Fair 實現 Flutter 動態化，Fair 項目組還開發了一系列輔助工具。
3.1 構建工具
提供了命令行工具，在 Flutter 項目中通過簡單配置即可生成動態化代碼。
只需三步即可構建 Flutter 動態化工程
獲取 faircli
JSON |
創建動態化工程
Dart |
dynamic_project_name: 動態化工程名
創建載體工程
Dart |
carrier_project_name: 載體工程名
3.2 模板插件
下載 Fair 模板插件，可以通過 idea 直接選擇模板頁面進行二次開發。
3.3 熱更新平臺
提供了開源的遠程更新平臺，可以在構建后自動上傳編譯產物，進行云端更新。
熱更新平臺所有代碼也已開源，全部使用 dart 進行開發，具體原理實現可推薦閱讀：Flutter + Dart 三端一體化動態化平臺實踐
4 Fair 落地實踐
Fair 目前在 58 同城內部已經有 10 多個 App 使用，覆蓋不同的業務場景。無論是整頁動態化還是卡片動態化都可以完美支持。
同時還開源了組件庫，提供常用的列表、導航等組件的動態化實現，降低開發成本。
動態化后的頁面和原生頁面沒有明顯區別。
在性能方面，Fair 對性能影響很小，接入前后平均幀率無影響。由于解析和引擎的影響，內存和啟動時間方面會略有增加，但在可接受范圍內。
具體使用和實踐可參考：Flutter 熱更新 Fair 真。體驗
5 總結與規劃
Fair 為 Flutter 提供了動態化能力，可以極大降低 Flutter 的發布成本。同時還提供了一整套從開發到發布的解決方案。
未來計劃會繼續完善組件庫，增加對 Flutter 狀態管理框架的支持，讓 Fair 更加簡單、穩定。
歡迎大家使用 Fair，也歡迎大家為我們點亮 star
Github 地址：github.com/wuba/fair
Fair 官網：fair.58.com
