Flutter 記錄 - Flutter 與跨平臺框架們的眾樂樂

路馬發表於2020-01-15

背景

跨平臺技術，不僅僅是指的當前移動裝置的平臺，絕大部分電腦語言都是跨平臺的,如 java， c/c++ 等等。而移動領域的跨平臺，則面臨了作業系統，裝置版本，裝置機型等各類問題。

為了解決不同作業系統終端開發一致性的問題，移動跨平臺技術逐漸興起，發展到今天，移動跨平臺技術在某些應用場景下已經逐漸變成一種主流的開發方式。於此同時，各種跨平臺技術框架更是滿天飛。

從一開始的 web app，到後來的 PWA ，Hybrid。在到後來的 PhoneGap（Cordova 前身）, 也有 web 技術結合 cordova 誕生的 ionic, Electron 框架等。

這些框架基於 h5 技術，在使用者體驗上和功能開發上有一定的侷限性，體驗效果也不盡如人意，便繼而出現了React Native, weex 等原生渲染類的跨平臺框架。他們通過對 ios、android 等平臺原生程式碼的封裝，藉助 Virtual DOM 針對不同的平臺進行編譯並輸出為對應原生平臺的 UI 元件，在使用者體驗上達到了接近原生開發效能體驗。

React-native，weex 似乎已經很好了，但是在編譯為不同作業系統 UI 的過程中，要耗費大量效能，不同的語言通訊過程中，又要耗費一部分效能。並且由於作業系統相同功能的 UI 元件在展示效果上可能不同，開發者可能還需要花費很多精力去做UI的適配工作及效能優化工作。諸多原因導致了開發一款高效能，優質體驗的App可能需要花費大量的時間去打磨，於是自繪 UI 便誕生了。

自繪 UI 通過在不同平臺間通過某種方式來渲染自己的 UI 元件，不去依賴原生的UI控制元件，從而保證了UI 體驗的一致性。通過使用 GPU 等渲染引擎，來提高系統執行流暢度，Flutter 便是跨平臺技術發展到今天使用自繪 UI 而開發出的一款高效能跨平臺的 UI 框架。Flutter 藉助其優秀的架構設計和前車之鑑，加持 google 大廠的光環和推廣，到目前為止 github 的已獲超過 85000 個star。

Flutter 簡述

flutter 是由谷歌公司於 2015 年推出的移動 UI 框架。其選用 Dart 作為開發語言，內建 Material Design 和 Cupertino 兩種設計風格 Widget 部件，使得它可以快速在 ios、android 裝置上構建高效、高品質、高流暢度的使用者 UI 介面。

Flutter 在系統架構上共分為三層：Framework層、Engine層、Embedder層，分別對應不同的功能模組：

Framework層：通過 Dart 語言實現，包含了對於安卓主推的 Material Design 和 iOS 系統主流的 Cupertino 風格。Framework 中包含了大量的模組如動畫、手勢等。Framework 用於支援日常應用開發過程中的各種功能，我們的開發也主要是針對 Framework 層進行的。
Engine層：該層由C/C++實現，主要包含了Flutter 通訊機制、Dart 虛擬機器、UI執行緒、GPU執行緒、渲染等。
Embedder層：該層主要用於作業系統的相關處理，如本地外掛、打包等。

通過執行 flutter --version 可以檢視當前 flutter 版本號及相關版本資訊：

Flutter 對比 React-native

Facebook也於2015年4月開源了跨平臺移動應用開發框架 React-native, RN 作為JS 框架 React 在移動平臺的衍生物，也支援多平臺快速開發。相比之下，RN 通過 JavaScriptCore 來作為 Javascript 的編譯環境，通過 React 生成 Virtual DOM 並使用 JS Engine 來解析 React 語法。在 JS 和原生程式碼之間，通過 JS bridges 來完成必要的通訊。

Flutter 在很多設計思想上參考了 React 的設計理念, 列如

宣告式UI

下面兩段程式碼分別展示了同樣的功能，在 Flutter 和 React-native 中實現:

//dart 程式碼
import 'package:flutter/material.dart';
import 'package:flutter_state/Redux/screens/redux_perview.dart';

class ReduxPage extends StatefulWidget {
  @override
  _ReduxPage createState() => _ReduxPage();
}

