关于javascript:深度测评-五大主流多端开发框架全面对比

2021 跨平台开发框架到底哪家强？

目前市场上有多个业余做跨平台开发的框架，那么对开发者来说到底哪一个框架更合乎本人的需要呢？笔者顺便总结比照了一下不同框架的个性。

国内外笔者抉择了一共 5 个支流的测评对象，别离是 RN，Flutter，Ionic，NativeScript，以及用友 APICloud 团队开发的 AVM。

目前来看比拟火的应该是 Flutter，次之 RN，具体还要看企业的利用场景和畛域，AVM，Ionic，NativeScript 在不少企业和集体开发者中也使用率较高。

一，装置环境，开发工具比照。

任何框架的装置环境都代表了这个框架对老手是否敌对。所以笔者特地从装置环境，开发工具上介绍各个不同框架的状况，来比拟一下，新人上手的老本和门槛，笔者是 MacOS 用户，以下全文介绍的都是在 Mac 下的开发环境和开发工具。

1.1 React Native

RN 是 Facebook 于 2015 年 4 月开源的跨平台挪动利用开发框架，到当初曾经倒退了 6 年多了，目前最新版本是 0.66，20211 年 12 月 10 日还有更新公布小版本，整体来看框架还是十分有生命力的。官网：https://reactnative.dev/

咱们来看装置环境和开发工具，从最新的官网能够看到，如果只是上手的话还是比拟不便的，只须要本地装置 Nodejs 12 版本以上就能够了。而后借助官网举荐的 Expo 工具能够疾速搭建起来本地的一个开发环境。因为笔者是 MacOS 用户，之前装置过 Xcode 所以整体装置起来还算是晦涩。

首先是 Nodejs 的命令行工具装置：

yarn global add expo-cli

这里不说配置源什么的了，如果慢的话，能够切换国内 yarn 源，装置结束后，间接应用

expo init AwesomeProject

装置我的项目，我的项目装置结束后进入我的项目执行

yarn start

会重新安装一次 expo-cli，之后本地启动我的项目，关上 dev 的浏览器界面如下，最右边能够看到关上的是本地的 expo 得调试台，抉择本地 LAN 网络，而后点击 Run on iOS simulator，启动了笔者本地的一个 iPhone 8 的设施，而后看到了当初的界面，最左边是本地生成的模板代码。

编辑工具笔者用的 vscode，官网也是举荐 vscode。应用脚手架的生成的目录和失常的 React 我的项目差不多，入口在 App.tsx 文件，反对批改后的 hotRload，整个流程走下来对前端开发来说门槛不高，至多到调试开发阶段，如果只单纯波及到 UI 编写，配置完间接就能够开始干活了。

1.2 Flutter

Flutter 从出世（2018 年公布 v1.0）到当初也 3 年多了，是 Google 力推的跨端开发框架，和 RN 不同的是开发语言用的 Dart 而不是 JavaScript，官网在这里：https://flutter.dev/

最近几年倒退的比拟猛，各大公司都在主端业务引入，包含笔者所在的公司也有很多业务应用 Flutter 进行了 UI 局部的开发，下边笔者就简略介绍一下 Flutter 的开发环境和工具。

首先必定是须要下载安装残缺的 Xcode 和 Xcode developer tools 开发工具，默认大家都装了，之后不在赘述。

须要先下载 Flutter 的 SDK：https://docs.flutter.dev/deve…

解压缩 SDK 后设置对应的 SDK 环境变量地址：

cd ~/development

unzip ~/Downloads/flutter_macos_vX.X.X-stable.zip

export PATH="$PATH:`pwd`/flutter/bin"

如果过程中遇到问题能够应用 flutter doctor 来查看问题进行修复，有报错或者缺失环境，会有提醒你如何批改，比拟不便。

如果 flutter doctor 没有报错的话，那么 flutter 命令行就装置实现了，咱们来看一下开发体验。

首先笔者都是用的 vscode 进行开发的，须要装置官网举荐的 vscode 插件，间接在插件市场搜寻 Flutter 装置就能够了，之后就能够通过插件新建 Flutter 新我的项目了。

本地配置好对应的 iOS 模拟器，在 vscode 右边点击调试按钮抉择对应的模拟器，就能够间接进行开发调试了。

