Flutter技術調研報告
Flutter是Google開發的一套全新的跨平臺、開源UI框架，支援iOS、Android系統開發，並且是未來新作業系統Fuchsia的預設開發套件。自從2017年5月釋出第一個版本以來，目前Flutter已經發布了近60個版本，並且在2018年12月初發布1.0穩定版。
在Flutter誕生之前，已經有許多跨平臺UI框架的方案，比如基於WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控制元件的React Native、Weex等。
Flutter與用於構建移動應用程式的其它大多數框架不同，因為Flutter既不使用WebView，也不使用作業系統的原生控制元件。Flutter使用Skia作為其2D渲染引擎。
注意：Android系統內建Skia,iOS系統未內建Skia，所以ios的包會比Android更大。
1.2.Flutter架構圖
- Flutter Framework：純 Dart實現的 SDK
- 底下兩層：底層UI庫，提供動畫、手勢及繪製能力
- Rendering層：構建UI樹，當UI樹有變化時，會計算出有變化的部分，然後更新UI樹，最終將UI樹繪製到螢幕上
- Widgets層：基礎元件庫，提供了 Material 和Cupertino兩種視覺風格的元件庫
- Flutter Engine：純 C++實現的 SDK
- Skia:渲染引擎
- Dart:Dart執行時
- Text:文字排版引擎
1.3.Flutter渲染機制
1.Flutter 佈局渲染的整體流程
在Flutter介面渲染過程分為三個階段：佈局、繪製、合成，佈局和繪製在Flutter框架中完成，合成則交由引擎負責。
新增合成圖層的理由：由於直接交付給 GPU 多圖層檢視資料是低效率的，可能會重複繪製，所以還需要進行一步圖層的合成，最後才交由引擎負責光柵化檢視
2.虛擬DOM技術
Widget樹：就是我們的UI元件樹，但這個只是一種描述資訊，渲染引擎是不認識的
RenderObject樹：這才是渲染引擎真的認識的，我們需要將 Widget 轉化為能用來渲染檢視的 Render Object
虛擬DOM解決了一個重要的矛盾：就是 DOM 操作的效能損耗與頻繁進行區域性 DOM 操作的矛盾
沒用虛擬DOM之前：DOM會在每一次元素更新到來之時渲染一次DOM
用了虛擬DOM之後：虛擬DOM會先彙總各個元素的更新情況，通過diff演算法計算出與原來 DOM 樹的差異，最後通過一次 DOM 更新解決
1.4.Flutter編譯機制
Flutter之所以採用Dart語言，其中很重要的一點就是因為Dart同時支援JIT和AOT兩種編譯方式
-
基於JIT的快速開發週期：Flutter在開發階段採用，採用JIT模式，這樣就避免了每次改動都要進行編譯，實現極大的節省了開發時間；
-
基於AOT的釋出包: Flutter在釋出時可以通過AOT生成高效的ARM程式碼以保證應用效能。而JavaScript則不具有這個能力。
- JIT，Just-in-time,動態(即時)編譯，邊執行邊編譯;
- AOT，Ahead Of Time，指執行前編譯;
1.5.Flutter專案結構
- android:android平臺相關程式碼
- ios:ios平臺相關程式碼
- lib:flutter相關程式碼，我們主要編寫的程式碼就在這個資料夾
- test:用於存放測試程式碼
- pubspec.yaml:配置檔案，一般存放一些第三方的依賴。主要是用Dart的pub包管理工具
1.6.目前已使用Flutter的團隊
- 美團
- 閒魚
- 騰訊NOW直播
- Github等國外大廠
2.本次調研的目標
2.1.打包成aar，整合到老Android專案
已完成，整合過程基本順利，除了一個assets裡面的icudtl.dat檔案，因為gradle指令碼 3.0以上的bug，需要自己手動複製到app的assets目錄下，其它的問題都不大。
2.2.整合grpc
已完成，Dart呼叫grpc請求的方式非常簡單，一行程式碼可以搞定，都不需要額外的封裝了