前言
JDFlutter 是商城共享技術部-多端融合技術部推出的新一代跨平臺開發框架，可快速集成至現有 Android/iOS 工程，開發者可藉助 JDFlutter 平臺快速完成 Flutter 業務開發。JDFlutter 平臺提供了大多數京東樣式 UI 組件庫以及豐富的原生 API，可滿足複雜業務需求。未來 JDFlutter 會和 JDReact 一起構成京東 ARES 跨端應用開發平臺的雙引擎！
Flutter 簡介
Flutter 是 Google 公司2018年2月27日發佈的第一個開源跨平臺軟件開發工具包 （SDK），支持Android、iOS兩個平臺，可實現高性能、高保真的應用程序開發。開發者藉助 Flutter 開發平臺可輕鬆實現自己的應用，其開發框架默認支持了 Material（類似 Google 設計風格）和 Cupertion（類似 iOS 設計風格）兩種風格，且無論從UI樣式、用戶體驗上都非常接近原生應用。經過近7個月的優化改進2018年9月19日 Google 公司在上海正式發佈非常接近1.0正式版本的 Flutter Release Preview 2，基於其優越性能 Flutter 有望成爲未來應用開發的主流工具。
Flutter 類似且優於 Html、React Native、Weex 等跨平臺解決方案。ReactNative 將 JSX 生成的代碼最終都渲染成原生組件，JS 與原生通過 JSBridge 傳遞數據。而 Flutter 則採用完全不同的設計，底層是一套獨立的渲染引擎--Skia，所有組件也都是獨立於平臺的 Widget 組件，可以在最大程度上保證了跨平臺體驗的一致性。
京東目前已經有非常成熟的跨平臺解決方案 JDReact，如何在 JDReact 與 Flutter 中選擇合適的開發方案？我們認爲如果是需要進行線上業務包升級、熱修復等動態更新的情況，優先選擇 JDReact；沒有動態更新需求的可以選擇 Flutter。
目前閒魚 APP 和美團 APP 已在部分頁面嘗試接入 Flutter，根據公開的信息我們對比了三家 Flutter 方案：
集成與調試
1Flutter包集成
現階段如要開發一個全新的 App，Flutter 是個很好的選擇，作爲新一代跨平臺解決方案，使用 Flutter 官方提供的創建腳本、創建工具即可開發完成。然而在大多數情況下，我們面臨的是現有 APP 已上線很久，新的頁面或者部分頁面的改造需要嘗試去使用 Flutter 開發，在這種情況下，我們需要創建一個 Flutter 模塊，用於完成 Flutter 頁面開發，併爲現有 APP 作爲宿主工程添加對 Flutter 模塊的依賴。
兼顧到不需要 Flutter 開發環境的同事，我們對編譯腳本進行了修改：
▲編譯開發環境配置
Flutter 開發需要在本地配置完整的開發 SDK，並增加 jdFlutter.debug 標誌，如果開發人員不是做 Flutter 開發的就不用設置此標誌，如果是開發 Flutter 的研發則需要配置一下此標誌進行本地代碼開發。通過這樣的方式，可以做到 Flutter 開發不影響現有工程的編譯。Flutter 業務代碼採用 git submodule 的方式進行代碼管理，Android、ios 工程僅需設置好對Flutter的依賴即可。
▲git 庫管理
2JDFlutter 設計框架
▲JDFlutter 架構圖
最底層提供了灰度、降級容災、數據統計等功能，這些功能都統一接入後臺管理系統。
中間層爲核心開發包：JDFlutter-core-widgets 爲 JDFlutter UI 組件庫，樣式等都滿足了京東設計規範，目前支持了 Button、CheckBox、Dialog、mage、Loading、NavgationBar、Text、PullToRefresh 等。Flutter 框架內集成了兩種風格的 UI 組件庫：一種是 Google Material 設計風格，另一種爲 Apple Cupertion 設計風格。這兩種設計風格可以很好滿足開發者對樣式的需求，與原生頁面無異。然而當集成到京東客戶端時，這些樣式並不能滿足需求，因此我們提供了適合手機京東（京東 APP）的 UI 組件庫（不斷完善中）。
JDFlutter-core-lib 爲 Dart 與原生之間通信的橋樑，我們提供了原生接口，如：網絡請求 JDNetwork、設備相關 JDDevice、頁面跳轉 JDJumping、埋點 JDMta、分享 JDShare、異常上報 JDReporter 等。
最上層爲接入層，包含了業務開發集成、Android/iOS 兩端客戶端的集成。
▲JDFlutter 提供的組件庫和 API demo
3打通 JDReact Native API
在 Flutter 之前，京東已有了非常成熟穩定的跨平臺開發解決方案 JDReact。在 JDReact 框架中，已經封裝了非常多的 Native API，通過 JSBridge 傳遞原生與 JS 之間的數據。
爲使 Flutter 具備衆多京東 App Native API 訪問能力，有以下辦法：
- 按照官方 platform channels（https://Flutter.io/platform-channels/）寫法，封裝 Flutter Api；
- 按照 Plugin 的方式，將每一個 Native API 寫成 plugin；
- 全部複用 JDReact 已有 Native API。
目前 JDReact 提供的 Native API 有上百個，並且都經過了嚴格的測試。如果按照前兩種方式，想要逐漸對標 JDReact native 能力，工作量將會變的很大，且需要大量的測試工作。因此我們採取了最後一種方式，全部複用現有 JDReact Native API：通過定義統一接口的方式，對原有 JDReact 框架進行了改造，如下圖爲改造後的框架架構圖：
▲JDFlutter 複用 JDReact API 框架
Adapter 層中 Native 代碼分別實現了 React Native 與 Flutter 對應接口，JDReact 通過 JSBridge 將 Native API 暴露給 JS，JDFlutter 通過 MethodChannel 將 Native API 暴露給 Dart。爲了後續的開發方便，我們分別在 JS 與 Dart 側進行了二次封裝，保證了在無需知曉原生實現的情況下可以順利的進行業務開發。
4業務集成
目前 Flutter 業務包集成還不支持類似 JDReact 拆分打包--不同的業務自己打自己的，相同的 lib 部分不打進去的分包機制，解決辦法是將所有業務都打成一個包，解析原生傳遞的路由及跳轉參數信息，由內部路由決定跳轉邏輯。
▲業務路由與參數傳遞
main.dart 爲主入口，接受原生傳遞的跳轉協議，進行參數解析，並決定業務路由，進行路由分發，同時將跳轉參數 params 傳遞至各業務入口。
▲業務集成目錄
爲了實現業務包的線上集成，所有的業務代碼都位於 lib 目錄下。同時爲保證不同開發者之間互不影響，每個業務都在 lib 目錄下單獨管理，相應的與自身業務相關的圖片資源也獨立管理。assets 文件夾存放的是公共資源，不同的業務都可直接引用位於該目錄下的資源。
5調試
很多開發 JDReact 的小夥伴都是前端開發對 Android/iOS 原生 APP 有可能不熟悉。爲了開發與調試的方便我們在 MarsWorks 後臺增加了 JDFlutter 調試功能，如下圖：
▲開發調試 IDE
Flutter 業務開發只需要在手機上安裝好我們提供的 apk 安裝包，手機連接電腦後，點擊“啓動 Flutter 調試”綁定手機，修改代碼後點擊“Reload”按鈕即可實現 Flutter 熱加載。
未來我們會增加對 ios 模擬器的支持，點擊“啓動 Flutter 調試”即可啓動模擬器直接跳轉到對應的頁面。
6Demo 演示
這是手機京東使用 JDFlutter 改造的簽到排行榜頁面，頁面原先使用 JDReact 實現。改造後的頁面操作很流暢，整體的用戶體驗非常接近原生，幾乎很難分辨是用原生還是 Flutter 實現。接下來逐步會有更多的頁面、場景來嘗試使用 JDFlutter。
▲JDFlutter 簽到排行榜
數據統計
JDFlutter 對線上數據進行統計主要包括業務數據和異常數據，無論是哪一方面的數據出現異常，都要及時採取措施。
1業務數據統計
業務數據主要包含業務的 DAU、UV、PV 等基礎數據，有以下方案可以統計：
▲數據統計
方案1：在原生跳轉入口處增加埋點。
方案2：在Flutter入口main路由中增加頁面埋點。
方案3：在Flutter業務頁面中增加埋點。
以上3種方法都可以統計出頁面數據，方案1可以統計出入口的數據，方案2可以統計出除降級以外的業務數據，方案3可以統計出更精確的業務數據，同時可以提供更詳細的其他字段如進入頁面時從後臺下發的數據。
JDFlutter 框架已經默認支持了方案1和方案2兩種數據統計，對這兩種數據進行分析不僅可以看出降級率，也可以看到 JDFlutter 頁面啓動情況；第3種方式的數據需要接入的業務根據需要完成添加。
2異常數據監控
業務上線後會遇到各種各樣的問題，異常收集與分析就顯得尤爲重要。我們通過收集以下幾種異常來對異常進行分析：
▲異常監控
後臺收集到的異常爲了能夠更好的分析是哪一塊業務代碼出現問題，我們在異常數據中加入了業務名稱，以及跳轉時的參數信息，可以做到有針對性的對 dart 代碼的異常進行分析，如果某個業務異常量暴增，我們會對其進行降級處理。
降級容災
▲JDFlutter 業務降級容災圖
其中降級容災池數據由後臺下發，包含每一個線上業務的降級情況，這其中包括：JDFlutter 業務名稱，對應業務的 JDReact 名稱，以及該 JDReact 業務的降級 h5 url。降級的過程爲：從降級容災池中取出與之對應的 JDReact 業務名，判斷是否可以對該 Flutter 業務降級至 JDReact 業務。
- 若JDReact業務可用，降級至JDReact業務
- 若JDReact業務不可用且有h5降級頁，則降級至h5頁面
- 若JDReact業務不可用且無h5降級頁，JDFlutter統一錯誤頁
- 若無JDReact業務可降級且有h5降級頁，降級至h5頁
- 其他情況，統一顯示JDFlutter統一錯誤頁
以上的降級容災圖包含了所有可能的異常。這裏值得一提的是爲什麼我們首先降級至 JDReact：由於我們目前 JDReact 的業務接入已有140多個，可能對這些業務部分優先嚐試使用 JDFlutter，爲了避免線上會遇到的各種問題，我們首先將其降級至原來的 JDReact 頁面不僅可以保證業務的正常運行，用戶體驗也可以得到保證。
對未來的展望
目前 JDReact 多端融合平臺仍然是京東 APP 主要的跨平臺開發方案，京東內部接入 JDReact 的 App 有十幾個，接入的 JDReact 業務已有140多個，未來會有更多的 JDReact 業務接入。JDFlutter 作爲我們接入的第二個跨平臺引擎，將來會不斷有新業務接入，會有更多新場景使用 JDFlutter 實現。
未來我們會繼續完善 JDFlutter 這個新一代的跨平臺開發方案，將多端融合平臺打造成一個具備 ReactNative 和 Flutter 雙引擎開發的平臺。
參考文獻：
[1]:https://Flutter.io/
[2]:https://facebook.github.io/react-native/
[3]:https://skia.org/index_zh
[4]:http://m4.jd.com/
名詞解釋
JSX：是 react native 的語法格式
JSBridge：原生與 js 之間通過 jsbridge 傳遞數據
Skia：Flutter 的渲染引擎
Widget：是 Flutter 組件
橋接：就是原生與 Flutter 之間通信的橋樑
分包機制：就是把不同的業務自己打自己的，相同的 lib 部分不打進去
Native Api 能力：就是 Flutter 可以調用京東 App 原生方法的能力
Plugin：是 FLutter 原生與 dart 通信的一種方式，還有一種是 methodchannel
------------------END-----------------