NativeScript 与主流跨平台框架深度对比

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

目前市场上有多个专业做跨平台开发的框架，那么对开发者来说究竟哪一个框架更符合自己的需求呢？笔者特地总结对比了一下不同框架的特性。

国内外笔者选择了一共5个主流的测评对象，分别是RN（React Native），Flutter，Ionic，NativeScript，以及用友APICloud团队开发的AVM。目前来看比较火的应该是 Flutter，次之 RN，具体还要看企业的应用场景和领域，AVM、Ionic、NativeScript 在不少企业和个人开发者中也使用率较高。

一、安装环境与开发工具对比

任何框架的安装环境都代表了这个框架对新手是否友好。所以笔者特别从安装环境、开发工具上介绍各个不同框架的情况，来比较新人上手的成本和门槛。笔者是 MacOS 用户，以下全文介绍的都是在 Mac 下的开发环境和开发工具。

1.1 React Native

RN 是 Facebook 于 2015 年 4 月开源的跨平台移动应用开发框架，到现在已经发展了6年多，目前最新版本是0.66，2021年12月10日还有更新发布小版本，整体来看框架还是非常有生命力的。官网为 https://reactnative.dev/。

安装环境和开发工具方面，从官网可以看到，如果只是上手的话比较方便，只需要本地安装 Node.js 12 版本以上即可。然后借助官网推荐的 Expo 工具可以快速搭建本地开发环境。因为笔者是 MacOS 用户，之前安装过 Xcode，所以整体安装起来还算流畅。

首先是 Node.js 的命令行工具安装，这里不详细说配置源了，如果慢的话可以切换国内 yarn 源。安装完毕后，直接使用命令创建项目，项目安装完毕后进入项目执行，会重新安装一次 expo-cli。之后本地启动项目，打开开发浏览器界面，可以选择本地 LAN 网络，然后点击 Run on iOS simulator 启动模拟器设备。

编辑工具笔者用的是 vscode，官方也推荐 vscode。使用脚手架生成的目录和正常的 React 项目差不多，入口在 App.tsx 文件，支持修改后的热重载（hot reload）。整个流程走下来对前端开发来说门槛不高，至少到调试开发阶段，如果只单纯涉及 UI 编写，配置完直接就可以开始工作。

1.2 Flutter

Flutter 从 2018 年发布 v1.0 到现在也3年多了，是 Google 力推的跨端开发框架，和 RN 不同的是开发语言用的 Dart 而不是 JavaScript。官网为 https://flutter.dev/。

最近几年发展比较猛，各大公司都在主端业务引入。首先需要下载安装完整的 Xcode 和 Xcode developer tools 开发工具。之后下载 Flutter 的 SDK，解压缩后设置对应的 SDK 环境变量地址。如果过程中遇到问题可以使用 flutter doctor 来查看问题进行修复，有报错或缺失环境会有提示，比较方便。

如果 flutter doctor 没有报错，那么 Flutter 命令行就安装完成了。开发体验方面，笔者使用 vscode 进行开发，需要安装官方推荐的 vscode 插件，之后就可以通过插件新建 Flutter 新项目。本地配置好对应的 iOS 模拟器，在 vscode 左边点击调试按钮选择模拟器，就可以直接进行开发调试。

目录结构比较简单，在 lib 目录下的 main.dart 就是入口文件。Flutter 对前端开发的语法不友好，Dart 虽然不复杂，但是和 JavaScript 有较多出入，需要一定时间掌握和学习，而且对应的系统类库用法也不太一样。整体来说比 RN 配置复杂一些，对前端开发来说，Dart 语法是一个挑战，编写应用除了 Dart 之外还需要理解 Flutter 自己的状态管理机制、widget 概念以及对应的 material 相关库的功能才能上手，对新人门槛较高。

1.3 Ionic