截图是笔者做的一个小利用我的项目，目录构造也比较简单，在 lib 目录下的 main.dart 就是入口文件，惟一缺憾的就是 Flutter 对前端开发的语法不敌对，Dart 尽管也不简单，然而和 JavaScript 还是有比拟多的出入的，须要肯定工夫的把握和学习，而且对应的不少零碎类库用法也不太一样。

整体来说比 RN 要配置的简单一些，对前端开发来说，Dart 语法是一个挑战，编写利用除了 Dart 之外还须要了解 Flutter 本人的状态管理机制，widget 概念以及对应的 material 相干库的性能能力上手，对新人门槛还是比拟高的。

1.3 Ionic

Drifty Co. 在 2013 年推出了 Ionic，能够说是混合式开发（hybrid）的鼻祖了，他推出之前大家个别都是在 PhoneGap 下开发混合式开发利用，Ionic 一开始是和 Angular 高度集成的，当初曾经反对了 React 和 Vue 集成，以及能够应用 Cordova 的库，生态整体来说还是不错的，长处是 Web 技术为主，毛病也很显著，Webview 的体现和性能与 RN，Flutter 那种编译后转 Native Code 的性能比照必定要差一些，一些 Web 不反对的个性须要编写大量的原生插件来反对。

下边来看一下他的装置环境和开发工具局部体验，首先装置全局的 cli 命令行工具，Nodejs 版本 12.14 以上。

npm install -g @ionic/cli

ionic start myIonicApp blank --type vue

ionic serve █

看起来还是比较简单，然而须要装置的货色比拟多，倡议提前把 npm 设置成国内源，否则要等很久很久很久。

应用 serve 之后，其实本地就是起了一个 webpack-dev-server。

关上 8100 地址，其实就是一个失常的 web 我的项目，相熟 vue 的同学一眼就能看进去了，IonicVue 是作为 Vue 的一个插件存在的。

那么看一下如何在模拟器上预览吧，首先须要装置下边两个工具，是前置依赖。

npm install -g ios-sim

brew install ios-deploy

而后在我的项目目录先 build 我的项目，而后咱们间接应用 Ionic Cli：

npm run build

ionic capacitor run ios -l --external

抉择一个本地的模拟器，之后就能够看到界面了，然而因为笔者本地的 Xcode 是 11 的老版本，会报编译谬误，所以须要降级到最新的 Xcode12 以上版本，然而笔者的 Xcode 升不下来了，因为笔者的电脑系统不反对更高级别的 Xcode，所以后边改成用 android 调试。

笔者之前装置过 android studio，须要更新 SDK 到最新，而后在 tools 里找到 AVD 面板，创立一个模拟器。

启动后须要 adb devices 检查一下，如果设施在线，再进行下一步：

ionic capacitor add android

ionic capacitor run android

这一步第一次十分十分慢，应该是和 ios 一样，须要编译成 apk 再同步到模拟器上。

最初的成果就是这样，看到日志的最初几行就是 deploy 了一个 debug 的 apk 到模拟器了。

整体来说，Ionic 的装置步骤不算简单，如果网络比拟好，整个过程不到半小时，如果是最新版的 MacOS 零碎，降级 Xcode 到最新版应该也比拟晦涩。看了一下官网，debug 形式就是利用 chrome 或者 safari 的网页调试工具调试，所以大家了解，这个 Ionic 套壳了 webview，调试办法和 webview 调试办法是统一的。

1.4 NativeScript

NativeScript 是由 Progress 公司开发的，曾经专一于开发工具畛域 30 多年的上市公司。整个 NativeScript 的能力和它的名字一样是专门为了 iOS 和 Android 而开发的，然而写法却是 JavaScript。和下面说的 Ionic 不一样是套壳 Webview，NativeScript 还是在 Js 和 Native 之间买通了一座桥梁，真正的应用 Native Code 进行页面的渲染，这也使的它的体现能力比 Ionic 要强，从官网上看他也反对不同的 Web 框架写法，比方 Vue，React，包含 TS 反对，当然用原生 JS 和 HTML 也能够编写，官网：https://nativescript.org/。

