跨平台开发，Flutter还是React Native？

作者 | 胥磊,审校 | 孙淑娟,随着移动应用的不断普及，各个公司都在寻找可以在多种设备上运行的跨平台应用解决方案，这里跨平台主要是指安卓和iOS。统计数据显示：截止2021年6月，安卓以接近73%的份额控制了移动操作系统市场，继续保持其全球移动操作系统的领先地位。谷歌的安卓和苹果的iOS共同占用超过99%的全球市场份额。,本文中，我们将比较两个流行的跨平台开发框架：Flutter和React Native，对比分析每个框架的优点和缺点，并探讨哪种框架更适合在2023年使用。,移动应用开发是一个稳步增长的业务域，地球上几乎所有的人都有手机，这意味着潜在的用户数量近乎是无限的，同时现在几乎所有的产品都有应用开发的需求。你可以选择多种方式来设计和构建一个应用，可以使用本地方法如Swift和Object-C来创建iOS应用，Java来创建安卓应用，这些都是官方提供支持和功能更新的编程语言。当然也可以使用跨平台框架如Flutter和React Native。,开始之前，我们先解释下“跨平台应用开发”这个术语，其指的是使用一套代码开发的应用可以运行在iOS和安卓上，同时提供近乎相同的功能体验，在这里我们将其分为以下两类。,混合型应用指的是使用HTML5、CSS和JavaScript等前端技术组合开发的应用。有些代码运行在目标平台的网络视图中，因此在不同的平台上可以共享这些代码（如HTML5、CSS和Javascript）。WebView就是混合型应用，其使用嵌入式的WebViews来渲染用户界面，而这其中就可以使用HTML5、CSS和JavaScript进行定制化开发。,WebView应用在访问设备上那些开箱即用的API时会有一些限制，需要额外的工作来实现与原生应用相同的功能，带来的好处也是显而易见的，这些应用天生就是跨平台的，开箱即用可以大大节省开发时间。混合型应用在两个平台上看起来是一样的，但底层行为却是不同的，这都取决于目标平台的可用API。例如一个天气应用的程序分别在两个平台上检查当前位置的天气服务API，根据每个平台提供的数据返回不同的结果。,原生应用指的是使用目标平台（如安卓或iOS）的原生SDK开发的应用。这些代码只为目标平台所编写，所以不能在不同的平台上共享，而且用户界面也是使用特定平台的组件和库来实现的。和混合应用相比，原生应用能提供更好的用户体验而且看起来也更加本地化，但它们的开发成本也更高。由于开发人员需要更多的时间来学习目标平台的API，所以开发新功能就需要更长的时间。,Flutter和React Native是当今最好的跨平台框架之一。它们都使用原生的组件来提供可定制的、响应式的UI，同时可以在不同的平台上共享代码。Flutter框架由谷歌开发，而React Native框架则是由Facebook提供的。这些科技巨头都拥有非常庞大的团队，负责从SDK到文档、技术支持等一切事务。虽然Flutter和React Native应用都是原生的，但它们比传统的原生应用开发更具优势，因为它们可以跨平台共享相当一部分代码。根据Instagram的数据，通过React Native在iOS和安卓之间共享的代码超过90%。,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最主要区别是，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构建应用程序时，人们通常抱怨的主要问题与它的运行时环境有关，这比为每个架构管理单独的进程的问题更严重。这意味着你使用React Native尽管可以实现接近原生的性能，但无法达到纯原生应用等同的性能。在支持现有的JavaScript代码库和允许iOS和Android应用之间重用共享的组件方面，Flutter并没有像React Native那样便捷。现在让我们深入了解一下这两个框架的技术利弊。,React Native提供了一个改进的JavaScript虚拟机，它的JIT编译器比V8速度更快。得益于它的预编译框架，你可以自由地发布你需要的任何代码，因为它将被编译成一个本地可执行文件。在实践中开发React Native和纯原生应用一样快，因为它可以实现与iOS应用相同的功能，而不需要对iOS的构建设置进行任何修改。同样Flutter也有自己的预编译器，一旦你创建了自己的项目，它将为iOS和安卓发布优化后的代码。您无需像React Native那样将你的代码库发布到应用程序的二进制中文件中，就能获得原生的性能。,React Native应用程序通常包含一个压缩的约300kb的JavaScript运行时文件，尽管可以通过调整一些选项来降低文件大小，如Bypass filling（这将迫使React Native跳过填充其虚拟DOM的过程，从而造成与原生UI的差异），以及将useDeveloperMode设置为true（这将在内存中调整图像大小并降低其质量）。Flutter提供了一个预编译器，允许开发者只发送他们正在构建的应用程序所需的代码库，而不必与之捆绑任何组件。如果你愿意，可以在现有的JavaScript虚拟机内运行Flutter，这样可以节省应用程序所需的空间。,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可能会导致运行时崩溃。,Flutter有自己的一套用于渲染用户界面的组件，在构建Flutter应用程序时，你也可以重用现有的iOS或Android代码。作为第三方库可能更容易地重用现有的本地组件，所以将Flutter组件映射到现有的iOS和Android UI组件并不容易，但这仍是一项正在进行的工作。React Native则提供了一个桥接，允许你将现有的iOS和Android代码作为JavaScript模块进行重用，以及公开了一些API，作为手动创建本地UI组件和渲染它们的JavaScript代码之间的桥梁。,React Native有自己的调试器，可以连接到你在iOS和Android上运行的应用程序，它为开发者提供了JavaScript虚拟机当前状态的预览，以及各种检查内存使用情况或动态调整某些选项的工具。Flutter也提供了类似的调试器，除了提供渲染引擎当前状态的预览与React Native不同之外，其余都类似。,React Native有自己的一套API，在开发iOS和Android时都可以使用。虽然大多数使用React Native的公司会先在一个平台（通常是iOS）上开发他们的应用程序，然后再移植到另一个平台，但如果愿意你也可以很容易的在iOS和Android应用程序里面编写共享组件。Flutter应用程序是用特定平台的代码构建的，因此不可能在你的iOS和Android应用程序里共享任何代码。然而，作为第三方库可以使重用现有的本地组件变得更容易。,React Native和Flutter都很容易学习（就API而言），但前提取决于开发者的专业知识。两者都有一个庞大的、参与性强的开发者社区，可以给新的开发者提供帮助，并不断创建新的工具和组件。对于一个几乎没有编码经验的全新开发者，我们可能会建议从React Native开始，因为它提供了一套预定义的组件，可以用来构建iOS和Android应用程序，这样你就可以专注于学习一种API，而不必担心要学习所有用于渲染视图的API。而对于有一定编码经验的开发者，我们可能会推荐Flutter而不是React Native，因为Flutter提供的API更接近于iOS和Android。此外，Flutter背后的团队非常注重Flutter提供的开发体验，确保能够与其他SDK（包括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后端开发，技术管理，架构优化，分布式开发等领域。