【一探究竟】Flutter到底是什麼?

二娃_發表於2019-09-21

起源

我們從官網的介紹開始說起。

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Flutter 是 Google 的 UI 工具包,用於從單個程式碼庫構建漂亮的、本地編譯的移動、web 和桌面應用程式。

所以正如我們(看了很多網上的文章後)所知,Flutter是一個開源的、跨平臺的UI框架,用它開發的應用程式都具有高保真度高效能表現

但也許我們不知道或不太明白的是:

  1. 到底什麼是UI框架?
  2. 到底什麼是高保真度
  3. 到底什麼是高效能表現
  4. Flutter是如何做到跨平臺的?
  5. Flutter是如何做到高保真度的?
  6. Flutter是如何做到高效能表現的?

以上問題我們將各個擊破,不過在開始前我們先插播一段Flutter背景簡介~

Flutter背景簡介

Flutter的前身是 Google 內部孵化的Sky專案,於2014年10月在 GitHub 上開源一年後,於2015年10月正式更名為Flutter

Flutter是眾多跨平臺框架中的一個,其不同之處在於採用了自繪UI+原生的實現方案,相比於H5+原生JavaScript開發+原生渲染類的方案,這是一種更為徹底的方案,並且它天生具備兩大優點:

  1. 在不同平臺的 UI 表現可做到高保真度、高一致性
  2. 繪製 UI 的效能和原生控制元件接近

Flutter的目標在於做全平臺!開發者只需使用同一套基準程式碼,便可為移動平臺、桌面端和網頁端開發應用。而目前來看Flutter所支援或將支援的平臺已經有 AndroidiOSFuchsiaChrome OS,另外我認為未來支援鴻蒙OS(一款讓我們引以為傲的作業系統)也必將是件水到渠成的事~

更多背景相關知識我在拜讀的文章中貼出了連結,大家可自行食用。

到底什麼是UI框架?

我們把UI框架拆開,分別來做解釋。

UIUser Interface的縮寫,是使用者介面的意思,但在我們軟體領域普遍的認識裡,UI設計實際是指軟體的人機互動、操作邏輯、介面美觀性的整體設計,所以UI就是指軟體的互動操作和視覺效果

框架在百度百科上的釋義如下(大家感受下):

框架(framework)是一個框子——指其約束性,也是一個架子——指其支撐性。是一個基本概念上的結構,用於去解決或者處理複雜的問題。

而在我們軟體領域,框架可以理解為是一個用來開發軟體的工具包,它已處理好了通用的、基礎性的工作,並且制定好了使用規則

所以總結一下,UI框架就是指用來開發軟體的工具包,且該軟體可以帶有互動操作和美觀的視覺效果

到底什麼是高保真度?

(這詞乍一看怪嚇人的,讓人頭皮發麻,萌生吐意?,誰叫我不是廈大的呢?)

高保真是聲音技術領域的專業術語,是指與原來的聲音高度相似的重放聲音。

但在我們軟體領域,高保真度其實就是高還原度的意思,旨在可以畫素級還原UI稿的互動與視覺效果。

到底什麼是高效能表現?

(以下說起效能的時候,都指的是在軟體開發領域~)

效能是個司空見慣的詞,但效能到底是什麼意思呢?可能在我們心中是既知道又說不清楚的含糊狀態。

效能的英文是Performance,它也有表現、工作情況的意思。

當說起效能的時候,我們都能聯想起一些關鍵詞,比如:啟動速度、記憶體使用優化、佈局優化、電量優化、包瘦身等等。

所以綜上可以感受出來,效能是一個軟體多維度指標表現情況的代名詞,高效能表現就是指軟體各項指標都表現優異。(該快的快、該少的少、該大的大?、該小的小)

Flutter是如何做到跨平臺的?

Flutter官方分層架構圖

