1.3　Flutter家族

前面幾節介紹了與Flutter相關的很多概念。本節主要討論谷歌為什么在Flutter上使用Dart語言，Material Design為什么能應用在大多數的移動應用界面的設計上，以及Fuchsia、Flutter Web。

1.3.1　Dart

在介紹Dart之前，先講一個故事。

有一天，谷歌跨平臺部門的一個開發者Tom為了解決當下React Native等JavaScript跨平臺框架所帶來的問題而絞盡腦汁，當想到用自繪引擎來實現脫離原生平臺渲染的方案時，他興奮不已。“這種方案可能會改變當下移動開發的方向啊！”他心里暗暗自喜。為了醞釀情緒并與同事們分享這個想法時，他來到了樓下的咖啡廳喝咖啡，轉念又想：“那這個技術要用什么語言呢？”就在這時，隔壁Dart部門的同事Jack過來打了一個招呼：“就用Dart吧！”

上面的故事純屬虛構，甚至有種調侃的意思。因為Flutter在國內火爆的時候Dart這門語言并不被我們熟悉，很多開發者不是很理解谷歌為什么要選擇Dart而不是JavaScript作為它的開發語言，而且他們不是很喜歡Dart語言本身的語法。那谷歌真的僅僅是為了“扶持隔壁部門”而選擇了Dart語言了嗎？答案顯然不是。下面列舉了Flutter選擇Dart作為開發語言的部分原因。

• Dart運行在Dart 虛擬機（Virtual Machine，VM）上，但也可以編譯為直接在硬件上運行的ARM代碼。
• Dart同時支持預（Ahead Of Time，AOT）編譯和運行時（Just-In-Time，JIT）編譯兩種編譯方式，可以同時提高開發和執行應用程序的效率。
• Dart可以使用隔離（isolate）實現多線程。如果沒有共享內存，則可以實現快速無鎖分配。
• Dart虛擬機采用了分代垃圾回收方案，適用于UI框架中產生大量的組件對象的創建和銷毀。
• 當為創建的對象分配內存時，Dart使用指針在現有的堆上移動，可以確保內存的線性增長，從而節省了查找可用內存的時間。

Dart還有其他各種優勢。例如，當使用Dart編寫應用程序時，不在需要將布局代碼與邏輯代碼分離而又引入xml、JSX這類模板和布局文件。下面是使用Dart編寫組件的一個例子。

new Center(
  child: new Text('Hello, World!'),
)

即使還沒有Dart語言的基礎，你也清楚以上代碼的意思，這里在Center組件中放了一個Text組件。而在Dart 2中，又添加了另一個使Dart語言使用起來更方便的特性，就是完全可以省去new、const等關鍵詞。例如，上面的代碼可修改為以下形式。

Center(
  child: Text('Hello, World!'),
)

第2章會介紹Dart語言的具體用法。相信讀者深入學習Dart之后一定會更喜歡這門語言。

提示：

Dart語言同時支持AOT和JIT兩種編譯方式，而目前主流的語言大多只支持其中一種編譯方式，如C僅支持AOT編譯方式，JavaScript僅支持JIT編譯方式。

一般來說，靜態語言會使用AOT編譯方式。在AOT編譯方式下，編譯器必須在執行代碼前直接將代碼編譯成機器的原生代碼，這樣在程序運行時就不需要做其他額外的操作而能夠直接快速地執行，它帶來的不便就是編譯時需要區分用戶機器的架構，生成不同架構的二進制代碼。而JIT編譯方式通常適用于動態語言。在JIT編譯方式下，程序運行前不需要編譯代碼而在運行時動態編譯，不用考慮用戶的機器是什么架構，為應用的用戶提供豐富而動態的內容。雖然JIT編譯方式縮短了開發周期，但是可能導致程序執行速度更慢。

