哪个跨平台开发框架在2021年更好？

当前，有多个专门从事市场上跨平台开发的框架。那么，哪个框架更符合开发人员的需求？作者专门概述并比较了不同框架的特征。

国内外的作者总共选择了5个主流评估目标，即由团队开发的RN和AVM。

目前，最受欢迎的是RN是第二个，取决于企业的应用程序方案和字段。 AVM在许多企业和个人开发人员中也高度使用。

1。安装环境和开发工具的比较。

任何框架的安装环境都表示该框架是否对新手很友好。因此，作者从安装环境和开发工具中介绍了不同框架的情况，并比较了新移民开始的成本和阈值。作者是用户。下面的全文介绍了Mac下的开发环境和开发工具。

1.1

RN是一个跨平台移动应用程序开发框架，于2015年4月开发。它已经开发了6年以上。最新版本为0.66。将于2021年12月10日发布一个小版本。总体而言，该框架仍然非常重要。官方网站：

让我们看一下安装环境和开发工具。在最新的官方网站上，我们可以看到，如果您刚开始，它非常方便。您只需要在本地安装12版或更高版本即可。然后，借助官方网站推荐的世博工具，您可以快速构建当地开发环境。因为我是用户并且以前已经安装了它，所以整体安装非常流畅。

首先，命令行工具安装：

yarn global add expo-cli

我不会谈论配置源或其他内容。如果慢，您可以切换到国内纱线源。安装完成后，直接使用它。

expo init AwesomeProject

安装项目后，在安装项目后，输入项目以执行

yarn start

Expo-CLI将被重新安装一次，该项目将在本地启动。 DEV的浏览器接口如下。在最左边，您可以看到本地博览会已打开。您需要调试平台。选择本地LAN网络，然后单击在iOS上运行以启动作者。本地8设备，然后我看到了当前接口，最右边是本地生成的模板代码。

编辑器工具由我使用，官员也推荐。使用脚手架的生成目录类似于普通项目的目录。该条目在app.tsx文件中，并支持修改。对于前端开发而言，整个过程不高。至少在调试和开发阶段之前，如果仅涉及UI写作，则可以在配置后直接开始工作。

1.2

自出生以来已有3年多（V1.0于2018年发布）。强烈建议这是一个跨端开发框架。与RN不同，它是开发语言中使用的飞镖，官方网站在这里：

近年来，主要公司一直在迅速发展。他们介绍了主要业务，包括我工作的许多公司，这些公司都使用了UI零件来开发。作者将简要介绍下面的开发环境和工具。

首先，我们必须下载并安装完整的开发工具。默认情况下，我们都安装了它们，因此以后不会详细介绍。

需要首先下载的SDK：

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

cd ~/development
unzip ~/Downloads/flutter\_macos\_vX.X.X-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"

如果在此过程中遇到问题，则可以使用它们查看问题并解决问题。如果存在错误或丢失的环境，将提示您修改它们，这更方便。

如果没有错误，则安装命令行。让我们看一下发展经验。

首先，作者将其用于开发。您需要安装正式推荐的插件。只需搜索并将其直接安装在插入市场中。然后，您可以通过插件创建一个新项目。

本地配置相应的iOS模拟器，单击左侧的“调试”按钮以选择相应的模拟器，您可以直接开发和调试。

屏幕截图是我制作的一个小型应用程序项目。目录结构相对简单。 lib目录中的主。是输入文件。唯一的缺点是它对前端发展的语法不友好。尽管飞镖并不复杂，但它仍然存在越来越多的差异，需要一定时间来掌握和学习，并且许多相应的系统库的使用也不同。

总体而言，它比RN配置更为复杂。对于前端开发，DART语法是一个挑战。除了DART外，您还需要了解自己的状态管理机制，概念和相关库的功能，以便开始。新移民的门槛仍然相对较高。

1.3

公司于2013年成立，可以说是混合发展的发起人（）。在启动之前，每个人通常都开发了混合开发应用程序。它在一开始是高度融合的，但是现在它支持与Vue的集成。除了可以使用的图书馆外，整体生态系统仍然还不错。优势主要是网络技术，缺点也很明显。与RN的性能和性能比较。编译后代码的性能比较绝对更糟，并且某些Web不支持功能需要编写大量本机插件以支持。

