原生移动应用框架React Native与Flutter比较

18-10-17 banq
                   

React Native已经存在了很长时间,没有任何竞争者, 直到去年谷歌推出了Flutter。这两个框架都因其混合移动应用程序开发的效率而闻名- 一次写入并部署到iOS和Android。使用这些框架,您甚至可以获得接近原生的应用程序性能!

实际上,可以使用这两个平台中的任何一个构建出色的应用程序。但是,在性能,代码可维护性和社区支持方面存在轻微的细微差别,这些细微差别可能会使您偏向另一个。让我们详细看看这些差异。

React Native

React Native是一个JavaScript框架,用于为iOS和Android本地编写移动应用程序。它基于React,Facebook的用于构建用户界面的JavaScript库 - 但它不是针对浏览器,而是针对移动平台。

 React Native于2013年夏天在Facebook开始作为内部黑客马拉松项目,并且自此成为最受欢迎的移动框架之一。2015年3月,Facebook在F8宣布React Native已在GitHub上开放。

 使用React Native,应用程序是使用JavaScript和JSX(XML-esque标记)的混合编写的。在引擎盖下,React Native“bridge”调用Objective-C(适用于iOS)或Java(适用于Android)中的本机呈现API。这允许您的应用使用真实的移动UI组件呈现,而不是使用webview,使其外观和感觉与任何其他本机移动应用程序一样。

 Flutter

Flutter是谷歌的移动应用SDK,用于在iOS和Android上制作高质量的原生界面。它于2017年发布,并从此获得了开发者社区的大力支持。

 Flutter不需要JavaScript桥接器与本机移动组件通信,因为它使用编译的编程语言,称为Dart。它是一种通用编程语言,由Google于2011年开发.Google和其他人的开发人员使用Dart为iOS,Android和Web创建高质量,关键任务的应用程序。Dart被“提前”(AOT)编译为多个平台的本机代码。使用Dart桥,即使应用程序大小变大,它的执行速度也会快得多。

 差异

现在我们已经完成了这些介绍,让我们看看与React Native和Flutter的主要区别。

1.用户界面

Flutter使用称为小部件的内置UI元素代替本机。Flutter中的窗口小部件表示用户界面的对象 - 所有图形(包括文本,形状和动画)都是使用窗口小部件创建的。

有两组小部件符合特定的设计语言。换句话说,您可以在Android应用程序中使用Material Design小部件,在iOS应用程序中使用Cupertino小部件。每个小部件都可以轻松定制。

但是,建立和维护这些小部件的支持有限且社区有限。随着框架的成熟,小部件将成为快速迭代和构建Flutter应用程序的方法。

React Native的UI体验类似于在没有任何CSS框架的情况下使用HTML。虽然这听起来很糟糕,但它实际上允许您在Android和iOS上构建本机组件,从而提供更好的用户体验(UX)。

还有大量的社区支持,并且有第三方库可以让您立即开始。

2.社区支持

Flutter只有一年左右的时间,因此缺乏重要的社区支持。然而,早期的博客文章对使用Flutter持积极态度。

到目前为止,Dart在Stack Overflow上没有得到太多的爱。

尽管社区对Flutter的支持很少,但Google的Flutter团队提供的支持非常好。他们的文件也很棒。(毕竟,这是由Google团队撰写的!)

React Native的社区支持超过了Flutter的-React Native目前是Stack Overflow上最受欢迎的框架,社区支持作为证据。虽然他们的文档到处都是,主要是因为它保持完全开源,有很多论坛可以提供帮助。

3.代码结构Flutter不会分离数据,样式和模板。虽然这听起来像是你最终会得到意大利面条代码,但这种结构很快就会获得追随者,因为使用Flutter构建布局不需要额外的模板语言,如JSX,XML或特殊的可视化工具。但是,在创建大型应用程序时,这是一个巨大的时间,因为几乎所有内容都是内联维护的。

React Native在隔离逻辑,导航和设计方面做得非常出色。这使您可以构建复杂的移动应用程序,而不会丢失文档。Spencer Carli在Medium上发表了一篇很棒的文章,讨论了公认的代码结构。 

4.开发时间

Flutter的Hot Reload(能够“实时”修复bug而无需重新编译)的速度非常快,让React Native自己的能力变得羞耻。

虽然它允许快速开发,但Flutter要求您在使用Carousels或Models等复杂的UI元素时为Android和iOS添加单独的代码文件。这意味着您需要编写与每个环境相对应的特定规则。此外,Flutter是基于鲜为人知的Dart语言构建的,这将要求您的开发人员在跳转到Flutter之前先花时间在它上面。

尽管React Native的Hot Reload速度不快,但它并不需要您为Android和iOS编写单独的文件来支持复杂的UI。它有许多不同的第三方库,如Calendar,Carousel和Modal,以及可立即使用的组件,可提高跨平台应用程序开发的速度。

5.表现

Flutter赢得这次比较。它具有Dart的优势,其中不需要“桥”来与设备的本机组件交互。这极大地加速了设备的性能。正是这种架构使您能够以每秒60帧的速度构建具有动画效果的快速,原生外观的应用程序,这是其高性能的明显标志。

由于需要JavaScript桥接,使用React Native构建的应用程序有时会出现渲染大型数据集的问题。但是,有些库可以使其达到60 fps的动画速度。(但对于大多数典型应用程序,用户几乎感觉不到这个特定的性能问题。)

结论

作为移动应用程序开发未来的一部分,Flutter具有巨大的潜力。Flutter,Dart和大型社区基地的结合可能是成功的秘诀。阻止我使用它的唯一因素是谷歌众所周知的关闭开源和收购产品的举动。

React Native目前拥有稳定的增长,强大的支持,惊人的代码结构和非常好的采用基础。

对于Flutter团队 - 如果Google没有杀死该项目,请立即解决GitHub上的3,892个未解决问题。(谢谢。)