下边看一下他的装置环境和开发工具体验，仍然是 MacOS 零碎环境搭建。

同样是须要先装置 NativeScript 的 Cli 工具：

npm install -g nativescript

过程中会遇到从 codeload 下载依赖，能够设置代理或者批改 codeload 的 host 解决，笔者就遇到了，但这不是 nativescript 的问题：）。

140.82.114.9 codeload.github.com

应用 ns 命令创立 NativeScript 我的项目：ns create myNativescriptApp

抉择创立一个 Vue 模板的空我的项目，命令行会交互式的疏导你抉择，用 Vscode 关上就能够编辑，目录构造和一般的 Vue 我的项目根本一样，入口在 app 目录下的 app.js，Vue 实例被 nativescript-vue 代替。

Run the project on multiple devices:

` `$ ns run ios

` `$ ns run android

Debug the project with Chrome DevTools:

` `$ ns debug ios

` `$ ns debug android

咱们看一下在 android 下是什么样子的，iOS 也是因为本地 Xcode 版本太老跑不起来，第一次编译工夫都比拟久，须要急躁期待。

运行起来后和 Ioinc 相似，也是有个 debug 的 apk 被装到模拟器里了，测试了一下本地批改前端代码，webpack 本地会进行 watch 和 sync 到模拟器，实现热更新，速度还能够，然而须要频繁的冷起 app 才失效。

1.5 AVM

AVM 是由 APICloud 研发的一套跨端的 JavaScript 框架，全称（APICloud-View-Model），写法类 Vue 也兼容 React JSX，有双向绑定，组件化和状态治理反对，并配套了零碎级别的 API，反对云端编译和公布到不同的平台，官网是：https://www.apicloud.com/AVMf…，有本人的开发 IDE 反对，我看往年 12 月份还有在更新 SDK（2021-12-3），其中 JS Framework 局部是全副开源的，包含 JS 组件库。

咱们来看一下他的装置环境和开发工具，首先须要注册 APICloud 账号，因为他们继承了云端编译的性能，而且 ide 也是须要账号登陆同步代码。而后下载官网的 APICloud Studio 3，如果是 Mac 零碎肯定要留神，不能间接在 download 目录关上，须要复制到应用程序文件夹内再用。

下载后关上，相熟 vscode 的同学应该能发现，这是一个基于 vscode 二次开发的 IDE。

入口文件是 pages 目录下的 stml 代码文件，在下面右键实时预览能够在左边间接看成果，须要留神的是，这里只能预览规范 H5 的组件及页面成果，不能预览原生 API 的性能，所以举荐要实在开发的话，须要应用真机装置 AppLoader 进行调试，相似 RN 的 Expo。

AppLoader 的下载地址：https://docs.apicloud.com/Dow…

装上之后放弃 Mac 和手机在同一网络下，用 AppLoader 扫描 IDE 中的二维码就能够实时看到真机成果了。

在真机上像网络，wifi 这些零碎级别 API 就能够失常应用和预览了，报错也会有提醒，开发体验很像小程序。

整体来说开发环境和开发工具是一体的，流程比拟顺畅，全程也没有鼓捣任何命令行工具，但要依据官网文档的疏导进行应用。

1.6 总结

通过对 5 个框架的初步解说，大家能够看进去基本上大家的开发流程分成了两类，一类是间接把 debug 包装到手机上进行开发和调试，比方 Ioinc，NativeScript，还有 Flutter，另外一类则是须要通过一个额定的 AppLoader 进行辅助调试，比方 AVM，RN，当然后者也反对间接安装包到真机，然而 debug 的形式还是有所区别。

在开发工具上，基本上大家都能够应用 Vscode 进行开发，都反对 hotReload 性能，有些提供了本人的 IDE，集成化水平比拟高，比方 AVM。

二，性能比拟

下边笔者就从性能角度讲一下不同框架的比照状况，这个可能是大家最关注的了。笔者通过编写一个简略的超长的 viewlist 来进行横向比拟，代码笔者放到这里了，https://github.com/xiaojue/Li…，后边大家能够去参考，实现一个 1000 行的图文列表，左图右文。

RN 成果：

Flutter 成果：

Ionic 成果：

NativeScript 成果，这里 NativeScript 开发体验最烂，后边会在 API 剖析局部细说：