class _ReduxPage extends State<ReduxPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            TestPage()
          ]
        ),
      )
    );
  }
}
複製程式碼

// React 程式碼
import { SafeAreaView } from "react-native";
import { useNavigation } from "react-navigation-hooks";
import { ScrollView } from "react-native-gesture-handler";

export const HomePage: React.FC<Props> = ({ navigation }) => {
	const navigate = useNavigation();
	return (
            <SafeAreaView>
                <ScrollView>
                    <TestPage />
                </ScrollView>
            </SafeAreaView>
	);
};
複製程式碼

可以看到，兩段程式碼風格特別相似。

狀態更新:

// dart
class _HomePage extends State<HomePage> {
  bool showClear = false;    
  Widget clearWidget = GestureDetector(
    onTap: () {
      setState(() {
        showClear = false;
      });
    },
    child: Icon(Icons.clear, size: 20, color: Colors.grey),
  );
  @override
  Widget build(BuildContext context) {
    return Container(
        child: showClear ?
          clearWidget : Icon(Icons.mic, size: 20, color: Colors.grey),
    );
    
}
複製程式碼

// react 程式碼
export class FormMessage extends React.Component {
    constructor(props) {
        super(props);
    }
    ...
    
    setTxt = txt => this.setState({ txt: txt });
}
複製程式碼

狀態管理：

由於與 React 有著相似的設計思想，所以在 React 上使用的狀態管理方案也可以用在 flutter 中，如Redux, Redux-thunk 等。

ionic 框架

相比 React 和 Flutter, ionic 則是基於 HTML 5 的移動應用開發框架。Ionic 基於當前的手機端原生系統所擁有的UI元件，實現了一套速度極快，介面美觀的移動UI元件庫。在 v3.0 版本以前，ionic 基於 Angular 使用，結合 Rxjs 特性，配合 cordova 對原生硬體的呼叫支援，可以在極短的時間內，做出一套 UI 風格統一併且支援多端應用的App。在某些場景下，效能也接近原生。

由於其基於 html5，在預設開發模式下，可以直接在瀏覽器中進行開發，這對我們除錯和修改應用帶來了很大的方便。

在打包 app 時，框架會幫助我們將專案壓縮，並通過 cordova-plugin-ionic-webview 實現的 webview 載入我們的 html5 應用。

由於Ionic 本質還是 html5 技術，在部署相對靈活很多，可以直接將其部署在 nginx 或者 tomcat 等應用伺服器上進行使用，也可以將其巢狀在公眾號中使用。

flutter, React-native, ionic 注意事項

flutter

Flutter 由 google 推廣及維護，抱大腿總沒錯。
Flutter 作為新起 UI 框架，在程式語言上 dart 作為其開發語言，對於 flutter 的上手首先需要學習 dart 語言。
Flutter 目前的社群還相對年輕，不少坑還沒有填平，目前其官方的 issues 已經突破 8000+
Flutter 對宣告式 UI 做到了最大程度的細粒化。所有的元素，如內外邊距，都可以採用 widget 進行最大程度的定製化開發。因此，使用 flutter 編寫 UI 介面需要先系統的學習 flutter 常用的佈局 widget
Flutter 再作為繪製 UI 的開發框架，需要執行在android, ios 裝置上進行開發。因此對業務邏輯的除錯上無法像瀏覽器那般簡單。
Flutter 採用 GPU 進行渲染，很多原生的功能無法與其配合使用，需要做額外處理。
Flutter 是目前跨平臺框架中效能最好的。

React-native

React-native 由 facebook 開發，也是大腿。
React-native 作為 React 的衍生品，掌握 React 和 Javascript 語言，便可快速上手開發移動應用。
React-native 迭代至今，已經相對穩定，其社群比較成熟，各種問題也都很快能找到解決方案，對於官方的 issues 目前的數量為 700+。
React-native 0.59 版本後, 支援 hook, 在開發思維上更加先進。
React-native 出現近 5 年，目前最新 release 版本為 v0.61 版本。也就是迭代了近 5 年，也沒有正式推出其 1.0 版本。外加 Flutter 框架帶給他壓力，相信 React-native 在重寫了底層，未來在結合 webAssembly 優化 diff 後，在效能上一定也有所突破。