Flutter 记录 - Flutter 与跨平台框架们的众乐乐

背景

---

跨平台技术，不只仅是指的当前移动设备的平台，绝大部分电脑语言都是跨平台的,如 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 后，在性能上必定也有所突破。

ionic

• ionic 基于angular 框架进行开发，彻底采用typescript语言。
• ionic 目前迭代至 4.x，已完成独立为一款跨平台UI 框架，能够应用在任何地方，包括 React 和 Vue
• ionic 基于 html5 技术，可快速上手完成对跨平台应用的开发和调试。
• ionic 不须要借助其余操做即可以运行在不一样的环境中。
• ionic 基于前端 web 技术进行发展，在迭代速度上高于其余跨平台框架。
• ionic 已推出 ionic Studio，可快速基于 ionic Studio 进行代码可视化开发。感兴趣能够参考ionic Studio

总结

---

现在跨平台技术逐渐成为一种主流，各类框架琳琅满目。可是不论如何跨平台，都是基于设备去作的。若是没有这些的平台，那么跨平台也就没有意义了。不一样的框架在不一样的场景中都有必定的优点，在实际开发中，能够结合项目的类型和需求，灵活选择不一样的框架来进行开发。

感谢您的阅读~