AVM 下的成果：

代码实现很简略，也没有做非凡优化，没有滚动加载，没有交互事件，间接 1000 条数据搞满，应用的都是官网 list 组件。

性能咱们间接 adb shell 进入设施后，应用 top 命令来察看 app 过程状况：

其中帧数咱们用 android 的开发者性能，GPU 截图来标识，编译速度间接用 time 命令统计, 均采纳第一次 debug 启动耗时的工夫。

比方：

time ns debug android

简略剖析一下，首先是内存占用，根本都是 100MB 以上，RN 和 Flutter 最多，AVM 起码。而后是 CPU 占比，笔者始终下拉 list，看 CPU 占用率，其中 RN 是最高的，然而它的 fps 却很低，这阐明 cpu 占用率越高阐明计算越多，然而 fps 底阐明没有卡顿，性能更好。

比方咱们看 Ionic 的 cpu 占用只有 RN 的一半，然而 fps 却特地高，有很显著卡顿。所以咱们能够说 RN 的性能比 webview 渲染的 Ionic 要好很多，包含 NativeScript 和 AVM 也是这个情理，cpu 占比越高，而 fps 越底，那么性能就越好，可是 cpu 占用高也有个问题就是会比拟费电…

最初咱们再看编译工夫，这关系到调试体验，这外面 AVM 最快，根本是毫秒级同步到真机，其余根本都是秒级的，须要跑 build。当然 Expo 和 AVM 都是有前置 Loader 的，所以必定比没有 loader 程序的快一些。AVM 笔者也不太分明为什么这么快，这的确是让笔者很吃惊，然而有一点，AVM 在笔者的 android 模拟器上装置失败，所以笔者是用真机测评的，可能会有一些影响，真机的性能更高一些。

三，是否反对多端编译（含小程序）

这里的多端不仅仅指 android，ios，h5，更蕴含了是否反对国内的小程序编译。因为很多公司目前的业务场景都是须要在不同的 APP 里跑的，所以是否反对多端对咱们国内用户来说很重要，笔者特意减少了这一比照项。另外目前 PC 端的编译各家也有反对，所以还另外减少了 windows，macOS 平台的比照。

整体调研的状况如上图，对勾的局部就是官网间接反对编译，叉号的意思就是官网不反对，也没有什么比拟成熟的开源解决方案，而独自写了一些框架反对的比方 RN，Flutter 是有一些还算成熟的开源解决方案能够应用的。

整体来看，如果只开发 Android 和 iOS 利用，这五个框架都没什么问题，如果要反对小程序和桌面软件则要思考更多，目前来看 RN 和 Flutter 生态是最残缺的，次之是 Ionic，当然如果您是以微信小程序为主的开发者并不思考 desktop 的状况下，那么 AVM 可能是更好的抉择。

四，生态状况

4.1 开源生态，风行度

咱们间接用 NPMCompare 来比照，因为 Flutter 和 AVM 没有在 NPM 上有对应的包，后边笔者独自再列。

下载量上比，RN 遥遥领先，Ionic 和 NativeScript 都不够看，RN 相对第一，Ionic 比 NativeScript 好一点，从 issues 上来看，NativeScript 好一点，然而可能是因为用户太少导致的。Ionic 和 NativeScript 全加起来，还不如 RN 一个零头。

咱们再看 Flutter 和 AVM，因为没有找到对应的包和下载量，咱们摘取 statista.com 的数据来看一下 https://www.statista.com/stat…。

能够看出到得出的数据和咱们上边的后果相似，Ionic 和 NativeScript 的总份额 2021 年只有 16%+5%=21%，Flutter 第一 42%，RN 第二 38%。能够看到 Flutter 从 2019 年到 2021 年逐渐在回升，最终在 2021 年反超 RN。

以上是几个次要框架的主仓库的比照状况，数据来自 https://www.githubcompare.com/ 从中能够看进去，从 stars 和 forks 上来说 Flutter 和 RN 根本就是老大和老二，从 open issues 上看 RN 比 Flutter 更优，工夫上看大家都是 7，8 年前开始做的，更新状况也差不多。

再从搜索引擎热词上做一下剖析。