让我们看一下其安装环境和开发工具的一部分。首先，安装全局CLI命令行工具，版本12.14或更高版本。

npm install -g @ionic/cli

ionic start myIonicApp blank --type vue

ionic serve █

这似乎相对简单，但是需要安装很多东西。建议提前将NPM设置为国内来源，否则您将不得不等待很长时间。

使用后，实际上在本地创建了-DEV-。

打开8100地址实际上是一个普通的Web项目。熟悉Vue的学生可以看出，它作为Vue的插件存在。

因此，让我们看一下如何在模拟器上预览。首先，您需要安装以下两个工具，即前依赖性。

npm install -g ios-sim

brew install ios-deploy

然后在项目目录中的第一个项目，然后我们直接使用CLI：

npm run build

ionic capacitor run ios -l --external

选择本地模拟器，您可以看到接口。但是，由于作者本地版本是11的旧版本，并且会报告汇编错误，因此您需要升级到最新版本，但作者无法升级它，因为我的计算机系统不支持更高级别，因此后来将其更改为调试。

作者以前已经安装了它，需要将SDK更新为最新信息，然后在其中找到AVD面板并创建模拟器。

启动后，您需要检查它。如果设备在线，请继续下一步：

ionic capacitor add android

ionic capacitor run android

这个步骤是第一次非常非常慢。它应该与iOS相同。它需要将其编译到APK中，然后将其同步到模拟器。

最终效果是这样。当您看到日志的最后几行时，您将获得模拟器的APK。

总体而言，安装步骤并不复杂。如果网络更好，则整个过程不到半小时。如果它是系统的最新版本，则升级到最新版本应该更顺畅。我查看了官方网站，方法是使用或调试Web调试工具，因此每个人都知道调试方法和调试方法与此外壳相同。

1.4

这是一家由公司开发的上市公司，一直专注于工具的开发已有30多年的历史。整个功能是专门针对iOS和同名的，但写作是。与上面提到的内容不同，它是JS之间打开的外壳或桥梁，并真正使用代码渲染页面，这也使其性能更强大。在官方网站上，它还支持不同的网络框架写作，例如VUE，当然也可以用本机JS和HTML编写。官方网站：。

让我们看一下下面的安装环境和开发工具体验，它仍然是在系统环境上构建的。

首先需要安装的同一CLI工具：

npm install -g nativescript

在此过程中，您将遇到下载依赖关系中的问题，您可以设置代理或修改主机。作者遇到了它，但这不是问题:)。

140.82.114.9 codeload.github.com

使用 ns 命令创建 NativeScript 项目：

ns create myNativescriptApp

选择创建一个空项目以创建VUE模板。命令行将指导您进行交互选择。您可以通过打开它进行编辑。目录结构基本上与普通VUE项目的结构相同。该条目是App目录中的App.js，VUE实例是 - 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

让我们看一下它的外观。 iOS也是因为本地版本太旧了，无法运行。它第一次编译相对较长，因此您需要耐心等待。

运行后，它是相似的。 APK安装在模拟器中。我测试了前端代码的局部修改，并在本地进行模拟器同步，以实现热门更新。速度还可以，但是需要经常开始冷。该应用将生效。

1.5 AVM

AVM是研发开发的跨端框架。全名是（-View-）。写作方法VUE还与JSX兼容，具有双向绑定，组件化和状态管理支持，并配备了系统级API来支持云编译和发布。对于不同的平台，官方网站是：它具有自己的开发IDE支持。我认为它将在今年12月（2021-12-3）进行更新，其中JS部分都是开源的，包括JS组件库。

让我们看一下其安装环境和开发工具。首先，您需要注册一个帐户，因为它们继承了云编译的功能，并且IDE还要求该帐户登录和同步代码。然后下载官方网站3。如果是Mac系统，则必须小心。您不能直接在目录中打开它。您需要在使用之前将其复制到应用程序文件夹。

下载后，打开它，熟悉的学生应该能够发现这是基于二级发展的IDE。

输入文件是目录中的STML代码文件。您可以在右键单击上实时预览它，以直接在右侧查看效果。应该注意的是，您只能在此处预览标准H5的组件和页面效果，并且不能预览本机API的功能，因此建议使用真实。为了开发，有必要使用真实的机器安装进行调试，类似于RN Expo。

下载地址：＃

