当前位置: 首页 > 科技观察

跨平台开发,Flutter还是ReactNative?

时间:2023-03-18 19:08:39 科技观察

作者|徐磊审稿人|孙书娟随着移动应用的不断普及,企业都在寻找可以在多种设备上运行的跨平台应用解决方案。这里的跨平台主要是指Android和iOS。统计数据显示,截至2021年6月,安卓以近73%的份额控制了移动操作系统市场,继续保持在全球移动操作系统中的领先地位。Google的Android和Apple的iOS合计占据了全球99%以上的市场份额。在这篇文章中,我们将比较两个流行的跨平台开发框架:Flutter和ReactNative,分析每个框架的优缺点,探讨哪个框架更适合在2023年使用。1.移动应用开发为何如此流行?移动应用程序开发是一个稳步增长的业务领域。地球上几乎每个人都拥有手机,这意味着潜在的用户数量几乎是无限的。同时,现在几乎所有的产品都需要应用开发。您可以选择多种方式来设计和构建应用程序。您可以使用Swift和Object-C等本机方法来创建iOS应用程序,并使用Java来创建Android应用程序。这些是官方支持和更新的编程语言。当然你也可以使用Flutter、ReactNative等跨平台框架。2.什么是跨平台应用开发在开始之前,我们先来解释一下“跨平台应用开发”这个词,它指的是使用一套代码开发的应用可以同时运行在iOS和Android上,同时提供几乎相同的功能体验,这里我们将它们分为以下两类。1.混合开发混合应用是指结合HTML5、CSS、JavaScript等前端技术开发的应用。一些代码运行在目标平台的web视图中,因此可以在不同平台(如HTML5、CSS和Javascript)之间共享。WebView是一个混合应用程序,它使用嵌入式WebView来呈现用户界面,可以使用HTML5、CSS和JavaScript对其进行自定义。WebView应用程序在访问设备上开箱即用的API时有一些限制,需要额外的工作才能实现与本机应用程序相同的功能,但好处是显而易见的。这些应用程序天生就是跨平台的,开箱即用Out-of-the-box可以大大节省开发时间。混合应用程序在两个平台上看起来相同,但底层行为不同,具体取决于目标平台上可用的API。例如,一个天气应用程序分别在两个平台上查询当前位置的天气服务API,根据每个平台提供的数据返回不同的结果。2.原生开发原生应用是指使用目标平台(如Android或iOS)的原生SDK开发的应用。代码仅针对目标平台编写,因此无法跨平台共享,用户界面使用平台特定的组件和库实现。本机应用程序提供更好的用户体验,并且比混合应用程序看起来更原生,但它们的开发成本也更高。由于开发者需要更多的时间来学习目标平台的API,因此开发新功能的时间也更长。3、跨平台框架:Flutter和ReactNativeFlutter和ReactNative是当今最好的跨平台框架之一。它们都使用本机组件来提供可定制的响应式UI,同时跨不同平台共享代码。Flutter框架由Google开发,而ReactNative框架由Facebook提供。这些科技巨头拥有非常庞大的团队,负责从SDK到文档和技术支持的一切事务。尽管Flutter和ReactNative应用都是原生的,但它们比传统的原生应用开发有优势,因为它们可以跨平台共享相当一部分代码。据Instagram称,超过90%的代码是通过ReactNative在iOS和Android之间共享的。四、Flutter和ReactNative的历史Flutter是在2016年10月的Dart开发者峰会上发布的,这个跨平台的移动应用开发框架,为开发者提供了使用谷歌自己的Dart语言编写一套代码的工具,您可以为iOS和Android构建本机应用程序。与2018年2月16日Flutter第一个稳定版(1.0)的发布相比,ReactNative起步早于Flutter。虽然它的第一个测试版于2015年3月发布,但直到2017年3月才成功走出测试阶段。2017年9月5日,ReactNative在科技巨头Facebook的大力支持下发布了1.0版本。虽然两者出现的时间都比较晚,但并不影响各家公司的喜爱。ReactNative已经被Facebook、Instagram、Airbnb和Uber等大公司使用,而Flutter也被宝马、丰田、eBay和谷歌本身使用。使用谷歌支付。5.Flutter和ReactNative的比较Flutter和ReactNative的主要区别是ReactNative没有编译成原生语言(如Java、Swift、Objective-C),而是简单地运行它的JavaScript代码。并且Flutter将其Dart语言编译成本地语言,这可能会影响性能。另一个很大的区别是ReactNative使用vanillaJavaScript(除了JSX)来编写组件。鉴于ReactNative的动态特性,Facebook的开发人员推荐使用Flow或TypeScript编写代码。同样对于Flutter,Google也推荐使用Dart来写代码,因为它有自己的一套静态类型。在我们看来,决定如何在这两种技术之间进行选择,更多的应该是根据自己的喜好,而不是它们的实际特性和性能。当然,了解所有编程范例会更好,这样您就可以轻松选择新的语言和框架,即使它们不是用您熟悉的语言编写的。对于已经熟悉JavaScript(ES2015+)或者TypeScript/Flow的程序员来说,上手ReactNative就容易多了,尤其是对于使用过React的开发者来说,因为React和ReactNative的相似之处有很多不同之处。JavaScript在移动开发中仍然占有很大的市场份额,而且由于ReactNative和Flutter都允许您选择自己喜欢的编程语言,因此很难说2023年哪一种更受欢迎。此外,还有其他重要因素可能影响选择,例如:公司对特定技术栈的偏好。开发人员对语言/框架的熟悉程度。具有使用特定技术所需技能的开发人员的可用性。正如我们上面指出的,ReactNative和Flutter都将在2023年成为重要参与者,因此最终哪一个最适合您取决于您??的长期目标。6.跨平台开发框架的工作原理尽管跨平台移动应用程序开发框架有许多共同的概念和特点,但它们都有不同的用途。ReactNative的目的是结合ReactWeb带来的开发便利,提供接近原生应用的性能体验。这种设计不是在iOS和Android之间使用一组共享组件,而是将一个完全独立的UI封装到一个包含几乎一半应用程序代码的JavaScript包中。Flutter的目的主要是为了满足Google自己的需求。通过创建可在iOS和Android应用程序之间共享的可重用UI组件,这是将减少的开发周期与本机代码性能相结合的另一种尝试。为什么使用Google的Flutter进行开发比ReactNative快得多。Flutter的设计理念也是让应用开发更简单、更容易。它是用Dart编码的,这是一种可以在周末学习并在几天甚至几小时内掌握的语言,当然这取决于开发人员的技术堆栈。这就是为什么我们认为Flutter将成为需要在不牺牲性能或功能的情况下快速创建大量本机移动应用程序的公司的首选移动开发框架。7.构建移动应用再次变得有趣当谷歌发布Flutter时,开发人员对其在实践中的表现感到震惊。与其他专门用于构建跨平台移动应用程序的技术相比,Flutter表现非常出色。ReactNative在iOS和Android之间共享UI代码的想法是一个伟大的创举,但由于ReactNative的固有局限性,它创建的应用程序无法像原生应用程序那样执行。Flutter提供了许多您在当今任何其他工具中都找不到的强大功能。Dart是一种令人印象深刻的语言,它天生就是为创建移动应用程序而构建的。Dart是目前构建Android和iOS应用程序最快的语言。它使构建高性能UI组件变得更容易,具有强大的IDE(集成开发环境)支持,并具有强大的自动完成功能,允许在不丢失应用程序状态的情况下进行实时编码原型设计,并最终强制执行面向对象的设计模式。拥有一个自以为是的框架意味着谷歌将能够为您做出许多重要的决定,同时让社区能够专注于构建应用程序真正重要的事情。Flutter拥有完整的工具链和一组漂亮的类似MaterialDesign的组件,开发人员可以在他们的应用程序中重复使用这些组件。谷歌还提供了与第三方库的一些集成,例如用于高效处理图像的图像处理库、SQL数据库(通过抽象访问)和文本编辑器。所有这些都以一个内聚包的形式呈现给开发人员,该包的设计考虑了速度、易用性、生产力和性能。八、Flutter和ReactNative应用的优缺点用Flutter创建的应用与原生应用没有区别,它们具有相同的性能、外观和体验(除了一些平台特定的样式)。当使用ReactNative构建应用程序时,人们的主要抱怨通常与它的运行时环境有关,这比为每个架构管理单独进程的问题更为严重。这意味着虽然你可以使用ReactNative实现接近原生的性能,但你无法获得与纯原生应用程序相同的性能。Flutter在支持现有JavaScript代码库和允许共享组件在iOS和Android应用程序之间重用方面不如ReactNative方便。现在让我们深入探讨这两个框架的技术优缺点。1.原生性能比较ReactNative提供了改进的JavaScript虚拟机,其JIT编译器比V8更快。由于其预编译框架,您可以自由分发您需要的任何代码,因为它会被编译成本机可执行文件。实际上,开发ReactNative与纯原生应用程序一样快,因为它可以实现与iOS应用程序相同的功能,而无需对iOS构建设置进行任何修改。Flutter也有自己的预编译器,一旦你创建了自己的项目,它就会发布针对iOS和Android的优化代码。您不需要像ReactNative那样将您的代码库分发到应用程序二进制文件中以获得本机性能。2.应用程序大小比较ReactNative应用程序通常包含约300kb的压缩JavaScript运行时文件,尽管可以通过调整一些选项来减小文件大小,例如Bypassfilling(这将强制ReactNative跳过填充其虚拟DOM,从而导致与本机UI的差异),并将useDeveloperMode设置为true(这将调整内存中图像的大小并降低其质量)。Flutter提供了一个预编译器,允许开发人员只发布他们正在构建的应用程序所需的代码库,而无需将任何组件与其捆绑在一起。如果需要,您可以在现有的JavaScript虚拟机中运行Flutter,从而节省应用程序所需的空间。3.最低要求的SDK版本比较ReactNative通常可以在任何iOS9+或Android5.0+SDK上构建而不会出现任何问题。但为了获得最佳性能,您应该在发布时使用最新的可用SDK版本。事实上,ReactNative应用程序可以构建在早期的iO??S和AndroidSDK上,并且可以在运行时提供有限的一组功能,但为了获得所有功能,您需要使用最新的SDK版本。Flutter应用程序可以在Android21(Lollipop)或更高版本上构建,我们还建议使用最新的SDK版本构建以获得最佳性能。Flutter可以在iOS8或更高版本上运行,但由于Apple已弃用Flutter使用的大部分API,因此调用这些API可能会导致运行时崩溃。4.UI开发方面的比较Flutter有自己的一套组件来渲染用户界面。在构建Flutter应用程序时,您还可以重用现有的iOS或Android代码。作为第三方库,可能更容易重用现有的原生组件,因此将Flutter组件映射到现有的iOS和AndroidUI组件并不容易,但它仍在进行中。ReactNative提供了一个桥梁,允许您将现有的iOS和Android代码重用为JavaScript模块,并公开API作为手动创建本机UI组件和呈现它们的JavaScript代码之间的桥梁。5.调试的优缺点ReactNative有自己的调试器,可以连接到你运行在iOS和Android上的应用程序,它为开发者提供了JavaScript虚拟机当前状态的预览,以及内存使用的各种检查情况或动态调整某些选项的工具。Flutter也提供了类似的调试器,它与ReactNative类似,只是它提供了渲染引擎当前状态的预览。6.移动平台代码复用比较ReactNative有自己的一套API,开发iOS和Android时都可以使用。虽然大多数使用ReactNative的公司会先在一个平台(通常是iOS)上开发他们的应用程序,然后移植到另一个平台,但如果您愿意,您也可以轻松地在iOS和Android应用程序中编写。共享组件。Flutter应用程序是使用特定于平台的代码构建的,因此不可能在iOS和Android应用程序之间共享任何代码。然而,作为第三方库可以更容易地重用现有的原生组件。7.Flutter和ReactNative哪个好学?ReactNative和Flutter都很容易学习(在API方面),但前提取决于开发人员的专业知识。两者都有一个庞大的、积极参与的开发人员社区,可以帮助新的开发人员并不断创建新的工具和组件。对于几乎没有编码经验的全新开发人员,我们可能建议从ReactNative开始,因为它提供了一组可用于构建iOS和Android应用程序的预定义组件,因此您可以专注于学习一个API,而无需担心学习所有用于呈现视图的API。对于有一定编码经验的开发者,我们可能会推荐Flutter而不是ReactNative,因为Flutter提供的API更接近iOS和Android。此外,Flutter背后的团队非常重视Flutter提供的开发体验,确保其可与其他SDK提供的体验相媲美,包括ReactNative。8.2023年Flutter与ReactNative的比较ReactNative于2015年问世,此后被多家公司采用。JavaScript变化非常快,因此ReactNative随着时间的推移而发展,并且在开源社区的贡献下添加了许多新功能。Flutter是一项相对较新的技术,如果你习惯了Android或iOS,一开始可能会觉得它很陌生。但谷歌已经付出了很多努力使其更易于使用,因此大多数熟悉iOS或Android开发的人应该能够很快上手。9.结论Flutter和ReactNative都是跨平台应用程序开发的绝佳选择。虽然它们有一些相似之处,但您也需要了解一些关键差异。为您的商业或初创应用程序选择合适的跨平台框架主要取决于您的开发经验、开发团队以及您的项目需要访问哪些原生组件。我们希望本文能帮助您做出明智的选择。原文链接:https://dzone.com/articles/comparing-flutter-vs-react-native译者介绍徐雷,社区编辑,某知名电商技术副总监,专注于Java后端开发,技术管理、架构优化、分布式开发等领域。