您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

跨平台开发,Flutter还是React Native?

时间:2023-02-09 12:23:42  来源:51CTO  作者:胥磊

作者 | 胥磊

审校 | 孙淑娟

随着移动应用的不断普及,各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案,这里跨平台主要是指Android/ target=_blank class=infotextkey>安卓和IOS。统计数据显示:截止2021年6月,安卓以接近73%的份额控制了移动操作系统市场,继续保持其全球移动操作系统的领先地位。谷歌的安卓和苹果的iOS共同占用超过99%的全球市场份额。

本文中,我们将比较两个流行的跨平台开发框架:Flutter和React Native,对比分析每个框架的优点和缺点,并探讨哪种框架更适合在2023年使用。

一、为什么移动应用开发如此受欢迎?

移动应用开发是一个稳步增长的业务域,地球上几乎所有的人都有手机,这意味着潜在的用户数量近乎是无限的,同时现在几乎所有的产品都有应用开发的需求。你可以选择多种方式来设计和构建一个应用,可以使用本地方法如Swift和Object-C来创建iOS应用,JAVA来创建安卓应用,这些都是官方提供支持和功能更新的编程语言。当然也可以使用跨平台框架如Flutter和React Native。

二、什么是跨平台应用开发

开始之前,我们先解释下“跨平台应用开发”这个术语,其指的是使用一套代码开发的应用可以运行在iOS和安卓上,同时提供近乎相同的功能体验,在这里我们将其分为以下两类。

1.混合开发

混合型应用指的是使用html5、cssJavaScript等前端技术组合开发的应用。有些代码运行在目标平台的网络视图中,因此在不同的平台上可以共享这些代码(如HTML5、CSS和Javascript)。WebView就是混合型应用,其使用嵌入式的WebViews来渲染用户界面,而这其中就可以使用HTML5、CSS和JavaScript进行定制化开发。

WebView应用在访问设备上那些开箱即用的API时会有一些限制,需要额外的工作来实现与原生应用相同的功能,带来的好处也是显而易见的,这些应用天生就是跨平台的,开箱即用可以大大节省开发时间。混合型应用在两个平台上看起来是一样的,但底层行为却是不同的,这都取决于目标平台的可用API。例如一个天气应用的程序分别在两个平台上检查当前位置的天气服务API,根据每个平台提供的数据返回不同的结果。

2.原生开发

原生应用指的是使用目标平台(如安卓或iOS)的原生SDK开发的应用。这些代码只为目标平台所编写,所以不能在不同的平台上共享,而且用户界面也是使用特定平台的组件和库来实现的。和混合应用相比,原生应用能提供更好的用户体验而且看起来也更加本地化,但它们的开发成本也更高。由于开发人员需要更多的时间来学习目标平台的API,所以开发新功能就需要更长的时间。

三、跨平台框架:Flutter和React Native

Flutter和React Native是当今最好的跨平台框架之一。它们都使用原生的组件来提供可定制的、响应式的UI,同时可以在不同的平台上共享代码。Flutter框架由谷歌开发,而React Native框架则是由Facebook提供的。这些科技巨头都拥有非常庞大的团队,负责从SDK到文档、技术支持等一切事务。虽然Flutter和React Native应用都是原生的,但它们比传统的原生应用开发更具优势,因为它们可以跨平台共享相当一部分代码。根据Instagram的数据,通过React Native在iOS和安卓之间共享的代码超过90%。

四、Flutter和React Native的历史

Fluttter是在2016年10月的Dart开发者峰会上发布的,这个跨平台的移动应用开发框架为开发者提供了工具,通过使用谷歌自己的Dart语言编写一套代码,可以同时为iOS和安卓构建原生应用。

相比2018年2月16日Flutter的第一个稳定版本(1.0)问世,React Native起步比Flutter早一些。虽然它的第一个测试版本在2015年3月就发布了,然而直到2017年3月,才成功脱离测试阶段。2017年9月5日,React Native在科技巨头Facebook的强力支持下发布了1.0版本。虽然两者出现时间都相对较晚,但并不影响各个公司对它们的喜爱,React Native已经被Facebook、Instagram、AIrbnb和Uber等大公司使用,而Flutter也已经被宝马、丰田、eBay以及谷歌自己的谷歌支付所使用。

 

图片

 

五、Flutter和React Native的比较

Flutter和React Native最主要区别是,React Native并没有编译成原生的语言(如Java、Swift、Objective-C),而是简单地运行其JavaScript代码。而Flutter则将其Dart语言编译成原生语言,这可能会影响性能。

