2019年,Flutter 和 React Native 谁主沉浮?

2019-06-13 admin

Flutter 与 React Native混淆了吗?

本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道,几年前开发和维护iOSAndroid的应用程序曾经是一项艰巨的任务(独立的代码库|独立的开发团队|开发成本也忒高)。

一堆狗屎。

移动行业渴望进行一场革命,以遏制移动应用程序开发过程中出现的问题。

因此,跨平台开发的形式就此出现了。现在,维护代码和开发应用程序对于开发人员来说变得简单且耗时也少了。

跨平台应用程序开发什么时候出现的?

不仅开发商,企业和初创公司也通过为跨平台应用的方式来开发他们的业务。不出所料,他们喜欢它。

为了提高应用开发的效率,越来越多的跨平台应用开发框架应运而生。

脸书在2015年又跳了回来,推出了React native

毫无疑问,它得到很好的回应。如今,React native 是 Facebook、沃尔玛(Walmart)、优步(UberEats)、Instagram 和特斯拉(Tesla)等应用程序的幕后支持者。

后来,谷歌也加入了进来,并推出了广受好评的跨平台框架 Flutter。并保证了所有应用程序都具有原生性能。

从那时起,新创公司和企业就面临着如何选择应用程序开发的两难境地。这使得 Flutter 与 React native 的争论更加激烈。

在本文中,我们将讨论React Native 和 Google 的 Flutter 之间备受争议的论点。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

什么是 Flutter

Flutter 是谷歌的移动UI框架,可以快速在 iOS 和 Android上构建高质量的原生用户界面。

什么是 React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

现在你已经有了基本的认识,让咱们来看看在 2019 年的 React nNtive 和 Flutter 中哪个更好?

Flutter vs React Native:详细比较

让我们详细看看这两个平台之间的差异,并找出使用 React native 和Flutter 的优缺点。

程序设计语言

跨平台的应用程序开发框架都使用不同的编程语言。

React native 可以使用 Javascript开发,这不需要任何介绍。长期以来,它一直是开发人员最好的编程语言。

因此,可以理解为什么 React Native 在开发特定于服务器,Web或移动应用程序时获得了极大的欢迎。

然而,由谷歌开发的Flutter 使用了一种新的编程语言 Dart。对于开发人员来说,这是一个新技术,但是那些具有c++和JAVA等OOP语言经验的开发人员可以轻松地学习编写代码。

clipboard.png

Dart 基于 C/C++、Java、支持抽象、封装、继承和多态等特性。Flutter 团队之所以选择 Dart,是因为它与构建用户界面的方式相匹配,使用 Dart 桥接,应用程序的大小更大,但效果要快得多。与使用 JS 做桥接的 React Native 不同。

开发速度

企业,特别是初创企业寻找一个能够在更短的时间内为他们提供服务应用的平台。

谈论Flutter 与 React Native 开发速度; React Native 获得了优势。 其即用型组件可帮助开发人员快速制作应用程序。 另一方面,Flutter 是一个寻求在开发时间方面击败竞争对手的新平台。

根据数据分析,React native 在美国的市场份额为4.3%。

性能

React Native

React Native / NativeScript, 你需要一个桥梁来调用 Swift 或 Android 或 Windows & Mac APIs。 Flutter使用的是 Dart, 所以你不需要那样,一切都是原生的。 这也解决了 JS 生态系统之间的许多不同版本之间的问题,比如CommonJS, AMD。React Native 开发人员, 在开发混合应用时面临问题, 但对于原生应用, 不会面临任何与性能相关的问题。它在所有标准情况下都提供无缝性能, 并且高度可靠。

Flutter

根据他们的应用性能, 将 Facebook 的 React Native 与 Google 的 Flutter 进行比较, 是 Flutter 战胜了竞争对手。Flutter 具有 Dart 的优势, 并且没有 JavaScript 桥接用于处理与设备本机原生组件的交互, 开发速度和运行时间会大大加快。

Flutter 已将动画标准设置为 60fps, 这清楚地表明了其高性能。最后, 由于 Flutter 被编译成 Android 和 iOS 的原生 ARM 代码, 性能是它永远不会面临的一个问题。

总之,两种平台的性能都比较接近。

架构

在 React native 中,构建移动应用程序有两种架构类型,FluxRedux

Flux 由Facebook 制作,而 Redux 受社区青睐。 由于单向数据流,App 是无状态, 因为应用程序的状态被 store 管理着。