這裡搬出Flutter官方分層架構圖,在大的層次上,從上到下依次分為如下三層(可以看出 Framework 層內部又會分層):

  • Framework框架層:一個純Dart實現的SDK(一套基礎庫),負責 UI 相關的事情,如:動畫、widget、繪圖、手勢、基礎能力等。(我們的應用就是圍繞這層來構建的)
    • 在該層內部 Foundation 和 Animation、Painting、Gestures 對應的是 Flutter 中的dart:ui 包,它是 Flutter 引擎暴露的底層 UI 庫,用來提供動畫、手勢及繪製等能力。
  • Engine引擎層:一個純C++實現的SDK,主要包括 Skia 引擎(開源的二點陣圖形庫)、Dart 執行時、GC垃圾回收、編譯模式支援、Text 文字排版引擎等。
  • Embedder嵌入器層:見名知意是將 Flutter 移植到各平臺的中間層程式碼,做好這一層的適配 Flutter 基本可以嵌入到任何平臺上去。它主要包括渲染Surface設定、原生平臺外掛、打包、執行緒管理、事件迴圈互動操作等。

所以可以看出在設計上Embedder層要做的工作就是隔離並適配不同平臺的差異,保證對上層暴露統一的API,以此來達到跨平臺的目的。無論現在的AndroidiOS還是未來的Fuchsia鴻蒙OS,亦或是其他嵌入式作業系統(比如樹莓派上的系統 Raspbian ),理論上 Flutter 都是可以上去的?。

以上是針對跨作業系統而言的,在最近剛發步的 Flutter 1.9 中Flutter for web的支援雖然還處於預覽版,但 flutter_web 這個 repo 已經合併到了 flutter 的主 repo,這也是一個重要的里程碑了。那麼Flutter是如何做到支援Web的呢?

【一探究竟】Flutter到底是什麼?

如架構圖所示,Framework 層在移動和 web 平臺是共享的,當然為了支援 web ,官方對dart:ui庫做了新的適配。然後便是使用基於 DOM、Canvas 和 CSS 的程式碼替換了移動平臺上 Skia 實現的引擎層,當我們為 Web 平臺編譯 Flutter 程式碼時,應用、Flutter 框架、以及 Web 版本的 dart:ui 庫都將編譯為 JavaScript ,可以執行在任何現代瀏覽器上。

Flutter是如何做到高保真度的?

根據前文這個問題可以轉化為:Flutter是如何做到可以畫素級還原UI稿的互動與視覺效果的?

這點首先得益於選擇了自繪UI的技術方向,基於這個方向 Flutter 在 Engine 層使用了跨平臺自繪引擎Skia文字排版引擎來做底層渲染(或是for web 的引擎程式碼),在 Framework 層構建了一整套自己的UI系統,而不依賴任何原生的控制元件。如此一來,佈局、動畫、手勢、繪製等全權盡在掌控之中,要做到高保真也就手到擒來了。

下面引用《Flutter 實戰》一書中,關於 Skia 的一段描述:

Flutter使用Skia作為其2D渲染引擎,Skia是Google的一個2D圖形處理函式庫,包含字型、座標轉換,以及點陣圖都有高效能且簡潔的表現,Skia是跨平臺的,並提供了非常友好的API,目前Google Chrome瀏覽器和Android均採用Skia作為其繪圖引擎。

Flutter是如何做到高效能表現的?

首先高或低是個相對的概念,而 Flutter 的高效能來自於兩個比較:

以下兩點引用自《Flutter 實戰》一書

  1. Flutter APP 採用 Dart 語言開發。Dart 在 JIT(即時編譯)模式下,速度與 JavaScript 基本持平。但是 Dart 支援 AOT,當以 AOT 模式執行時,JavaScript 便遠遠追不上了。速度的提升對高幀率下的檢視資料計算很有幫助。
  2. Flutter 使用自己的渲染引擎來繪製 UI ,佈局資料等由 Dart 語言直接控制,所以在佈局過程中不需要像 RN 那樣要在 JavaScript 和 Native 之間通訊,這在一些滑動和拖動的場景下具有明顯優勢,因為在滑動和拖動過程往往都會引起佈局發生變化,所以 JavaScript 需要和 Native 之間不停的同步佈局資訊,這和在瀏覽器中要 JavaScript 頻繁操作 DOM 所帶來的問題是相同的,都會帶來比較可觀的效能開銷。

文末

所以綜上所述,Flutter 到底是什麼呢?在我看來,它將是終端開發的未來

個人能力有限,如有不正之處歡迎大家批評指出,我會虛心接受並第一時間修改,以不誤導大家

拜讀的文章

我的其它文章

相關文章