另一个很大区别就是,React Native使用vanilla JavaScript(除了JSX)来编写组件。鉴于React Native的动态特性,Facebook的开发人员建议使用Flow或TypeScript来编写代码。同样对于Flutter,谷歌也推荐使用Dart来编写代码,因为它有自己的一套静态类型。

在我们看来,决定如何选择这两种技术应该更多地基于自身的偏好,而不是它们的实际特点和性能。当然,能了解所有的编程范式就更好了,这样你就可以轻松地掌握新的语言和框架,即使它们不是用你熟悉的语言编写的。对于那些已经熟悉JavaScript(ES2015+)或TypeScript/Flow的程序员来说,React Native入门要容易得多,尤其对那些使用过React的开发者来说更加容易,因为React和React Native之间有大量的相似之处。JavaScript在移动开发领域仍有很大的市场份额,由于React Native和Flutter都允许选择自己喜欢的编程语言,所以很难说哪一种会在2023年更受欢迎。

另外,还有其他一些可能影响选择的重要因素,如:

  • 公司对特定技术栈的偏爱。
  • 开发者对某一语言/框架的熟悉程度。
  • 具备使用特定技术所需技能的开发人员的可用性。

正如我们上面指出的,React Native和Flutter都将在2023年成为重要的参与者,所以最终哪个成为你的最佳选择取决于你的长期目标。

六、跨平台开发框架如何工作

尽管跨平台移动应用开发框架有许多共同的概念和特性,但它们都有各自不同的目的。

React Native目的是结合React Web带来的开发便利,并提供近乎原生应用的性能体验。这个设计不是通过在iOS和Android之间使用一组共享组件实现,而是将完全独立的UI封装到一个JavaScript包中,这里面包含几乎一半的应用程序代码。Flutter的目的主要是为了满足谷歌自身的需求,通过创建可在iOS和Android应用程序之间共享的可重复使用的UI组件,是将缩减开发周期与原生代码性能结合起来的又一次尝试,这也是为什么使用谷歌的Flutter开发要比React Native快得多。Flutter的设计理念也是让应用开发变得更简单、更容易。它使用Dart编写代码,这种语言可以在一个周末学会并在几天甚至几小时内精通,当然前提取决于开发者所掌握的技术栈。这就是为什么我们认为Flutter将成为那些需要在不牺牲性能或功能的情况下,需要快速创建大量原生移动应用程序的公司的首选移动开发框架。

七、构建移动应用又有了乐趣

当谷歌发布Flutter时,开发者被它在实践中的表现所震惊,与其他的专门为构建跨平台移动应用的技术相比Flutter的表现非常好。React Native在iOS和Android之间共享UI代码的理念是一个伟大的创举,但由于React Native固有的局限性,其所创建的应用程序不能像原生应用那样表现出色。Flutter提供了许多你在当今任何其他工具中都找不到的好功能。

Dart是一种令人印象深刻的语言,它天生是为创建移动应用程序而建立的。Dart是目前构建Android和iOS应用程序的最快的语言,它使得构建高性能的UI组件变得更容易,有强大的IDE(集成开发环境)支持,且具备强大的自动完成功能,允许在不丢失应用状态的情况下进行实时编码原型设计,并最终强制使用面向对象的设计模式。拥有一个有主见的框架意味着谷歌将能够为你做出许多重要的决定,同时使社区能够专注于构建应用这件真正重要的事情上。

Flutter有一个完整的工具链和一套漂亮的类似Material Design的组件,这些开发者都可以在他们的应用程序中复用。谷歌还提供了一些与第三方库的集成如:用于有效处理图像的图像处理库、SQL数据库(通过抽象进行访问)和文本编辑器。所有这些都以一个内聚的软件包形式呈现给开发者,其设计考虑到了速度、易用性、生产力和性能。

八、Flutter和React Native应用的优缺点

使用Flutter创建的应用程序与原生应用程序没有区别,它们具有相同的性能、外观和体验(除了一些特定平台的风格)。在使用React Native构建应用程序时,人们通常抱怨的主要问题与它的运行时环境有关,这比为每个架构管理单独的进程的问题更严重。这意味着你使用React Native尽管可以实现接近原生的性能,但无法达到纯原生应用等同的性能。在支持现有的JavaScript代码库和允许iOS和Android应用之间重用共享的组件方面,Flutter并没有像React Native那样便捷。现在让我们深入了解一下这两个框架的技术利弊。

1.在原生性能方面的比较

