IM跨平台技术学习(十)：快速对比跨平台框架Electron、Flutter、Tauri、React Native等

本文由21CTO万能的大雄分享，即时通讯网有修订和改动。

1、引言

在当今快速发展的技术环境中，对跨平台桌面应用程序的需求正在不断激增。

开发人员面临着选择正确框架之挑战，以便可以高效构建可在 Windows、macOS 和 Linux 上无缝运行的应用程序。

在本文中，我们将比较五种流行的桌面应用程序开发框架：Electron、Flutter、Tauri、React Native 和 Qt，希望可以帮助你根据项目需求做出明智的技术选型决策。

2、系列文章

本文是系列文章中的第10篇，本系列总目录如下：

• 《IM跨平台技术学习(一)：快速了解新一代跨平台桌面技术——Electron》
• 《IM跨平台技术学习(二)：Electron初体验(快速开始、跨进程通信、打包、踩坑等)》
• 《IM跨平台技术学习(三)：vivo的Electron技术栈选型、全方位实践总结》
• 《IM跨平台技术学习(四)：蘑菇街基于Electron开发IM客户端的技术实践》
• 《IM跨平台技术学习(五)：融云基于Electron的IM跨平台SDK改造实践总结》
• 《IM跨平台技术学习(六)：网易云信基于Electron的IM消息全文检索技术实践》
• 《IM跨平台技术学习(七)：得物基于Electron开发客服IM桌面端的技术实践》
• 《IM跨平台技术学习(八)：新QQ桌面版为何选择Electron作为跨端框架》
• 《IM跨平台技术学习(九)：全面解密新QQ桌面版的Electron内存占用优化》
• 《IM跨平台技术学习(十)：快速选型跨平台框架Electron、Flutter、Tauri、React Native等》（* 本文）
• 《IM跨平台技术学习(十一)：环信基于Electron打包WebIM桌面端的技术实践》
• 《IM跨平台技术学习(十二)：万字长文详解QQ Linux端实时音视频背后的跨平台实践》
• 《IM跨平台技术学习(十三)：从理论到实践，详细对比Electron和Tauri的优劣》
  

3、初识框架

1）Electron：



* 技术背景：Electron 由 GitHub 开发，因其使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序的能力而广受欢迎。
* 主要功能：Electron 通过其 Node.js 集成提供对本机 API 的轻松访问，使开发人员能够创建功能丰富的应用程序。它还支持用 C++ 编写的本机插件，尽管构建这些插件可能更复杂且容易出错。

2）Flutter：



* 技术背景：Flutter 由 Google 创建，以其在移动应用程序开发中的使用而闻名，但也可用于桌面应用程序。
* 主要特点：Flutter 提供了一组丰富的可定制 UI 小部件，其 Dart 代码被编译为本机机器代码，从而实现快速执行并减少开销。它采用独特的“基于小部件”架构，提供丰富的可定制 UI 小部件。

3）Tauri：



* 技术背景：Tauri 是一个较新的框架，旨在创建安全且轻量级的桌面应用程序。它旨在弥合 Rust 和 Web 技术之间的差距。
* 主要功能：Tauri 支持使用 Rust 或 C 构建本机插件，从而可以访问 Web 平台中不可用的本机 API 和功能。

4）React Native：



* 技术背景：React Native，同样来自 Facebook，主要以移动应用程序开发而闻名，但也有桌面应用程序开发的扩展。
* 主要功能：React Native 提供了一种访问本机 API 和功能的方法，但与其他框架相比，它可能需要更多的努力。它支持无缝集成第三方库。

5）Qt：



* 技术背景：Qt 是一个 C++ 框架，绑定了多种语言，包括 Python 和 JavaScript。这是一个历史悠久、历史悠久的框架。
* 主要功能：Qt 提供出色的本机集成功能，允许开发人员访问本机 API 和功能。它提供了一套用于构建跨平台桌面应用程序的全面工具，并强调本机外观和感觉。

4、跨平台能力

在跨平台功能方面，Electron、Flutter、Tauri 和 Qt 足以在多个操作系统上运行应用程序。它们为 Windows、macOS 和 Linux 提供广泛的支持，使其成为需要广泛兼容性的项目的合适选择。

