IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
本文由21CTO万能的大雄分享,本文有修订和改动。
1、引言
在当今快速发展的技术环境中,对跨平台桌面应用程序的需求正在不断激增。
开发人员面临着选择正确框架之挑战,以便可以高效构建可在 Windows、macOS 和 Linux 上无缝运行的应用程序。
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。

- 移动端IM开发入门文章:《新手入门一篇就够:从零开发移动端IM》
- 开源IM框架源码:https://github.com/JackJiang2011/MobileIMSDK(备用地址点此)
(本文已同步发布于:http://www.52im.net/thread-4598-1-1.html)
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等》(* 本文)
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官方文档和手册
[7] Electron初体验(快速开始、跨进程通信、打包、踩坑等)
[8] vivo的Electron技术栈选型、全方位实践总结
[9] 融云基于Electron的IM跨平台SDK改造实践总结
[11] 网易云信基于Electron的IM消息全文检索技术实践
(本文已同步发布于:http://www.52im.net/thread-4598-1-1.html)
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等的更多相关文章
- Flutter介绍 - Flutter,H5,React Native之间的对比
Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...
- [Mobi] 移动端应用技术选型的思考, Native, Flutter, Quasar, React Native
今天我主要是从开发 **不同产品** 和 **技术力量差别** 两个方面来做一个比较: Native 除了两端的技术力量要求高.花的功夫多,没毛病,看你有没有这个实力. Flutter 通过实现中间层 ...
- 跨平台框架与React Native基础
跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...
- 使用React Native来撰写跨平台的App
React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...
- 浅谈移动应用的跨平台开发工具(Xamarin和React Native)
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...
- React Native学习笔记----React Native简介与环境安装
React Native 的基础是React, 是在 web 端非常流行的开源 UI 框架.要想掌握 React Native,先了解 React 框架本身是非常有帮助的. 一.什么是React Na ...
- React Native学习方法论
这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学 ...
- React Native入门——IDE及其它相关基础技术
关于React Native的开发,当中一个问题是缺少好用的IDE,有些人说不就是JS么,搞一个记事本也就写了,那样尽管牛逼,但事实上还是非常头大的,有一款好的IDE还是能提升开发效率的,这里对几个还 ...
- 热门跨平台方案对比:WEEX、React Native、Flutter和PWA
本文主要对WEEX.React Native.Flutter和PWA几大热门跨平台方案进行简单的介绍和对比.内容选自<WEEX跨平台开发实战> (WEEX项目负责人力荐,从入门到实战,教你 ...
- 移动端跨平台方案对比:React Native、weex、Flutter
跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...
随机推荐
- 听说过Paas、Saas和Iaas,那你听说过Apaas吗?
互联网行业就喜欢搞一些单词的缩写,在云计算行业,前者有SaaS.PaaS.IaaS,最近两三年APaaS的概念又开始被关注.APaaS到底是什么意思,有什么用,与前三者的区别是什么?本文将对这些问题进 ...
- 卧槽,WebStorm现在免费啦!
前言 就在昨天1024程序员节,JetBrains突然宣布WebStorm现在对非商业用途免费啦.以后大家再也不用费尽心思的去找破解方法了,并且公告中的关于非商业用途定义也很有意思. 关注公众号:[前 ...
- 看图认识Javascript
- php如何快速入门
PHP交流群 656679284 为PHP广大爱好者提供技术交流,有问必答,相互学习相互进步! 学习教程 学习前期,首要的WEB前端基础知识,比如html5/css3/java/jquery有个简 ...
- CF207C3 Game with Two Trees
CF207C3 Game with Two Trees 妙到家的树上字符串问题. 约定 树 \(1\):\(t_1\). 树 \(2\):\(t_2\). \(S_{1/2}(i,l)\) 为树 \( ...
- Python基础:Python的变量和对象
一.基本原理 Python中一切都是对象,变量中存放的是对象的引用.这是一个普遍的法则.我们举个例子来说,Python是如何来处理的. x = 'blue' y = 'green' z = x 当p ...
- 双重检查锁定及单例模式(ibm社区)
本文来自ibm社区 单例创建模式是一个通用的编程习语.和多线程一起使用时,必需使用某种类型的同步.在努力创建更有效的代码时,Java 程序员们创建了双重检查锁定习语,将其和单例创建模式一起使用,从而限 ...
- 命令行应用开发初学者指南:脚手架篇、UI 库和交互工具
在日常的前端开发工作中,我们经常依赖各种命令行工具来提高效率和代码质量.例如,create-react-app 和 eslint 等工具不仅简化了项目的初始化过程,还能自动执行代码检查和格式化任务.当 ...
- mac通过网线连接主机(fnOS)
一.mac端 mac是typec的,用了个转接头+网线直连主机,初始化的时候跟下面一致,默认都是自动的 点击详细信息,配置IPv4选择使用DHCP 二.主机端 主机端是最麻烦的,刚开始的时候怎么也找不 ...
- 如何在 duxapp 中开发一个兼容 RN 的动画库
Taro 一直以来都没有一个能兼容 RN 的动画方案,duxapp 中扩展了 createAnimation 方法,让这个方法兼容了 RN 端,下面让我们来看看实现思路 createAnimation ...