背景
跨平台技术，不仅仅是指的当前移动设备的平台，绝大部分电脑语言都是跨平台的,如 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
总结
如今跨平台技术逐渐成为一种主流，各种框架琳琅满目。但是不论如何跨平台，都是基于设备去做的。如果没有这些的平台，那么跨平台也就没有意义了。不同的框架在不同的场景中都有一定的优势，在实际开发中，可以结合项目的类型和需求，灵活选择不同的框架来进行开发。
