Flutter vs React Native：开发人员的观点

Facebook的React Native和Google的Flutter –两项热门的跨平台应用程序开发技术引起了轰动。 在这篇文章中，我们将从开发人员的角度对两者进行详细比较。

什么是Flutter和React Native

React Native是一个由Facebook内部发起的项目，于2015年开源。另一方面，Flutter是Google发起的一个项目，自2017年I / O以来一直在大力推广。

我们将使用十个标准对它们进行比较：

• 程式语言
• 技术架构
• 安装
• 设置和项目配置
• UI组件和开发API
• 开发人员生产力
• 社区支持
• 测试支持
• 构建和发布自动化支持
• DevOps和CI / CD支持

现在，我们已经定义了所有标准，让我们开始详细研究每个标准。

程式语言

使用跨平台移动应用程序开发技术的主要好处是能够使用一种编程语言为iOS和Android开发应用程序。

React Native — JavaScript

React Native使用JavaScript来构建跨平台应用程序。 JavaScript是目前在网络社区中非常流行的语言。 它通常与React和其他流行的JavaScript框架一起使用。 多亏了React Native，Web开发人员可以通过一些培训来构建移动应用程序。 考虑到这一点，公司将React Native视为明智之举。

扑-飞镖

Flutter使用Google于2011年引入的Dart编程语言，开发人员很少使用。 Dart语法支持JavaScript或Java开发人员的大多数面向对象的概念，因此很容易理解。 Dart入门很容易，因为这里的Dart官方网站上有大量出色且易于遵循的文档。

分析与结果

由于JavaScript被大多数Web开发人员广泛使用，因此采用React Native框架很容易。 Dart也具有出色的功能集，但在开发人员社区中很少使用且鲜为人知。 考虑到这一点，很明显，React Native在编程语言类别中胜出。

技术架构

选择跨平台的移动应用程序开发框架时，必须考虑其技术架构。 通过了解框架的内部，我们可以做出明智的决定，并选择最适合我们项目的决定。

反应本机—通量

React Native架构严重依赖JS运行时环境架构，也称为JavaScript桥。 JavaScript代码在运行时被编译为本机代码。 React Native使用Facebook的Flux架构。 这里有关于React Native核心架构的详细文章。 简而言之，React Native使用JavaScript桥与本地模块进行通信。

颤振—斯基亚

Flutter使用Dart框架，该框架具有内置的大多数组件，因此它的尺寸更大，并且通常不需要桥与本机模块进行通信。 Dart包含了很多框架，例如Material Design和Cupertino，它们提供了开发移动应用程序所需的所有必需技术。 Dart框架使用具有所有协议，组成和通道的Skia C ++引擎。 简而言之，Flutter拥有Flutter引擎本身中应用程序开发所需的一切。

分析与结果

Flutter引擎在框架本身中具有大多数本机组件，并且并不总是需要与本机组件进行通信的桥梁。 但是，React Native使用JavaScript桥与本机模块通信，这会导致性能下降。

安装

安装方法应该简单明了，没有太多复杂的步骤，以便刚开始使用它的开发人员可以轻松地学习。

React Native — NPM

可以使用Node Package Manager（NPM）安装React Native框架。 对于具有JavaScript背景的开发人员而言，React Native的安装很容易，而其他开发人员则需要学习节点包管理器。

Flutter —二进制下载

可以通过从Github下载特定平台的二进制文件来安装Flutter。 对于macOS，我们必须下载flutter.zip文件并将其添加为PATH变量。 我们可以从命令行执行此操作：

  $ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip 

  $解压缩flutter_macos_v0.7.3-beta.zip 

 导出PATH = [PATH_TO_FLUTTER__DIRECTORY] / flutter / bin：$ PATH 

分析与结果

Flutter和React Native都缺乏针对特定OS的本地软件包管理器的单行安装，但是Flutter安装似乎需要额外的步骤才能将二进制文件添加到PATH并从源代码下载它。 只需使用软件包管理器即可安装React Native，而无需从源代码下载二进制文件。

设置和项目配置

设置开发人员机器以使用新框架的过程需要时间。 它需要大量的软件安装配置。 该技术应具有适当的文档，以使用户正常运行。

反应本机

React Native项目的入门指南假定开发人员已经具有用于iOS和Android开发的所有必需设置。 Xcode命令行工具上的信息很少，但是远远不够。

扑

Flutter入门指南提供了有关iOS和Android的IDE设置和平台设置的详细信息。 您可以在此处阅读有关适用于macOS的Flutter安装的所有必需设置详细信息。 最重要的是，Flutter有一个称为flutter doctor的CLI工具，可以指导开发人员完成安装过程。

分析与结果

通过上面的比较，很明显Flutter为设置和配置提供了更好的文档和CLI支持。

UI组件和开发API

在开发跨平台移动应用程序时，对本机组件的支持是关键。 没有本机组件的支持，我们的应用程序将感觉不像本机应用程序。 框架具有一个可以轻松访问本机模块的API，这一点非常重要。

React Native-更少的组件

核心React Native框架仅提供UI渲染和设备访问API。 为了访问大多数本机模块，React Native必须依赖第三方库。 React Native过于依赖第三方库。

颤振—组件丰富

Flutter框架与UI呈现组件，设备API访问，导航，测试，状态管理和库负载捆绑在一起。 这种丰富的组件集消除了使用第三方库的需要。 如果您拥有Flutter框架，则意味着您将拥有开发移动应用程序所需的一切。 Flutter还具有Material Design和Cupertino的小部件，使开发人员可以在iOS和Android平台上轻松呈现UI。

