最近開始關注前端如何開發跨平台的App。有兩個名詞非常高頻的暴露在視野中，稍作調研，很快就被驚艷到了，那就是Dart語言和Flutter移動UI框架。這兩位新星來自於同一個爸爸，那就是Google。

下面簡單的介紹一下這兩位新星：

1、Dart

Dart亮相於2011年10月10至12日在丹麥奧爾胡斯舉行的GOTO大會上。可以用於web、伺服器、移動應用和物聯網等領域的開發。

Dart是一種面向對象的、類定義的、單繼承的語言，語法類似C語言，可以轉譯為JavaScript，支持介面(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type system。Dart編程語言在所有現代的瀏覽器和環境中提供高性能。目前最新的版本是2018年2月發布的Dart2。以下是來自官網的幾段代碼示例，我們可以先看看它的風格：（本人覺得前端熟悉了ES6，學習Dart沒有太大難度）

// Define a function.
printInteger(int aNumber) {
print(The number is $aNumber.); // Print to console.
}

// This is where the app starts executing.
main() {
var number = 42; // Declare and initialize a variable.
printInteger(number); // Call a function.
}

int fibonacci(int n) {
if (n == 0 || n == 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}

var result = fibonacci(20);

class Spacecraft {
String name;
DateTime launchDate;

// Constructor, with syntactic sugar for assignment to members.
Spacecraft(this.name, this.launchDate) {
// Initialization code goes here.
}

// Named constructor that forwards to the default one.
Spacecraft.unlaunched(String name) : this(name, null);

int get launchYear =>
launchDate?.year; // read-only non-final property

// Method.
void describe() {
print(Spacecraft: $name);
if (launchDate != null) {
int years =
DateTime.now().difference(launchDate).inDays ~/
365;
print(Launched: $launchYear ($years years ago));
} else {
print(Unlaunched);
}
}
}

var voyager = Spacecraft(Voyager I, DateTime(1977, 9, 5));
voyager.describe();

var voyager3 = Spacecraft.unlaunched(Voyager III);
voyager3.describe();

//Dart has single inheritance.
class Orbiter extends Spacecraft {
num altitude;
Orbiter(String name, DateTime launchDate, this.altitude)
: super(name, launchDate);
}

2、Flutter

Flutter是Google使用Dart語言開發的移動應用開發框架，使用Dart代碼構建高性能、高保真的混合移動應用（這樣你就可以編寫一份代碼，在 Android 和 iOS 都可以運行這個應用程序）。 最新的版本為Preview 1.0 。市面上已經有了很多跨平台解決方案， Xamarin、PhoneGap、Inoic、React Native 等等。我們有很多選擇，它們也各有一些優點和缺點。

相比較其他的，Flutter主要解決了移動開發中的兩個重要問題，一是原生應用程序的性能與平台的集成；二是提供多平台、可移植的UI工具包支持高效應用開發。另外，Flutter中UI組件和渲染器都從平台中集成到用戶的應用程序中，所以原來虛擬的控制項樹是真實的控制項樹，所以渲染和繪製的速度會很快，動畫發生在用戶空間中，開發人員也可以對其進行很多的控制。

除此之外，在以下方面Flutter也有優勢：

  • 響應式視圖，不需要JavaScript的橋接器
  • 性能更好，兼容性更好
  • 代碼將AOT編譯為本機(ARM)代碼
  • 美觀，可定製的UI組件，開發人員完全控制UI組件和布局
  • 強大的開發者工具，驚人的熱重新載入

以下是Flutter的一個開發示例圖：

Flutter熱重載

以下是用Flutter開發的應用示例圖：

3、Dart和Flutter的一些學習網站收集

  • Dart官方網站
  • Dart中文網
  • Flutter官方網站
  • Flutter中文網
  • Dart China社區
  • cnDart (社區已不活躍)
  • Flutter中文開發者論壇

推薦閱讀：

相关文章