安装后，将Mac和手机放在同一网络上。在IDE中扫描QR码，以实时查看真实的机器效果。

可以正常使用和预览系统级API，例如网络和WiFi，并且会有错误提示。开发经验与迷你计划非常相似。

总体而言，整合了开发环境和开发工具，过程相对平稳，并且在整个过程中没有命令行工具可以修改，但是必须根据官方网站文档的指导使用。

1.6摘要

在对5个框架的初步解释之后，您可以看到基本上每个人的开发过程都分为两类。一种是将其直接包装在手机上进行开发和调试。例如，另一个是需要它。通过额外的辅助调试，例如AVM，RN和后者，也支持将软件包直接安装到真实机器上，但该方法仍然不同。

在开发工具方面，每个人都可以基本上将它们用于开发，所有支持功能，并且有些人提供了自己的IDE，并且具有相对较高的集成程度，例如AVM。

2。性能比较。

下面，作者将从性能的角度讨论不同框架的比较。这可能是每个人最关心的。作者写了一篇简单而超长的文章，以进行水平比较。我放在这里的代码。您可以稍后引用它以实现左右和右侧的1,000行图片和文本列表。

rn效应：

影响：

影响：

效果是这里最糟糕的发展经验。我将在稍后的API分析部分中解释：

在AVM下的效果：

代码实现非常简单，并且没有特殊的优化，没有滚动加载，没有交互式事件，并且1,000个数据直接填充了完整的，并且使用了所有官方列表组件。

在通过ADB直接输入设备后的性能，我们使用顶部命令观察应用程序流程：

其中，我们使用开发人员函数，GPU屏幕截图来识别帧数，并且汇编速度由时命令直接计数，所有这些都使用了第一个启动的时间。

例如：

time ns debug android

框架内存CPU使用汇编速度

RN（Expo GO）

300m

78％-116％

0M32.229S

190m

37％-43％

0m21.336s

138m

49％-65％

0M55.549S

147m

19％〜20％

0m27.862s

AVM

6％-10％

0m0.094s

要简要分析，第一件事是内存使用情况，这基本上是上述，RN和最多的，而AVM是最少的。然后是CPU比例。作者不断提取列表以查看CPU使用率。其中，RN最高，但其FPS非常低。这意味着CPU使用率越高，计算越多，但是FPS底部表明没有滞后。更好的性能。

例如，我们只观看RN的一半，但FPS特别高，并且存在明显的滞后。因此，我们可以说RN的性能要比渲染（包括AVM）好得多。 CPU的比例越高，FPS的比例越低，性能就越好。但是，高CPU使用情况也存在问题，即它将消耗更多的功率...

最后，让我们看一下与调试经验有关的汇编时间。在这里，AVM是最快的，基本上是以毫秒为单位的真实机器，而其他机器基本上是几秒钟的，需要运行。当然，EXPO和AVM都有预设，因此它们绝对比没有程序的速度更快。 AVM我不确定为什么这么快。这真的让我感到惊讶，但是有一件事是AVM无法在模拟器上安装，因此我使用了一台真实的机器来评估它，这可能会产生一定的影响。更多性能。

3。它是否支持多末端汇编（包括迷你程序）。

这里的多终端不仅是指iOS和H5，还包括它是否支持国内迷你程序汇编。由于许多公司当前的业务场景需要在不同的应用程序中运行，因此它们是否支持多个目的对我们的国内用户非常重要。作者特别添加了此比较项目。此外，目前还有PC编译公司的支持，因此还有其他平台比较。

框架小程序

√

√

√

，塔罗

- -

- -

√

√

√

√

√

√

√

√

√

√

√

√

AVM

√

√

√

√

总体调查情况如上图所示。检查的部分是官方网站直接支持编译。十字架意味着官员不支持它，并且不再有成熟的开源解决方案。但是，某些框架是单独编写的，例如RN，有些是一个成熟的开源解决方案。

总体而言，如果您仅开发和iOS应用程序，这五个框架就没有问题。如果您想支持小程序和桌面软件，则需要考虑更多。目前，RN和生态学是最完整的，当然，如果您是主要使用微信小程序并且不考虑的开发人员，那么AVM可能是一个更好的选择。

4。生态状况。

4.1开源生态系统，受欢迎程度

我们将其直接用于比较，因为NPM上没有与AVM的相应软件包，作者将稍后单独列出。

