Flutter 与 ReactNative

已发表: 2022-01-02

有许多跨平台框架可用于开发一种基于代码的移动应用程序，这些应用程序提供最接近真实本机应用程序的性能。最强大的框架是Google 的 Flutter和Facebook 的 React Native 。 下面我们来看看 Flutter 和 ReactNative 的优缺点，做一个客观的比较。

生产率

最重要的因素之一是使用每个框架的便利性和开发人员体验。为了估计每个框架的生产力，我们选择了五个标准。

热重载支持。 当代码发生更改时，此功能会自动重新启动应用程序。此外，它还保留了应用程序的前一阶段。 React Native 和 Flutter 都支持这个特性。据开发人员称，此功能使开发过程更易于访问并节省了时间。

代码结构。 代码结构存在较大差异。首先，Flutter 的模板和数据在整个代码中并没有分开。它使用 Dart 编程语言。此外，在 Flutter 中创建的 UI 布局不需要任何其他模板语言或可视化工具。这些过程可以节省时间。 React Native 将结构决定留给开发人员，这使其成为需要考虑的权衡。

安装和配置。 Flutter 非常易于安装并立即开始使用。此外，Flutter 医生协助解决系统问题。 React Native 拥有帮助创建新应用程序并提供开发必不可少的库的工具。此外，它们将为代码提供一些结构。创建新的 React Native 应用程序最流行的工具是 Expo 和 Create React Native App。

支持的 IDE 。 Flutter 支持的 IDE 较少，例如 IntelliJ IDEA、Android Studio 和 VS Code。另一方面，React Native 集成了很多 IDE，所以很难选择使用哪个。

特定于硬件的 API 。 React Native 提供地理定位和 Wi-Fi 编程接口。此外，还有蓝牙、相机、生物识别和 NFC 选项。用可自定义的图形进行绘制的解决方案并不多，只能借助本机代码来实现。对于 Flutter，现在正在构建许多特定于硬件的 API。因此，目前提出索赔非常具有挑战性。 Flutter 的成功取决于特定于硬件的 API 的质量。

编程语言

React Native 使用 JavaScript 和 JSX 语法来构建视图。 JavaScript 可用于移动开发以及 Web 编程。此外，开发人员可以选择 Node.js 进行后端开发。它允许我们对堆栈的所有部分使用一种语言。

Flutter 使用 Dart 编程语言。这种语言不如 JS 流行，但 Google 使用并推广了它。 Dart 为原生和 React Native 开发人员提供了一个循序渐进的学习曲线。

技术架构

Flutter： Flutter 架构使用 Dart 框架，该框架具有 Material Design 和 Cupertino 等大部分内置组件，并在其中提供开发移动应用程序所需的所有技术。 因此，它的尺寸更大，并且通常不需要桥接器与本机组件进行通信。 Dart 框架使用具有所有协议、组合和通道的 Skia C++ 引擎。

React Native： React Native 架构依赖于 JS 运行时环境架构，也称为 JavaScript 桥接器。 JavaScript 代码在运行时被编译为本机代码。 React Native 使用 Flux 架构。简而言之，React Native 使用 JavaScript 桥接器与原生组件进行通信。

用户界面组件

Flutter 最重要的优势之一是它提供了利用其 UI 组件而不是操作系统的原生组件的机会。因此，提供自定义 UI 组件和提高灵活性要容易得多。

有这样的 Flutter UI 元素：

为 Android 提供了 Material 小部件。
库比蒂诺适用于 iOS。
独立于平台的小部件。

使用 Flutter 的小部件，可以实现与操作系统组件以及本机屏幕的高度兼容性。但是，对于 iOS 应用程序开发，例如 iOS 样式的表单组件，仍然需要 Cupertino 库。

另一方面，由于 React Native UI 库非常广泛，开发人员可以获得更加个性化的用户体验。

表现

Flutter： Flutter 采用完全不同的方法在屏幕上呈现应用程序。 首先，Flutter 不使用任一平台的原生组件。相反，它会创建其小部件并利用 GPU 将其呈现在屏幕上。它将所有 Dart 代码编译为原生 ARM 代码，然后可以直接由 CPU 运行。这使得使用 Flutter 构建的应用程序非常快。 Flutter 的应用程序是使用 arm C/C++ 库编译的，因此它更接近机器语言并提供更好的原生性能。

React Native：另一方面，React Native 使用 Javascript 桥来解释要呈现的 UI 组件，然后调用 Objective-C API 或 Java API 在屏幕上呈现 iOS 或 Android 组件。 这个额外的抽象层可能会使 React Native 应用程序变慢。

测试支持

Flutter： Flutter 提供了一组丰富的测试功能来测试应用程序、小部件和集成级别。 Flutter 在此处提供了关于测试 Flutter 应用程序的大量文档，您还可以阅读有关测试 Flutter 应用程序的 Nevercode 博客，了解有关如何测试 Flutter 应用程序的详细信息。 Flutter 有一个很棒的小部件测试功能，我们可以创建小部件测试来测试 UI 并以单元测试的速度运行它们。

React Native： React Native 是一个 JavaScript 框架，这就是为什么它在 JavaScript 中有一些可用的单元级测试框架。 Jest 工具可用于快照测试。但是，在集成或 UI 级别测试方面，React Native 不提供 React Native 的官方支持。有第三方工具如 Appium 和 Detox 可用于测试 React Native 应用程序，但它们不受官方支持。

文档和工具包

Flutter： Flutter 提供了非常好的文档，它允许移动应用程序开发人员在记录他们的应用程序时使用它们，从而使他们的生活变得轻松。 因此，就文档和 Toolkit 而言，与对应物相比，Flutter 是最佳选择。

React Native： React Native 框架的文档没有组织，因为大部分组件是由第三方设计的，他们没有提供适当的文档。

构建和发布自动机

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

React Native： React Native 官方文档没有任何将 iOS 应用程序部署到 App Store 的自动化步骤。 但是，它提供了从 Xcode 部署应用程序的手动过程。这里有一篇关于如何将 React Native 应用程序部署到 App Store 的文章，但整个过程看起来是手动的。但是，我们可以使用 fastlane 等第三方工具来部署使用 React Native 编写的 iOS 和 Android 应用程序。如本文所述，使用 fastlane 发布 React Native 应用程序的过程。这意味着 React Native 必须依赖第三方库来实现构建和发布自动化。

CI/CD 支持

Flutter： Flutter 有一个关于持续集成和测试的部分，其中包括指向外部资源的链接。 但是，Flutter 丰富的命令行界面让我们可以轻松设置 CI/CD。

React Native： React Native 没有任何官方文档来设置 CI/CD。 但是，有一些文章描述了 React Native 应用程序的 CI/CD。

结论

Flutter 和 React Native 框架在稳定性、性能、文档方面各有优缺点。

一些行业专家已经预测 Flutter 是移动应用程序开发的未来，我们从以上方面进行比较，很明显 Flutter 已经非常强烈地进入了跨平台开发竞赛。