Dart語言同時使用了以上兩種編譯方式，這一點為它能應用在Flutter中提供了顯著的優勢。在調試模式下，Dart使用JIT編譯方式 ，編譯器速度特別快，這使Flutter開發中支持熱加載的功能。在發布模式下，Dart使用AOT編譯方式，這樣就能夠大大提高應用運行速度。因此，借助先進的工具和編譯器，Dart具有更多的優勢——極快的開發周期和執行速度以及極短的啟動時間。

1.3.2　Material Design

熟悉Android開發的讀者相信已經對Material Design有或多或少的了解，它是谷歌推出的一套視覺設計語言。谷歌有全世界頂尖的設計工程師，他們通過定義一系列設計原則，從而使得應用的顏色選擇與搭配、界面排版、動畫、交互方式、組件大小與間距等在用戶界面（User Interface，UI）呈現上實現了相對統一。

Flutter提供了大量該風格的組件，我們可以按照目前已經提出的Material Design原則創建用戶界面。這種方式大大地降低了開發者美化用戶界面的工作量，用最簡單的話來概括就是，我們可以用最少的工作量做出最好看的UI。其實，在Android最早推出的很長一段時間里，界面風格一直是用戶吐槽的很大一方面，用戶永遠不會喜歡使用交互體驗差勁的應用，谷歌在Material Design上花了很多工夫，這也是Android甚至谷歌所有的平臺在UI方面的里程碑。

在Flutter引入Material Design的另外一個很重要的原因是它能夠使應用風格趨于統一。我們可以在整個Flutter應用甚至不同的應用中只使用一整套的Material Design風格。同時，為了防止出現大部分應用的UI出現雷同的情況，Flutter團隊一直致力于給開發者自定義獨特的樣式（如圓角角度、陰影厚度、主題顏色等參數）提供更多的接口。Flutter的每次更新總會對Material Design提供更多的支持。

1.3.3　Fuchsia

Flutter能激發很多開發者的興趣的一個原因是，它可能將作為谷歌此后將推出的新系統Fuchsia的原生開發方式。

早在谷歌剛剛開源Fuchsia的部分代碼之后，很多感興趣的“有識之士”就深究了這個可能取代Android的下一代移動操作系統。Fuchsia與之前各類操作系統都有較大的不同。其一，Fuchsia底層并沒有使用與Android一樣的Linux內核，而使用谷歌自研發的Zircon；其二，Fuchsia在頂層Topaz中明顯地支持使用Flutter與Dart來開發應用。Fuchsia OS的分層架構見圖1.4。

圖1.4　Fuchsia OS的分層架構

當被問及為什么要學習一門技術的時候，人們可能會說這門技術在未來會很有前景。當將這句話應用在Flutter上時，我們可以說Flutter將是下一代操作系統應用的原生開發方式，我們現在使用Flutter開發的應用可能就是新操作系統上的應用，想想就很激動。

1.3.4　Flutter Web

在2018年的Flutter Live大會上，谷歌給Flutter指派了另一項令人興奮的任務——踏入Web開發領域，并在谷歌2019開發者大會上正式發布了Flutter for Web預覽版，這一點已經完完全全地體現了Flutter在跨平臺方向上的目標。在撰寫本書時，Flutter已經可以同時作為移動端、Web端、桌面端的開發方式了。

其實從誕生之初，就希望Dart具有編譯JavaScript的功能。現在許多重要的應用都是從Dart編譯為JavaScript并在生產環境中運行的。為了能使Flutter運行Web應用，Flutter在標準瀏覽器API上使用Dart實現核心Painting層，這使得Flutter Web依然可以保留之前框架層的內容。Flutter Web的架構如圖1.5所示。

圖1.5　Flutter Web的架構

本書并不會討論Flutter如何實現Web技術方面的細節，但Flutter在很大程度上將會使UI的開發方式變得統一，并且可以使用相同的代碼使應用直接運行在Web瀏覽器中。我們可以驕傲地對其他人說：“一次編寫，到處運行。”