Ionic 由 Drifty Co. 在 2013 年推出，可以说是混合式开发（hybrid）的鼻祖，一开始是和 Angular 高度集成的，现在已经支持了 React 和 Vue 集成，以及可以使用 Cordova 的库。生态整体不错，优点是 Web 技术为主，缺点也很明显，Webview 的表现和性能与 RN、Flutter 那种编译后转 Native Code 的性能对比要差一些，一些 Web 不支持的特性需要编写大量原生插件来支持。

安装环境和开发工具部分，首先安装全局的 cli 命令行工具，Node.js 版本12.14以上。创建项目后使用 serve 命令，本地就是起了一个 webpack-dev-server。打开地址后，其实就是一个正常的 web 项目，IonicVue 是作为 Vue 的一个插件存在。

在模拟器上预览需要安装前置依赖工具，然后在项目目录先 build 项目，之后使用 Ionic Cli 运行。笔者本地因 Xcode 版本问题改用 Android 调试，需要更新 SDK 到最新，在 Android Studio 中创建模拟器。启动后检查设备在线，再添加 Android 平台并运行。第一次编译时间较久，最后部署一个 debug 的 apk 到模拟器。整体来说，Ionic 的安装步骤不算复杂，如果网络好，整个过程不到半小时。调试方式是利用 Chrome 或 Safari 的网页调试工具调试，因为 Ionic 套壳了 webview。

1.4 NativeScript

NativeScript 是由 Progress 公司开发的，专注于开发工具领域。整个 NativeScript 的能力和它的名字一样是专门为了 iOS 和 Android 而开发的，但是写法是 JavaScript。和 Ionic 不一样的是，它不是套壳 Webview，而是在 JS 和 Native 之间打通桥梁，真正使用 Native Code 进行页面渲染，这使得表现能力比 Ionic 强。它支持不同的 Web 框架写法，比如 Vue、React，包括 TS 支持，当然用原生 JS 和 HTML 也可以编写。官网为 https://nativescript.org/。

安装环境和开发工具体验，同样是 MacOS 系统环境搭建。需要先安装 NativeScript 的 Cli 工具，过程中可能遇到下载依赖问题，可以设置代理或修改 host 解决。使用 ns 命令创建 NativeScript 项目，选择创建一个 Vue 模板的空项目，目录结构和普通的 Vue 项目基本一样，入口在 app 目录下的 app.js，Vue 实例被 nativescript-vue 替代。

运行项目可以在多个设备上，如 ns run ios 或 ns run android，调试可以使用 Chrome DevTools。第一次编译时间较久，需要耐心等待。运行起来后，一个 debug 的 apk 被装到模拟器里，测试本地修改前端代码，webpack 本地会进行 watch 和同步到模拟器，实现热更新，但需要频繁冷起 app 才生效。

1.5 AVM

AVM 是由 APICloud 研发的一套跨端的 JavaScript 框架，全称 APICloud-View-Model，写法类 Vue 也兼容 React JSX，有双向绑定、组件化和状态管理支持，并配套了系统级别的 API，支持云端编译和发布到不同平台。官网为 https://www.apicloud.com/AVMframe，有自己的开发 IDE 支持，JS Framework 部分是开源的。

安装环境和开发工具，首先需要注册 APICloud 账号，然后下载官网的 APICloud Studio 3，这是一个基于 vscode 二次开发的 IDE。入口文件是 pages 目录下的 stml 代码文件，右键实时预览可以在右边直接看效果，但只能预览标准 H5 的组件及页面效果，不能预览原生 API 的功能。真实开发需要使用真机安装 AppLoader 进行调试，类似 RN 的 Expo。

AppLoader 装上之后保持 Mac 和手机在同一网络下，扫描 IDE 中的二维码就可以实时看到真机效果。在真机上像网络、wifi 这些系统级别 API 就可以正常使用和预览，报错也会有提示，开发体验很像小程序。整体来说开发环境和开发工具是一体的，流程比较顺畅，全程没有鼓捣命令行工具，但需要根据官网文档引导使用。

1.6 总结