React Native 虽然主要是为移动设备设计的，但可以扩展以创建桌面应用程序。然而，它的跨平台支持可能不像其他框架那样无缝，并且可能需要额外的努力才能在所有平台上实现一致的性能和 UI。

5、性能表现

性能是桌面应用程序开发的关键因素。

以下是这些框架的性能特征：

• 1）Electron：以其较高的资源使用率而闻名，Electron 应用程序可能会占用更多内存和 CPU，从而影响较旧或功能较弱的计算机的性能；
• 2）Flutter：Flutter 的性能值得称赞，这要归功于它的编译代码和 GPU 加速。它提供快速的启动时间和流畅的动画；
• 3）Tauri：Tauri 因其轻量级特性和低资源消耗而脱颖而出。它是构建快速且响应灵敏的桌面应用程序的绝佳选择；
• 4）React Native：React Native 桌面应用程序可以节省资源，但跨平台优化性能可能需要额外的工作；
• 5）Qt：Qt 的性能非常出色，提供类似本机的速度和响应能力。它是资源密集型应用程序的首选。
  

6、用户界面

创建丰富且响应迅速的用户界面是桌面应用程序开发的一个重要指标。

以下是这些框架在 UI 功能方面的比较：

• 1）Electron：Electron 提供了大量预构建的 UI 组件和广泛的主题选项。开发人员可以轻松创建具有视觉吸引力的应用程序；
• 2）Flutter：Flutter 基于小部件的方法允许高度可定制且具有视觉吸引力的用户界面。它提供了广泛的开箱即用的小部件；
• 3）Tauri：Tauri 不像其他框架那样提供那么多的 UI 组件，但允许对用户界面进行严格控制，这有利于创建独特的设计；
• 4）React Native：通过React Native，开发人员可以使用第三方库和组件进行UI设计。可能需要额外的工作才能实现完全定制的外观；
• 5）Qt：Qt 擅长提供与目标平台无缝集成的类似本机的 UI 元素。它是需要精美原生外观的应用程序的首选。
  

7、开发经验

流畅的开发工作流程对于生产力至关重要。

以下是这些框架在开发经验方面的比较：

• 1）Electron：Electron 提供了一套广泛的开发工具和一个活跃的社区。调试和热重载得到良好支持；
• 2）Flutter：由于其基于 widget 的架构和强大的文档，Flutter 的开发体验得到了简化。热重载是一个突出的功能；
• 3）Tauri：Tauri 仍然相对较新，但使用 Rust 和 JavaScript 提供了简化的开发过程。它强调快速发展；
• 4）React Native：React Native 为 Web 和移动开发人员提供了熟悉的开发体验。然而，过渡到桌面可能需要一个学习曲线；
• 5）Qt：Qt 提供了一个成熟的开发环境，具有广泛的 IDE 和工具。它以其稳定性和全面的文档而闻名。
  

8、原生集成

访问本机平台功能和 API 对于许多桌面应用程序至关重要。

让我们看看这些框架如何处理本机集成：

• 1）Electron：Electron 通过 Node.js 集成提供对本机 API 的轻松访问。它还支持用 C++ 编写的本机插件，尽管构建这些插件可能更复杂且容易出错；
• 2）Flutter：Flutter 的 Dart 代码被编译为本机机器代码，从而实现快速执行并减少开销。它采用了一种称为“基于小部件”架构的独特方法，提供了一组丰富的可定制 UI 小部件；
• 3）Tauri：Tauri 支持使用 Rust 或 C 构建原生插件，可用于访问 Web 平台中不可用的原生 API 和功能；
• 4）React Native：React Native 提供了一种访问本机 API 和功能的方法，但与其他框架相比可能需要更多的努力。它支持无缝集成第三方库；
• 5）Qt：Qt 提供出色的本机集成功能。它是一个 C++ 框架，绑定了多种语言，包括 Python 和 JavaScript，可用于访问本机 API 和功能。
  

9、社区与生态系统

开发人员社区的规模和活跃度，可以显着影响框架的成功和第三方库的可用性。