React Native提供了一个改进的JavaScript虚拟机,它的JIT编译器比V8速度更快。得益于它的预编译框架,你可以自由地发布你需要的任何代码,因为它将被编译成一个本地可执行文件。在实践中开发React Native和纯原生应用一样快,因为它可以实现与iOS应用相同的功能,而不需要对iOS的构建设置进行任何修改。同样Flutter也有自己的预编译器,一旦你创建了自己的项目,它将为iOS和安卓发布优化后的代码。您无需像React Native那样将你的代码库发布到应用程序的二进制中文件中,就能获得原生的性能。

2.在应用程序大小方面的比较

React Native应用程序通常包含一个压缩的约300kb的JavaScript运行时文件,尽管可以通过调整一些选项来降低文件大小,如Bypass filling(这将迫使React Native跳过填充其虚拟DOM的过程,从而造成与原生UI的差异),以及将useDeveloperMode设置为true(这将在内存中调整图像大小并降低其质量)。Flutter提供了一个预编译器,允许开发者只发送他们正在构建的应用程序所需的代码库,而不必与之捆绑任何组件。如果你愿意,可以在现有的JavaScript虚拟机内运行Flutter,这样可以节省应用程序所需的空间。

3.最小所需SDK版本的比较

React Native通常可以在任何iOS 9+或Android 5.0+的SDK上构建,而不会存在任何问题。但为了达到最佳性能,你应该在发布时使用最新的可用SDK版本。

实际上,React Native应用可以在更早的iOS和Android SDK上构建,并可以在运行时提供一组有限的功能,但为了获得所有的功能,你需要使用最新的SDK版本。

Flutter应用程序可以在Android 21 (Lollipop)或更新的版本上进行构建,我们同样建议使用最新的SDK版本进行构建以获得最佳性能。Flutter可以在iOS 8或更新的系统上运行,但鉴于苹果已经废弃了Flutter使用的大部分API,调用那些API可能会导致运行时崩溃。

4.在UI开发方面的比较

Flutter有自己的一套用于渲染用户界面的组件,在构建Flutter应用程序时,你也可以重用现有的iOS或Android代码。作为第三方库可能更容易地重用现有的本地组件,所以将Flutter组件映射到现有的iOS和Android UI组件并不容易,但这仍是一项正在进行的工作。React Native则提供了一个桥接,允许你将现有的iOS和Android代码作为JavaScript模块进行重用,以及公开了一些API,作为手动创建本地UI组件和渲染它们的JavaScript代码之间的桥梁。

5.在调试方面的优缺点

React Native有自己的调试器,可以连接到你在iOS和Android上运行的应用程序,它为开发者提供了JavaScript虚拟机当前状态的预览,以及各种检查内存使用情况或动态调整某些选项的工具。Flutter也提供了类似的调试器,除了提供渲染引擎当前状态的预览与React Native不同之外,其余都类似。

6.移动平台间代码重用的比较

React Native有自己的一套API,在开发iOS和Android时都可以使用。虽然大多数使用React Native的公司会先在一个平台(通常是iOS)上开发他们的应用程序,然后再移植到另一个平台,但如果愿意你也可以很容易的在iOS和Android应用程序里面编写共享组件。Flutter应用程序是用特定平台的代码构建的,因此不可能在你的iOS和Android应用程序里共享任何代码。然而,作为第三方库可以使重用现有的本地组件变得更容易。

7.Flutter或React Native哪一个更容易学习?

React Native和Flutter都很容易学习(就API而言),但前提取决于开发者的专业知识。两者都有一个庞大的、参与性强的开发者社区,可以给新的开发者提供帮助,并不断创建新的工具和组件。对于一个几乎没有编码经验的全新开发者,我们可能会建议从React Native开始,因为它提供了一套预定义的组件,可以用来构建iOS和Android应用程序,这样你就可以专注于学习一种API,而不必担心要学习所有用于渲染视图的API。而对于有一定编码经验的开发者,我们可能会推荐Flutter而不是React Native,因为Flutter提供的API更接近于iOS和Android。此外,Flutter背后的团队非常注重Flutter提供的开发体验,确保能够与其他SDK(包括React Native)提供的开发体验媲美。

8.2023年Flutter与React Native的对比

React Native于2015年问世,那时起已经被许多公司所使用。JavaScript变化非常快,所以React Native也随着时间的推移不断发展,而且在开源社区的贡献下加入了很多新的功能。Flutter是一项较新的技术,如果你习惯了Android或iOS,开始可能会感到相当陌生。但谷歌为了使其更易入手付出了很多努力,因此大多数熟悉iOS或Android开发的人应该能够很快掌握它。

九、结论

