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

時間 2020-01-18

標籤 flutter 記錄跨平臺框架简体版

原文原文鏈接

背景

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

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

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

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

React-native，weex 彷佛已經很好了，可是在編譯爲不一樣操做系統 UI 的過程當中，要耗費大量性能，不一樣的語言通訊過程當中，又要耗費一部分性能。而且因爲操做系統相同功能的 UI 組件在展現效果上可能不一樣，開發者可能還須要花費不少精力去作UI的適配工做及性能優化工做。諸多緣由致使了開發一款高性能，優質體驗的App可能須要花費大量的時間去打磨，因而自繪 UI 便誕生了。java

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

Flutter 簡述

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

Flutter 在系統架構上共分爲三層：Framework層、Engine層、Embedder層，分別對應不一樣的功能模塊：android

Framework層：經過 Dart 語言實現，包含了對於安卓主推的 Material Design 和 iOS 系統主流的 Cupertino 風格。Framework 中包含了大量的模塊如動畫、手勢等。Framework 用於支持平常應用開發過程當中的各類功能，咱們的開發也主要是針對 Framework 層進行的。ios
Engine層：該層由C/C++實現，主要包含了Flutter 通信機制、Dart 虛擬機、UI線程、GPU線程、渲染等。nginx
Embedder層：該層主要用於操做系統的相關處理，如本地插件、打包等。c++

經過運行 flutter --version 能夠查看當前 flutter 版本號及相關版本信息：git

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 後，在性能上必定也有所突破。