经过对5个框架的初步讲解，可以看出来基本上开发流程分成了两类：一类是直接把 debug 包装到手机上进行开发和调试，比如 Ionic、NativeScript 和 Flutter；另一类则需要通过一个额外的 AppLoader 进行辅助调试，比如 AVM 和 RN。在开发工具上，基本上都可以使用 Vscode 进行开发，都支持 hot reload 功能，有些提供了自己的 IDE，集成化程度比较高，比如 AVM。

二、性能比较

从性能角度对比不同框架，笔者通过编写一个简单的超长 viewlist 来进行横向比较，实现一个1000行的图文列表，左图右文。代码已开源供参考。

性能通过 adb shell 进入设备后，使用 top 命令观察 app 进程情况，帧数用 Android 的开发者功能 GPU 截图标识，编译速度直接用 time 命令统计第一次 debug 启动耗时。数据如下：

简单分析：内存占用基本都在100MB以上，RN 和 Flutter 最多，AVM 最少。CPU 占比方面，RN 最高，但 fps 较低，说明 CPU 占用率高计算多，但 fps 低可能没有卡顿，性能更好。Ionic 的 CPU 占用只有 RN 的一半，但 fps 高且有明显卡顿。所以 RN 的性能比 webview 渲染的 Ionic 要好，NativeScript 和 AVM 也类似。CPU 占用高可能费电。编译时间上，AVM 最快，毫秒级同步到真机，其他都是秒级需要跑 build。AVM 在真机测评，可能因真机性能更高。

三、是否支持多端编译（含小程序）

多端不仅指 Android、iOS、H5，更包含国内的小程序编译。是否支持多端对国内用户很重要，另外 PC 端编译各家也有支持，增加了 Windows、macOS 平台对比。

整体调研情况如下表：

对勾表示官网直接支持编译，叉号表示官方不支持或没有成熟开源解决方案。如果只开发 Android 和 iOS 应用，这五个框架都没问题；如果要支持小程序和桌面软件则要考虑更多。目前 RN 和 Flutter 生态最完整，次之是 Ionic。如果以微信小程序为主并不考虑 desktop，那么 AVM 可能是更好选择。

四、生态情况

4.1 开源生态与流行度

使用 NPMCompare 对比，Flutter 和 AVM 没有在 NPM 上有对应包，单独列数据。

下载量上，RN 遥遥领先，Ionic 和 NativeScript 相对较少。从 issues 看，NativeScript 可能因用户少导致问题较少。根据 statista.com 数据，2021 年 Ionic 和 NativeScript 总份额约21%，Flutter 第一42%，RN 第二38%。Flutter 从2019年到2021年逐步上升，最终反超 RN。

从 GitHub 主仓库对比，stars 和 forks 上 Flutter 和 RN 领先，open issues 上 RN 更优。大家都是7、8年前开始，更新情况类似。

从 Google Trends 看，国内 apicloud、ionic、nativescript 热度差不多，react native 和 flutter 2021年对比，国内更多人转向 flutter。

4.2 API 支持与组件丰富程度

从 API 层面对比五个框架对原生能力的支持情况和组件支持情况。基础组件个数和 API 能力数量如下：

数据来源各框架官方文档。数量只提供学习成本的初步感觉，真实够用需开发复杂应用。开发体验上，Flutter 独一档，Dart 和 TS、JS 不一样，UI 开发概念有理念冲突。其他使用 JavaScript 技术的框架，AVM、RN、Ionic 都不错。Ionic 支持多种 JS 库，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 和其他语言框架。最差的是 NativeScript，基本没法实时调试，API 也不友好。

总结下来，2021年最火的当属 Flutter，已经赶超 RN。整体上国内外用户目前的选择和份额大部分被 Flutter 和 RN 瓜分。其他框架中 AVM 和 Ionic 各有优势，但从使用体验、上手难度、社区情况看，国内的 AVM 更适合国内开发者，有本土化、云端集成，debug 体验惊艳。

大厂直接上 Flutter 没问题，Dart 没有太大难度。其他公司和个人开发者如果做国内市场选择 AVM、RN 比较合适（AVM 天然支持国内小程序是加分项，RN 文档和生态多）。如果考虑 desktop 适配，Flutter 看起来更合适。