
背景
跨平臺技術,不僅僅是指的當前移動裝置的平臺,絕大部分電腦語言都是跨平臺的,如 java, c/c++ 等等。而移動領域的跨平臺,則面臨了作業系統,裝置版本,裝置機型等各類問題。
為了解決不同作業系統終端開發一致性的問題,移動跨平臺技術逐漸興起,發展到今天,移動跨平臺技術在某些應用場景下已經逐漸變成一種主流的開發方式。於此同時,各種跨平臺技術框架更是滿天飛。
從一開始的 web app,到後來的 PWA ,Hybrid。在到後來的 PhoneGap(Cordova 前身), 也有 web 技術結合 cordova 誕生的 ionic, Electron 框架等。

React-native,weex 似乎已經很好了,但是在編譯為不同作業系統 UI 的過程中,要耗費大量效能,不同的語言通訊過程中,又要耗費一部分效能。並且由於作業系統相同功能的 UI 元件在展示效果上可能不同,開發者可能還需要花費很多精力去做UI的適配工作及效能優化工作。諸多原因導致了開發一款高效能,優質體驗的App可能需要花費大量的時間去打磨,於是自繪 UI 便誕生了。
自繪 UI 通過在不同平臺間通過某種方式來渲染自己的 UI 元件,不去依賴原生的UI控制元件,從而保證了UI 體驗的一致性。通過使用 GPU 等渲染引擎,來提高系統執行流暢度,Flutter 便是跨平臺技術發展到今天使用自繪 UI 而開發出的一款高效能跨平臺的 UI 框架。Flutter 藉助其優秀的架構設計和前車之鑑,加持 google 大廠的光環和推廣,到目前為止 github 的已獲超過 85000 個star。
Flutter 簡述

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 框架

由於其基於 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 後,在效能上一定也有所突破。

ionic
- ionic 基於angular 框架進行開發,完全採用typescript語言。
- ionic 目前迭代至 4.x,已完成獨立為一款跨平臺UI 框架,可以應用在任何地方,包括 React 和 Vue
- ionic 基於 html5 技術,可快速上手完成對跨平臺應用的開發和除錯。
- ionic 不需要藉助其他操作便可以執行在不同的環境中。
- ionic 基於前端 web 技術進行發展,在迭代速度上高於其他跨平臺框架。
- ionic 已推出 ionic Studio,可快速基於 ionic Studio 進行程式碼視覺化開發。感興趣可以參考ionic Studio

總結
如今跨平臺技術逐漸成為一種主流,各種框架琳琅滿目。但是不論如何跨平臺,都是基於裝置去做的。如果沒有這些的平臺,那麼跨平臺也就沒有意義了。不同的框架在不同的場景中都有一定的優勢,在實際開發中,可以結合專案的型別和需求,靈活選擇不同的框架來進行開發。
