[讀書筆記 Flutter 實戰 002] Flutter 簡介


Posted by PGYW on 2021-04-27

Flutter 簡介

Flutter 是 Google 開發的跨平臺開源UI框架,自2015年4月發表至今,已支援 Android、iOS、Windows、Mac、Linux、Google Fuchsia開發應用。

跨平台自繪引擎

Flutter 透過自己的自繪引擎,能夠保證多平台上的 UI 一致性,也能避免對原生元件依賴而帶來的限制與高昂的維護成本。Flutter 引擎主要使用 C++ 開發,以 Google 的 Skia 圖形庫提供底層彩現支援。Skia 為 2D 圖形處理函式庫,包含自行、座標轉換以及點陣圖都有高校的表現,目前 Google Chrome 與 Android 都是採用 Skia 作為繪圖引擎。

相較於 JavaScript 的高效能

Flutter 採用 Dart 語言開發,Dart 在 JIT 模式下,速度與 JavaScript 相同。但是 Dart 還有 AOT 模式,在 AOT 模式下,JavaScript 就遠遠跟不上了。速度的提升對高幀率的畫面計算很有幫助。另外,Flutter 使用自己的渲染引擎來繪製 UI,佈局數據都由 Dart 語言直接控制,所以在佈局上不需要像 Reactive Native 那樣,要在 JavaScript 和 原生元件間通信,這樣在滑動或拖移的場景下明顯有優勢,因為滑動與拖動的狀況下,都要重新佈局,JavaScript 必須不定的跟原生不同步佈局,效能不足。

Flutter 為何選擇 Dart

在說明 Google 選擇 Dart 之前需要先了解 JIT 與 AOT 概念。

JIT(Just-in-time)

動態編譯:一句句邊翻譯邊執行。這類的代表有 JavaScript 與 Python 等。

AOT(Ahead of time)

靜態編譯:在程式執行前全被翻譯成機器碼。這類的代表為C/C++ 開發的應用程式。

支援 AOT 與 JIT 模式

這類的代表有 Java 與 Python,他們可以在第一次執行時編譯城中間碼,在之後執行時直接執行 ByteCode,雖然 ByteCode不是機器碼,執行時仍需要動態的將 ByteCode 轉為機器碼。

官方說明(以 JavaScript 為比較基礎)

開發效率高

Dart 執行時和編譯器支援的 Flutter 的兩個關鍵特性的組合:

  • 基於 JIT 的快速開發週期:開發階段 Flutter 開發階段採用 JIT 模式,這樣就避免每次改動都要重新編譯,節省了開發時間。
  • 基於 AOT 的執行檔:Flutter 在發布時可以透過 AOT 生成高效的 ARM 以保證 App 的效能。JavaScript 不具有這個能力。
    #### 高效能
    Flutter 提供流暢、高保真的 UI 體驗。相較於JavaScript,由於 Dart 支援 AOT,而 JavaScript 則無,就這點而言,能夠提供更好的效能。
    #### 快速 Memory 分配
    Flutter 使用 函數式響應式編程(FRP) 使得他有很大的程度依賴底層的 Memory Allocator。因此有一個厲害的 Memory Allocator 就顯得十分重要。Chrome 的 JavaScript 引擎做得很好,Dart 開發團隊大多都是 Chrome 團隊來的,因此 Memory 分配並不能作為超越 JavaScript 的優勢。
    #### type-safe
    Dart 是 type-safe 的語言,在編譯之前就可以發現一些 type 的錯誤,提前排除問題。JavaScript 是弱型別的語言在執行時,發生錯誤才會發現問題,擁有淺在的危險。也因此,有很多人為此開發檢查工具或是擴充語言。如TypeScript 語言。
    #### Dart 團隊與 Flutter 團隊密切合作
    兩團隊密切合作是很重要的!例如 Flutter 最初用 Dart 的時候,該語言並沒有提供生成二進制的工具,但現在 Dart 已經支援了,這是因為 Dart 團隊專門為了 Flutter 實作。

Flutter 結構

Flutter Framework

他是純 Dart 實現的 SDK。

底下兩層 (Foundation和Animation、Painting、Gestures)

他對應 package 的是 dart:ui,他是Flutter 的底層 UI package,提供動畫、手勢及繪圖

Rendering

這層依賴於 Dart UI,他會先建構一個 UI Tree,當 UI Tree 有變化時,會計算出有變化的部分,然後更新 UI Tree,最終將 UI Tree 繪製到螢幕上M這個過程類似於 React 中的 Virtual DOM。
Rendering層可說是 Flutter UI 框架最核心的部分,他除了確定每個 UI 元素的位置、大小之外還要進行座標轉換、繪製(呼叫底層 dart:ui )!

Widgets

是基礎組建 packages,Flutter還提供了 Material 和Cupertino 兩大視覺風格的組件 package。

Flutter Engine

這是由 C++ 實作的 SDK,包含 Skia 引擎、Dart、文字排版引擎等。在呼叫 dart:ui 時,最後都會呼叫到 Engine 層,然後實現真正的繪製邏輯。

Flutter 學習資源

  1. 官網:Flutter 有非常豐富的教學資源。
  2. Gallery:是Flutter 官方做的範例 App。
  3. StackOverflow:有問題就在上面查詢吧!
  4. Flutter中文网社区:https://flutterchina.club

《Flutter实战》电子书 - 第一章:起步 - 1.2 初识Flutter

Flutter技術簡介


#Flutter #iOS #Android







Related Posts

Markov Decision Process 的程式範例

Markov Decision Process 的程式範例

Day 167

Day 167

CSS 預處理器

CSS 預處理器


Comments