与下载量相比，RN在遥远的领先地位，还不足以看到它。 RN绝对是第一个，更好。从上面的角度来看，它更好，但可能是由用户太少引起的。总和不如RN那样的时间不如一小部分。

让我们再次看一下AVM，因为找不到相应的软件包和下载，让我们看看我们提取的数据。

可以看出，所得数据与上述结果相似，而相同的总份额仅为2021年的16％+5％= 21％，第一个为42％，第二个为RN为38％。可以看出，它逐渐从2019年逐渐上升到2021年，最终在2021年超过RN。

以上是几个主要框架的主要仓库的比较。可以从中看到数据。从语法的角度来看，RN基本上是长子和第二个。从开放的角度来看，RN比率更好。就时间而言，每个人是7岁。我8年前开始这样做，并且更新情况相似。

让我们从搜索引擎的热门单词中进行一些分析。

图片

从结果来看，中国的受欢迎程度相似。与今年相比，中国越来越多的人开始转变。

4.2 API支持，成分丰富度

该部分比较了来自API级别的五个框架的本机功能和组件支持的支持。

作者只是开发了一个列表功能。让我们比较下面每个框架的基本组件数量（包括布局组件）和API功能。

框架组件编号系统API/数字开发经验

RN

34

33

无缝切入

171

104

DART语法具有一定的阈值和适应时间

90

291

支持，VUE，JS，TS开发

31

87

实时调试功能太弱

AVM

31

219

强大的实时调试功能，与JSX兼容的Vue样语法

来源参考：

RN组件：

RN API：

成分：

API：

成分：

API：

成分：

API：

AVM组件：

AVM API：

尽管数据的差异很大，但例如RN API和组件计数较小，但它们都被模块划分。例如，实际上有很多方法可以在单个API下实现许多功能。此处仅列出了数量，但它仅提供一种相对粗糙和初步的学习成本感觉。真的足够吗？它仍然需要真正的复杂应用程序的真正开发才能具有绝对的发言权。

作者认为它在开发体验中是独一无二的。由于DART和TS和JS不同，因此整个UI开发概念与前端之间仍然存在一些概念冲突。使用技术，AVM和RN开发的其他框架实际上还不错。但是，它支持使用各种不同的JS库进行开发，例如VUE，NG等，而AVM支持VUE和语法功能，并且必须使用RN。尽管它也支持不同前端框架的发展，但总体开发经验是最糟糕的。它的实时汇编，功能和布局系统确实很糟糕。作者不建议在这里再次进入陷阱。确实有很少的用户是有原因的。例如，我是一个初学者，直接说服我阅读了他们的布局文档后离开。

此外，查看所有框架，最详细的文档是RN和AVM。但是，RN和本地化级别还不够，国内数据相对较小，文档相对愚蠢，并且很长一段时间没有更新。

五，摘要

尽管作者从不同的角度分析了每个框架的情况，例如入门，开发环境，简单的表现比较，生态状况等。但是，对于这些框架，实际上有很大的研究空间。本文仅客观地记录作者在入门和研究不同框架时的第一次。因此，不可避免的是某些地方不够全面，但基本上反映了这种情况。

从性能的角度来看，AVM的开发经验和汇编速度非常好。尽管这是一个家庭框架，但并不比外国框架差。其次，RN，最后是。

从开发经验的角度来看，RN越舒适。这两个随后是AVM，是因为Dart语法，但需要单独学习，中小型企业的选择，个人开发人员需要考虑。尽管AVM不支持TS和其他语言框架，但仅支持JS语法。最糟糕的是，基本上不可能实时调试，并且API也非常不友好。

总而言之，作者认为2021年最热门的人已经赶上RN。总体而言，当前的大多数选择和国内外用户的份额都被RN分开了。 AVM和其他框架具有自己的优势，但是从用户体验的角度来看，难以入门以及社区状况，国内AVM绝对更适合家庭开发商。毕竟，它们是基于云的集成的本地化，而且体验也很棒。

因此，大型制造商直接去DART没有问题。这并不是太困难了，这部分成本也不是问题。如果其他公司和个人开发人员在国内市场中选择AVM，RN仍然更合适（与此相比，AVM自然支持国内迷你计划，这是一个重要的加点，而RN的文档具有更多的生态学），如果您考虑考虑，改编看起来更合适。