clipboard.png

作为一个新手,Flutter 很难为移动应用程序指定最佳架构。但是,也有一些受欢迎的组件,比如BloC(业务逻辑组件)。它们主要依赖于streamsRXDart(Reactive Dart)。

clipboard.png

IDE 和易于编码

如果我们谈 React native 的 IDE,几乎主流的IDE 都支持。然而,目前,Flutter 的 IDE 只有 Android studio/IntelliJ 和 visual studio 支持。

由于 React Native 使用 JS 语言开发,对于新手来说,学习曲线很容易。另一方面,Dart 作为新发明的语言对开发人员来说有些困难。但是,那些有 c++ 和 Java 经验的人可以轻松地学习它。

代码结构

Google 的 Dart 没有模板,样式和数据文件的分离。 因此,代码变得有点难以理解。 而Javascript遵循简单的代码结构。 因此,开发人员更清楚地理解和编写代码。

图片描述

稳定性和灵活性

完美移动应用程序最重要的一个方面是稳定性。这两个平台都得到了领先技术社区的支持,因此对稳定性毫无疑问,两者都有很好的稳定性。

React native 拥有大量的社区支持,因此,它成为最受欢迎和最可靠的框架之一。

另一方面,Flutter 推出了新版本的beta 2,它也为开发人员提供了一些令人印象深刻的特性。

在提供灵活性和定制方面,React native显然处于领先地位。通过直接与原生平台交互,提供了无缝的用户体验。

然而,Flutter提供了一组丰富定制的 widgets 来创建一种引人入胜的体验。虽然它正处于测试阶段,试图在市场上站稳脚跟。

人气

说到人气方面,正如我们提到的,React native 在混合应用程序开发中已经变得非常突出。它是任何 iOS 或 Android 项目开发人员的最爱。

无论它是一个小项目还是一个大项目,大量的组件都使它受到了应有的欢迎。

clipboard.png

相反,正如我们所知,Flutter 正处于起步阶段,并试图在移动应用程序开发上留下自己的印记。我们不能忽视的事实,在推出的当天,Flutter 在 Twitter上的趋势如上图。

世界电子商务巨头阿里巴巴正在使用 Flutter,这表明了 Flutter 在混合应用开发方面的广阔前景。

React Native 和 Flutter:快速对比

RN 和 Flutter 差异表:

| 工程技术 | React Native | Flutter | | 首次发布 | 2015年1月 | 2017年5月 | | 公司 | Facebook | Google | | 编码语言 | JavaScript | Dart | | Github Stars(2019年) | 77,827 | 66,183 | | 学习难度 | React或Javascript经验丰富的开发人员易于学习 | 对于新手相对较难,但对于经验丰富的C++和JAVA专家来说,这很容易学习 | | 主要架构 | Flux & Redux | bLoC | | 组件 | 有些是自动适应的 | 非适应性,需要手动配置 | | 生态 | 成熟 | 还未成熟 | | 热更新 | 支持 | 支持 | | UI 组件 | 操作系统的原生组件 | Flutter | | 文档 | 相对完整 | 相对混乱 | | 原生性能 | 好 | 很好 | | 主要用户 | Facebook, Instagram, Pinterest,特斯拉,优步,沃尔玛,Wix.com | 阿里巴巴,Google Greentea,谷歌搜索引擎,App tree,腾讯 |

React native和 Flutter 之间的相似之处

我们已经看到了这两个平台之间的差异。但在某些领域,它们也有相似之处。

  • 两者都拥有受欢迎的技术社区的力量
  • 它们用于跨平台开发
  • 两者都允许同时运行新代码并保持应用程序状态
  • 开源、免费、快速
  • 拥有顶级UI支持和原生体验

总结

React Native 和 Flutter 都有自己的利弊. Flutter 在应用开发行业市场上仍然是新的, React Native 在之前就已经开始了, 以获得良好的受众优势。

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

https://github.com/qq44924588…

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

clipboard.png

[转载]原文链接:https://segmentfault.com/a/1190000019457674

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67158.html

文章标题:2019年,Flutter 和 React Native 谁主沉浮?

相关文章
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
JavaScript和Java
JavaScript和Java在某些方面相似但完全不同。 JavaScript语言类似于Java但是没有Java的静态类型和强类型检查,不过它们的语法和 C 语言都很相似。 JavaScript基于原型的对象模型,而不是更常见的基于类的对象...
2015-11-12
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
回到顶部