2021年了,跨平台技术框架究竟怎么选

5,110 阅读10分钟

由于手机APP的运行受不同操作系统的限制,目前大多数的移动APP应用开发仍然需要针对不同的系统环境进行单独的开发。不过,为了降低开发成本、提高代码复用率,减少开发者对多个平台差异适配的工作量一直是跨平台开发框架追求的目标。

但是目前,很多开发者还不不确定应该选择哪种技术来快速且低成本的开发应用程序,不过如果你熟知跨平台的发展历史,那么2021年可供大家选择的跨平台方案主选项只有两个:Flutter或者React Native。

在这里插入图片描述

在正式进行对比之前,首先需要明确一点,即Flutter和React Native这两个框架都是构建跨平台移动应用程序的优质框架,但有时做出正确的决定取决于业务使用的角度。因此,我们选取了九个重要的参数,用于两者的比较:

  • 由谁提供技术支持?
  • 框架的市场份额占比。
  • Dart Vs JavaScript
  • 技术架构
  • 性能
  • 是否对开发者友好,便利性和社区支持
  • UI组件和定制
  • 代码的可维护性
  • 开发者的工作成本

技术支持:谷歌 VS Facebook

Flutter与React Native两大框架背后都站着科技巨头,分别是谷歌和Facebook,所以从这个角度来看两者未来会在竞争中变得更加完善,毕竟他们背后都自己的利益链。

首先,我们来看一下Flutter,Flutter是2017年由谷歌正式推出,是一个先进的应用程序软件开发工具包(SDK),包括所有的小部件和工具,理论上可以让开发者的开发过程更容易和更简单。广泛的小工具选择使开发人员能够以一种简单的方式建立和部署视觉上有吸引力的、原生编译的应用程序,用于多个平台,包括移动、网络和桌面,都使用单一的代码库。因此,Flutter应用程序开发公司有更好的机会,可以确保你更快、更快、更可靠的应用程序开发解决方案。

事实上,Flutter早再2015年Dart开发者峰会上便以“Sky”的身份亮相,Flutter具有几大买点:首先它是免费的,而且是开源的;其次,该架构基于流行的反应式编程,因为它遵循与Reactive相同的风格;最后,归功于小部件体验,Flutter应用程序有一个令人愉快的UI,整体来说转化为应用程序看起来和感觉都不错。

我们再来看一下React Native,React Native也是Facebook在2015年推出的一个跨平台原生移动应用开发框架。React Native主要使用的是JavaScript开发语言,对于使用同一代码库为iOS和Android开发应用程序来说非常方便。此外,它的代码共享功能可以更快的开发和减少开发时间。像其他跨平台技术一样,Flutter允许开发者使用相同的代码库来构建独立的应用程序,因此,相比原生应用程序更容易维护。

当然,Flutter和React Native都支持热重载功能,允许开发者直接在运行中的应用程序中添加或纠正代码,而不必保存应用程序,从而加速了开发过程。除此之外,React Native是基于一种非常流行的语言--JavaScript,开发者更易上手;React组件包裹着现有的本地代码,并通过React的声明性UI范式和JavaScript与本地API进行交互,React Native的这些特点使开发人员的工作速度大大加快。

市场份额:五五开的格局正在改变

整体上来说,这两者的市场份额是十分相近的,但Flutter在最近有后来居上之势。2019年和2020年全球软件开发公司使用的最佳跨平台移动应用开发框架时,其结果是42%的开发者更愿意留在React Native,而39%的开发者选择了Flutter。根据StackOverFlow的数据,68.8%的开发者喜欢使用Flutter进行进一步的开发项目,而57.9%的开发者对使用React Native技术进行应用开发进一步表现出兴趣。

不同的市场报告有不同的统计数字,Flutter、React Native究竟孰强孰弱或许只能从一些市场趋势中窥见一二:

  • 市场趋势一:谷歌Google Trends的统计数字显示,在过去12个月的分析中,Flutter的搜索指数已反超React Native。
  • 市场趋势二:更年轻的Flutter在Github上拥有16.8万名成员和11.8万颗星的社区,而更成熟的React Native在Github仅有20.7万名成员和9.46万颗星。

在这里插入图片描述

  • 趋势三:根据Statista的数据,React Native以42%的市场份额力压Flutter,但Flutter与React Native的差距正变得越来越小,其在一年内市场份额从30%急剧跃升至39%。

在这里插入图片描述

语言对比:Dart Vs JavaScript

Flutter所采用的Dart开发语言是谷歌2011年在丹麦奥尔胡斯举行的GOTO大会上亮相的,Dart是一门面向对象的、类定义的、单继承的语言,它的语法类似C语言,可以转译为JavaScript,支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type system,并且具有AOT与JIT编译器,Dart的最大优势在于速度,运行比JavaScript快2倍,不过Dart作为一门较新的语言,开发者还需要熟悉Java或C++的应用程序开发工作才更易上手。

