Google 爲何以 Flutter 做爲原生突破口

Android 的前生今世

Android 系統

Android 系統做爲全球第一大系統，基於 Java 開發的移動端有着諸多的性能優點。 2018年前 H5 的性能瓶頸和 react-native 的一系列缺點(動畫性能、第三方依賴、邏輯上的額外開銷、調試的困難、不能徹底屏蔽原平生臺 等)致使業界對跨平臺開發失去信心。 直到 2018 年 10 月 Google 推出首個 Flutter 跨平臺解決方案，打破整個移動開發的方向。

爲何 Flutter 成爲 Android 方向標

1. 跨平臺性: Flutter 基於圖像繪製引擎進行渲染，在不一樣平臺下繪製效果是絕對一致的，能作到真正的跨平臺，一處寫到處運行
2. 性能優異性: 不一樣於 H5 經過 DOM 渲染 和 RN 映射組件，Flutter 直接基於 native 進行繪製。性能上徹底超過原生
3. 熱重載性: Android 原生開發 會遇到 編譯-打包-安裝 三部曲。開發效率遲遲得不到提高。熱重載技術在 Flutter 內完美體現

Flutter 詳細介紹

1. Dart 語法編譯: Dart 是一種強類型、跨平臺的客戶端開發語言。具備專門爲客戶端優化、高生產力、快速高效、可移植易學的風格。Dart 主要由 Google 負責開發和維護
2. Flutter 插件: Flutter 使用的 Dart 語言沒法直接調用 Android 系統提供的 Java 接口，這時就須要使用插件來實現中轉。Flutter 官方提供了豐富的原生接口封裝

Flutter 系統結構

Skia 圖像處理引擎

1. 2005 年 Skia 圖像處理引擎成立，用來展現 Chrome 火狐 和其餘 Google 自家的產品使用。
2. 2007 年 第一個 Android 系統問世，因而 Google 開發者將 Skia 移植到 Android 平臺。
3. Skia 做爲一個 2D 的圖形系統，包括繪圖，渲染，顯示圖片都是用 Skia 完成。

原生開發會接觸 SKia 嗎？

Skia 引擎詳解

• 疑問： 是真的嗎？我只接觸過 Bitmap,原來 Bitmap 下面還有不少奧祕

  

  

  

Skia 引擎與 Flutter 有什麼關係勒？

• 除了經過 xml 方式定義佈局 或者繼承View 顯示在 Android 屏幕外還有沒有方法呢？

爲何 Flutter 會實現三大特性

跨平臺

性能優異

渲染流程

React 渲染與 Flutter 渲染相同點

React 渲染與 Flutter 渲染不一樣點

1. 繪製樹：ReactNative 基於 ReactShadow 的鏈式結構在內存中造成一個虛擬的 Dom 樹，Flutter 是經過引擎實現不一樣圖層的渲染方式。
2. 機制不同：ReactNative 最終被反射成原生控件，而 Flutter 是底層經過引擎直接渲染，不存在映射的說法。

Flutter 渲染

在 Flutter 界面渲染過程分爲三個階段：佈局、繪製、合成，佈局和繪製在 Flutter 框架中完成合成則交由引擎負責。

Flutter優點

• Flutter 橫空出世! 在 Flutter 的響應式框架中，控件樹中的控件直接經過可移植的圖形加速渲染引擎、⾼性能的本地 ARM 代碼進⾏繪製,再也不須要經過虛擬 DOM 或虛擬控件、真實 DOM 或平臺控件這些中間對象來繪製。Flutter 響應式框架經過「⽆中間商賺差價」的⽅式直接利⽤硬件的全部性能，因此正如前⾯所說的，Flutter 應⽤的性能⽐原⽣ App 更加優秀。

我的看法

• 相對於幾大跨平臺框架，我的仍是很看好 Flutter 的。畢竟是 Google 的親兒子嘛，仍是能夠先入坑的，本身動手寫一個 Flutter APP 出來。在不一樣設備上跑一下，本身體驗一下。

計劃

後續我會推出從零開發一個完整的 Flutter 項目一系列文章, 把本身踩得坑記錄下來。

Flutter 系列文章

• Flutter (一) Dart 語言基礎詳解(變量、內置類型、函數、操做符、流程控制語句)
• Flutter (二) Dart 語言基礎詳解(異常,類,Mixin, 泛型,庫)
• Flutter (三) Dart 語言基礎詳解 (異步,生成器,隔離,元數據,註釋)
• Flutter (四) 基礎 Widgets、Material Components Widget 全面介紹

感謝

• Flutter 中文網