从 Google Trends 的后果来看，国内 apicloud，ionic，nativescript 的热度差不多，react native 和 flutter 往年比照来看，国内更多的人开始转向 flutter。

4.2 API 反对，组件丰盛水平

这部分从 API 层面比照五个框架对原生能力的反对状况和组件反对的状况。

后面笔者简略的开发了个 list 性能，咱们下边比照下各个框架的根底组件个数（含布局组件）和 API 能力。

起源参考：

RN 组件：https://reactnative.dev/docs/…

RN API：https://reactnative.dev/docs/…

Flutter 组件：https://docs.flutter.dev/refe…

Flutter API：https://api.flutter-io.cn/

Ionic 组件：https://ionicframework.com/do…

Ionic API：https://ionicframework.com/do…

NativeScript 组件：https://docs.nativescript.org…

NativeScript API：https://docs.nativescript.org…

AVM 组件：https://docs.apicloud.com/api…

AVM API：https://docs.apicloud.com/Cli…

数据上尽管差异比拟大，比方 RN 的 API 和组件数尽管少一些，然而都是按模块划分的。比方某单个 API Class 下其实是有不少办法能够实现很多能力的。这里只列举了数量，只是提供了一个比拟粗略的，对学习老本的一个初步直观的感觉，真的够不够用还是须要实在开发过简单利用才有相对话语权。

笔者感觉在开发体验上，Flutter 是独一档的。因为 Dart 和 TS，JS 都不太一样，整个 UI 开发概念和前端还是有一些理念抵触。其余应用 JavaScript 技术开发的框架，AVM，RN，Ionic 其实都还不错。然而 Ionic 反对应用各种不同 JS 库来开发，比方 React，Vue，NG 等，而 AVM 反对 Vue、react 语法个性，RN 则必须是 React。NativeScript 尽管也反对不同的前端框架开发，然而整个开发体验则是最差的，他的实时编译，debug 性能以及布局零碎真的很烂，笔者这里不举荐再入坑了，用户少真的是有起因的，比方笔者这个初学者，看完他们的布局文档就间接给劝退了。

而且纵观所有框架，文档写的最粗疏还是 RN 和 Flutter，AVM 这三家。然而 RN 和 Flutter 本土化水平不够，Ionic 和 NativeScript 则是国内材料比拟少且文档比拟糊弄，而且都很久不更新了。

五，总结

尽管后面笔者从不同的角度剖析了各个框架的状况，比方上手，开发环境以及简略的性能比照，生态状况等。然而对于这些框架来说，其实还有很多钻研的空间，这篇文章只是主观的记录了笔者对不同框架首次上手和调研状况的一个过程。所以不免有一些中央不够全面，但已根本反映呈现状。

从性能上看 AVM 的开发体验和编译速度，性能体现都十分好，尽管是国产的框架然而不比国外的要差，其次是 Flutter，RN，最初是 Ionic 和 NativeScript。

从开发体验上来说，比拟难受的是 RN，Ionic 这两个，其次是 Flutter 和 AVM，Flutter 是因为 Dart 语法，但须要独自学习，中小企业选型以及集体开发者须要思考；而 AVM 则不反对 TS 和其余语言框架，只反对 JS 语法。最差的是 NativeScript，基本上没法实时调试，API 也十分的不敌对。

总结下来，笔者感觉 2021 年最火的当属 Flutter，曾经赶超了 RN。整体上看国内外用户目前的抉择和份额也大部分被 Flutter 和 RN 瓜分殆尽。其余框架中 AVM 和 Ionic 各有劣势，然而从应用体验，上手难度，社区状况来看，国内的 AVM 必定更适宜国内开发者一些，毕竟有本土化，云端集成，而且 debug 体验也很惊艳。

所以大厂间接上 Flutter 是没有问题的，Dart 没有太大难度，这部分老本不是问题。而其余公司和集体开发者如果做国内市场抉择 AVM，RN 还是比拟适合的（相比拟 NativeScript 和 Ionic，AVM 人造反对国内的小程序，是重要加分项，而 RN 的文档，生态则比拟多），最初如果思考 desktop 的适配，那么 Flutter 看起来就更适合一些了。

点击下方链接：https://www.apicloud.com/inde…