而React Native则采用的为已经在IT行业广泛应用多年的Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域,不过JavaScript线程需要时间来初始化,所以导致React Native在最初渲染之前需要花费大量时间来初始化运行,不过React Native已经发布了升级线路,并且会在最近开源升级的版本,相信随着React Native新版本的发布,性能上将会追平Flutter。

技术架构

如果单从技术上讲,Flutter绝对是一个先进的跨平台技术方案,它提供了一个分层的架构,以确保高度的定制化,而React Native依赖于其他软件来构建反应组件,并使用JavaScriptBridge来桥接原生本地模块的连接。桥接会影响性能,即使发生轻微的变化,而Flutter可以在没有桥接的情况下管理一切。

Flutter提供的分层的架构,为简单快速的UI定制铺平了道路。它被认为可以让你完全控制屏幕上的每一个像素,并允许移动应用开发公司整合叠加和动画图形、文本、视频和控件,没有任何限制。

Flutter移动平台与其他Web平台的架构略有差异,不同平台相同的公共部分就是Dart部分,即Dart Framework。Flutter的公共部分主要实现了两个逻辑:第一,开发人员可以通过Flutter Ui系统编写UI,第二使用Dart虚拟机及Dart语言可以编写跟平台资源无关的逻辑。同时这也是Flutter跨平台的核心,和Java程序可以在Linux,Window,MacOs同时运行, Web程序可以在任意平台运行类似。通过Dart虚拟机,UI及和系统无光的逻辑都可以用Dart语言编写,运行在Dart虚拟机中,是跨平台的。

而React Native依赖于其他软件来构建反应组件,其架构整体上分为三大块:Native、JavaScript 与 Bridge,其中Native 管理UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge 在二者之间传递消息。React Native 中主要有 3 个线程,应用中的主线程UI Thread、进行布局计算和构造 UI 界面的线程Shadow Thread与React 等 JavaScript 代码都在这个线程执行任务的JS Thread。

正因其依赖于其他软件来构建反应组件,因此在启动上会受到以下,必须先初始化 React Native 运行时环境(即Bridge),Bridge 准备好之后开始 run JS,最后开始 Native 渲染。从架构上来看,Flutter确实性能更高,也更符合当下跨平台开发的需求。

在这里插入图片描述

学习成本和社区支持

当涉及到构建企业应用程序时,社区支持是必须检查的因素。而React Native和Flutter都在行业中发展了多年,并且在谷歌与Facebook两大巨头的支持下都有最新的技术更新与广泛的社区支持。而随着每一个递增的版本和技术更新,社区对该框架的兴趣和需求逐渐增加。让我们了解一下这两个框架在社区参与方面的情况。

React Native在2015年推出,其社区一直处于成长阶段,Github上对该框架的贡献者数量就是证明。但是,尽管Flutter还很年轻,也比较新,但它正在已开始显示后来居上之势。 在这里插入图片描述

代码的可维护性

无论你开发的应用程序多么出色,为了使其顺利运行,不断地升级和调试是必要的。与Flutter相比,用React Native维护代码真的很困难。

在React Native中,当你为了开发适配不同系统的应用程序时就需要分开编写适配代码,它会干扰框架的逻辑,从而减慢了开发过程。另外,在React Native应用程序中,大多数本地组件都有一个第三方库的依赖性,所以维护这些过时的库确实是一个具有挑战性的任务。

对于Flutter来说,由于代码逻辑相对简单,不需要适配不同的操作系统,维护代码就要容易得多,允许移动应用程序开发人员轻松发现问题,为外部工具和支持第三方库提供数据支撑。

此外,与使用React Native的热重新加载功能相比,在Flutter中发布质量更新和对应用程序进行即时更改所花费的时间也比React Native表现更好。

开发成本

无论是一个初创公司还是一个先进的互联网企业,开发成本总是大家比较关心的内容。因此,当你选择雇用反应原生开发公司或Flutter应用程序工程师时,你可能需要评估他们的费率,不同的地方有不同的开发成本。

因此,在正式启动项目之前,无论是Flutter还是React Native,都需要考虑开发人员的素质,如经验、专业知识、项目处理等开发成本问题,以评估开发人员的实际小时费用,下面是Flutter和React Native的一个开发成本的问题。

在这里插入图片描述 除此之外,在选择Flutter还是React Native的问题上,我们还需要考虑他们的自定义开发能力。 Flutter和React Native都有一套属于自己的UI组件和小工具。并且,Flutter就以其漂亮的UI原生型小部件而闻名,这些小部件由框架的图形引擎进行渲染和管理。

而React Native只提供了适应平台的基本工具,如按钮、滑块、加载指示灯等基础组件,如果需要开发复杂的功能,就需要使用第三方组组件。