分析与结果

Flutter拥有丰富的开发API和UI组件，而React Native过于依赖第三方库。

开发人员生产力

开发人员的生产力是更快构建应用程序的关键。 在这一点上，能够专注于应用程序开发而无需任何等待或分散注意力是非常重要的。

反应本机

如果开发人员精通JavaScript，则可以轻松地将这些技能用于跨平台应用程序开发。 React Native具有热重载功能，可以在测试UI更改时节省大量开发人员时间。 在IDE支持方面，开发人员可以自由使用他们选择的任何文本编辑器或IDE。

扑

Flutter还具有热重载功能，可以轻松启动演示应用程序。 但是，随着应用程序复杂性的增加，开发人员将需要学习并采用新的Flutter概念。 另外，Dart不是一种通用的编程语言，并且在许多IDE和文本编辑器中都缺乏对Dart的支持。

分析与结果

作为一个成熟的框架，React Native在IDE和语言功能方面具有强大的开发人员支持。 Flutter目前还很新，但是随着Flutter周围社区的发展，它会很快赶上来。

社区支持

开发人员一旦开始对技术表现出兴趣并在开发过程中采用它，便会形成一个共享知识的社区。 一个强大的社区可以帮助开发人员互相学习，并解决他们面临的问题。

反应本机

React Native于2015年推出，并从那时起开始流行。 GitHub上有一个React Native开发人员社区，世界各地都有很多聚会和会议。

扑

Flutter已经存在了一段时间，但是当Google在2017年的Google I / O会议上对其进行推广时，Flutter获得了很多关注。Flutter社区近来发展迅速，在线聚会和会议都在举行。

分析与结果

自框架启动以来，React Native社区和资源的规模不断增长。 尽管社区的支持正在迅速增长，但Flutter还是很新的。

测试支持

编写测试是一种快速获得代码反馈的好方法。 每种成熟技术始终都有一个测试框架，以允许开发人员为应用程序创建单元，集成和UI测试。

反应本机

React Native是一个JavaScript框架，JavaScript中提供了一些单元级测试框架。 像Jest这样的工具可以用于快照测试。 但是，当涉及到集成或UI级别测试时，React Native没有官方支持。 有一些第三方工具（例如Appium和Detox）可用于测试React Native应用程序，但并未得到官方支持。

扑

Flutter提供了丰富的测试功能，可以在单元，小部件和集成级别上测试应用程序。 Flutter具有很酷的窗口小部件测试功能，我们可以创建窗口小部件测试来测试UI并以单元测试的速度运行它们。 确保您查看Codemagic，这是世界上第一个专门为Flutter创建的CI / CD，以获取更多信息。

分析与结果

React Native社区不提供对集成和UI级别测试的官方支持，而Flutter具有出色的文档和丰富的测试功能。

我们的竞争进入了一个有趣的阶段，现在每一点都很重要。

构建和发布自动化支持

将移动应用程序发布到App Store或Play Store是一个痛苦的过程。 它涉及到对所有其他应用程序设置进行代码签名的复杂任务。 当涉及跨平台的移动应用程序开发时，它变得更加棘手。

反应本机

React Native官方文档没有将iOS应用程序部署到App Store的任何自动化步骤。 但是，它为从Xcode部署应用程序提供了手动过程。 这里有一篇关于如何将React Native应用程序部署到App Store的文章，但整个过程看起来都是手动的。 但是，我们可以使用第三方工具（如fastlane）来部署使用React Native编写的iOS和Android应用程序。

扑

Flutter具有强大的命令行界面。 我们可以使用命令行工具并按照Flutter文档中的说明创建和发布Android和iOS应用程序，从而创建该应用程序的二进制文件。 最重要的是，Flutter在这里正式记录了Fastlane的部署过程。

分析与结果

Flutter具有出色的构建自动化工具，可用于从命令行部署应用程序。 React Native应用程序缺少对正式支持构建自动化的CLI工具的支持。

Flutter得了5分，这意味着React Native必须获得最后的分数才能与比赛并驾齐驱。

DevOps和CI / CD支持

持续集成和持续交付实践对于任何应用程序都是必不可少的，以便获得持续的反馈并避免发布错误的代码。

反应本机

React Native没有关于设置CI / CD的任何正式文档。 但是，有些文章描述了React Native应用程序的CI / CD。 有一篇文章介绍了使用Nevercode为React Native应用设置CI / CD的过程。

扑

Flutter的“持续集成和测试”部分包含与外部资源的链接。 但是，Flutter丰富的命令行界面使我们可以轻松设置CI / CD。 Codemagic为Flutter应用程序提供CI / CD支持。

分析与结果

使用Flutter应用程序强大的CLI工具，可以轻松轻松地在CI / CD服务上进行设置。 React Native没有提供任何关于CI / CD实践的官方说明。

确实非常接近，但Flutter是这场比赛的赢家。 React Native一直奋战到最后，但Flutter是今天比赛的冠军！

结论

React Native和Flutter都有各自的优缺点，但是Flutter在这场比赛中脱颖而出。 一些行业专家已经预测Flutter是移动应用程序开发的未来。 考虑到上面的比较，很明显Flutter已经非常强大地进入了跨平台移动开发竞赛。 让我们不要预测未来，而要拭目以待！

本文由Shashikant Jagtap为Codemagic撰写 。

Shashikant是移动应用程序DevOps的从业者，也是XCTEQ Limited的董事。 Shashikant具有自动发布管道，已实现CI / CD并为许多应用程序启用了DevOps测试自动化实践。 他还 撰写了 有关移动DevOps和CI / CD的 博客 。