Flutter和React Native都是跨平台应用开发的绝佳选择。虽然它们有一些相似之处,但也有一些关键的差异是你需要知道的。为你的商业应用或初创应用选择合适的跨平台框架,主要取决于你的开发经验、开发团队,以及你的项目需要访问哪些本地组件, 我们希望这篇文章能帮助你做出明智的选择。

原文链接:https://dzone.com/articles/comparing-flutter-vs-react-native

译者介绍

胥磊,51CTO社区编辑,某头部电商技术副总监,关注Java后端开发,技术管理,架构优化,分布式开发等领域。



Tags:跨平台   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Qt与Flutter:在跨平台UI框架中哪个更受欢迎?
在跨平台UI框架领域,Qt和Flutter是两个备受瞩目的选择。它们各自具有独特的优势,也各自有着广泛的应用场景。本文将对Qt和Flutter进行详细的比较,以探讨在跨平台UI框架中哪个更...【详细内容】
2024-04-12  Search: 跨平台  点击:(6)  评论:(0)  加入收藏
2024“跨平台”不香了?知名开源项目淘汰Xamarin,转向原生开发
开源密码管理工具 Bitwarden 开发者在 Reddit 发布消息,称自家应用的 iOS 和 Android 客户端采用微软的跨平台框架 Xamarin 开发,不仅早已过时且消耗资源较多。开发者称,虽然看...【详细内容】
2024-03-07  Search: 跨平台  点击:(23)  评论:(0)  加入收藏
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  Search: 跨平台  点击:(50)  评论:(0)  加入收藏
Docker如何跨平台下载Arm架构的镜像
Docker是一个开源的容器化平台,它可以让开发者打包应用程序及其依赖项到一个容器中,并在任何地方运行这个容器,而不用担心环境配置的问题。类比一下,就好像打包一个包裹,里面包含...【详细内容】
2023-09-02  Search: 跨平台  点击:(374)  评论:(0)  加入收藏
使用Electron打造跨平台程序需要关注的技术点
背景上篇文章已经介绍了使用electron forge+vite+vue3来实现一个桌面应用程序的框架。本文重点介绍完善一个这样的框架的几个通用的需求点及实现方式。需求 实现客户端在线...【详细内容】
2023-08-15  Search: 跨平台  点击:(177)  评论:(0)  加入收藏
微软推出 VS Code 用 Unity 开发工具包,助力跨平台软件游戏开发
IT之家 8 月 4 日消息,微软日前针对 VS Code,推出了一款跨 Windows、macOS 和 Linux 平台的 Unity 开发工具包,该工具包基于微软此前于 6 月推出的 C# 开发工具包和 C# 扩展插...【详细内容】
2023-08-04  Search: 跨平台  点击:(307)  评论:(0)  加入收藏
Meta 发布中间图形库 “IGL”,改善跨平台游戏渲染一致性
IT之家 7 月 11 日消息,Meta 日前发布了中间图形库 (Intermediate Graphics Library - IGL),作为一个新的控制跨平台游戏下渲染的 GPU 的跨平台库,以改善跨平台游戏画面表现的一...【详细内容】
2023-07-11  Search: 跨平台  点击:(117)  评论:(0)  加入收藏
跨平台桌面应用开发的5大主流框架盘点
受益于开源技术的发展,以及响应快速开发的实际业务需求,跨平台开发不仅限于移动端跨平台,桌面端虽然在市场应用方面场景不像移动端那么丰富,但也有市场的需求。相对于个人开发者...【详细内容】
2023-04-19  Search: 跨平台  点击:(314)  评论:(0)  加入收藏
一篇带你了解跨平台的 UI 工具包—Flutter
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已...【详细内容】
2023-03-29  Search: 跨平台  点击:(178)  评论:(0)  加入收藏
Go 语言跨平台文件监听库 Fsnotify 怎么使用?
本文我们介绍了跨平台文件监听库 fsnotify,它主要用于自动监听文件中的内容变更。我们通过 fsnotify 源码和示例代码,介绍了该库支持的功能和使用方式。​1、介绍Go 语言作为...【详细内容】
2023-02-26  Search: 跨平台  点击:(213)  评论:(0)  加入收藏
▌简易百科推荐
Netflix 是如何管理 2.38 亿会员的
作者 | Surabhi Diwan译者 | 明知山策划 | TinaNetflix 高级软件工程师 Surabhi Diwan 在 2023 年旧金山 QCon 大会上发表了题为管理 Netflix 的 2.38 亿会员 的演讲。她在...【详细内容】
2024-04-08    InfoQ  Tags:Netflix   点击:(3)  评论:(0)  加入收藏
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(8)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(15)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(11)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(8)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(14)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(10)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(12)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(13)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条