这些框架的表现如下：

• 1）Electron：Electron 拥有一个庞大而活跃的社区，提供大量可用的插件和扩展；
• 2）Flutter：Flutter 拥有不断增长的社区和越来越多的软件包，主要专注于移动开发，但也有桌面扩展；
• 3）Tauri：Tauri 仍在成长，但其社区充满热情并致力于其发展。其生态系统正在稳步扩展；
• 4）React Native：React Native 拥有完善的社区，主要专注于移动开发。桌面扩展社区规模较小，但正在不断增长；
• 5）Qt：Qt 拥有悠久的历史和强大的生态系统，拥有庞大的工具、小部件和扩展库。
  

10、 框架们的成功案例

让我们探索一些现实世界的用例和使用这些框架构建的应用程序示例，以更好地了解它们在不同场景中的优点和缺点。

以下是具体的场景举例：

• 1）Electron：广泛用于构建跨平台桌面应用程序，包括代码编辑器（VSCode）、通信工具（Slack）和娱乐应用程序（Spotify）；
• 2）Flutter：Flutter 逐渐成为富媒体应用程序的选择，已用于 Google Ads、阿里巴巴和 Reflectly 等应用程序；
• 3）Tauri：Tauri 正在获得轻量级、安全应用程序的青睐，包括密码管理器 (LosePass) 和通信工具 (Mailspring)；
• 4）React Native：虽然主要是一个移动框架，但 React Native 已扩展到 Discord 和 Microsoft Teams 等应用程序中的桌面使用；
• 5）Qt：Qt 是一种多功能选择，可用于从工业软件到游戏和汽车信息娱乐系统的广泛应用。
  

11、开发时的挑战

虽然每个框架都有其优点，但必须意识到潜在的挑战和限制。

比如这些：

• 1）Electron：Electron 应用程序可能会占用大量资源，可能会导致旧硬件上出现性能问题；
• 2）Flutter：如果您主要是移动开发人员，那么使用 Flutter 进行桌面开发可能会涉及一个学习曲线；
• 3）Tauri：作为一个相对较新的框架，与更成熟的选项相比，Tauri 可能拥有较小的社区和较少的第三方库；
• 4）React Native：将 React Native 转换到桌面可能需要额外的努力，并且某些特定于平台的功能可能更难访问；
• 5）Qt：Qt 的学习曲线，特别是对于刚接触 C++ 的开发人员来说，可能是一个挑战。
  

12、本文小结

为桌面应用程序开发选择正确的框架很大程度上取决于项目的具体要求，例如目标平台、性能预期、UI 需求和所需的开发体验。

如果正在寻找一个允许你利用 Web 技术的框架，Electron和React Native是不错的选择。Electron 拥有庞大的社区和广泛的预构建组件，而 React Native 提供强大的组件系统，并允许在移动和桌面平台之间重用代码。

如果性能和小包大小是优先考虑的，请考虑Flutter或Tauri。Flutter 提供快速的启动时间和流畅的动画，而 Tauri 则以其轻量级和低资源消耗而闻名。

如果你需要一个具有出色本机集成和本机外观的框架，Qt是一个可靠的选择。

如果你正在开发需要丰富的、可定制的用户界面的复杂应用程序，Flutter可能是最佳选择，因为它基于 widget 的开发方法。

还请各位开发者要记住，请考虑与每个框架相关的学习曲线，特别是如果你或团队尚不熟悉所涉及的技术。比如，Tauri 需要 Rust 或 C 的前置知识，而 Flutter 使用 Dart 做为预备知识。

13、相关资料

[1] Electron官方开发者手册
[2] Flutter官方手册
[3] Tauri官方手册
[4] React Native开发指南
[5] QT官方文档和手册
[6] 快速了解新一代跨平台桌面技术——Electron
[7] Electron初体验(快速开始、跨进程通信、打包、踩坑等)
[8] vivo的Electron技术栈选型、全方位实践总结
[9] 融云基于Electron的IM跨平台SDK改造实践总结
[10] 闲鱼IM基于Flutter的移动端跨端改造实践
[11] 网易云信基于Electron的IM消息全文检索技术实践