移动端跨平台开发框架对比分析

时间:2024-03-11 10:40:41

前言

现在主流的移动开发平台是Android和iOS,每个平台的开发技术和运行方式都不一样,大家都是针对每个平台开发应用。自然会存在一个移动应用产品要针对每个平台开发一套的现象,这样带来的问题则是开发成本高、效率低下,进而会有进行跨平台开发的需求。从最开始以Cordova为基础的Hybrid混合开发技术,到React Native的桥接技术,到现在新兴的Flutter技术,跨平台开发技术一直在演进。

目前主流跨平台框架简介

Cordova

Cordova 是Apache旗下的一个开源的移动开发框架。它允许你使用WEB开发技术(HTML5、CSS3、JavaScript)进行跨平台开发。应用在每个平台的封装器中执行,并且依赖规范的API对设备进行高效的访问,比如传感器、数据、网络状态等等。

Cordova通过对HTML、CSS、JS封装为原生APP。Cordova将不同设备的功能,按标准进行了统一封装,开发人员不需要了解设备的原生实现细节,并且提供了一组统一的JavaScript类库,以及为这些类库所使用的设备相关的原生后台代码。因此实现了“write once, run anywhere”(一次开发,随处运行)。

Cordova前身是PhoneGap。2011年Adobe公司将其收购对其开源,并捐献给Apache,重新命名为Cordova。

React Native

React Native让开发者使用JavaScript和React编写应用,利用相同的核心代码就可以创建Web,iOS和Android平台的原生应用。React Native着力于提高多平台的开发效率-----仅需学习一次,编写任何平台(Learn once, write anwhere)。

React Native支持标准平台组件使用,在iOS平台我们可以使用UITaBar控件,在Android平台我们可以使用rawer控件。这样App从使用上和视觉上拥有像原生App一样的体验。

2015年9月15日,Facebook发布了React Native for Android,把Web和原生平台的JavaScript开发技术扩展到了Google的流行移动平台。

Flutter

Flutter是面向iOS和Android应用,提供一套基础代码(使用Dart语言)的高性能高可靠软件开发工具包,使开发者能够在iOS和Android两个主要的移动平台上,打造统一代码的高性能应用。

Flutter能够在iOS和Android上运行起来,依靠的是一个叫Flutter Engine的虚拟机,Flutter Engine是Flutter应用程序的运行环境,开发人员可以通过Flutter框架和API在内部进行交互。

在2017年的谷歌I/O大会上,Google推出了Flutter----一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布Flutter的第一个Beta版本,2018年5月的I/O大会上更新到了Beta3版本,向正式版本有迈进了一步。

移动端跨平台开发技术演进

以往最早的以Cordova为代表的Hybrid开发,主要依赖于WebView。但是WebView是一个很重的控件,很容易产生内存问题,而且复杂的UI在WebView上显示的性能不好。JS与Native代码之间的通信需要使用JSBridge进行上下文切换,因此会降低一些性能。


 
20180304111443913.png

上图是Cordova框架原理

React Native技术抛开了WebView,利用JavaScriptCore来做桥接,将JS调用转为native调用,只牺牲了小部分性能获取的跨平台开发,这是一大步进步。但是由于依然存在一个从JS代码到原生代码的转化过程,在界面UI被频繁操作的情况下,可能会导致性能问题。


 
2.png

上图React Native框架原理

Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore,而是自己实现了一台UI框架,然后直接系统更底层渲染系统上画UI。所以他采用的开发语言不是JS,而是Dart。据称Dart语言可以编成原生代码。


 
4.png

上图是Flutter框架原理图

关于性能

跨平台开发第一个考虑的就是性能问题

l Cordova的基础是html和js运行在webView容器里面,通过Cordova提供的接口与硬件通讯;所以它的小路天生受到限制,而且也受到了各个厂商对webkit内核支持的好坏;比如之前基于国产某Cloud的程序,在华为手机上显示就不正常,花费不少精力修改。

l React Native的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题。React Native的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加。比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加。想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染。所以它的列表方案不友好。

l Flutter吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了React Native的那种通过桥接器与JavaScript通讯导致效率低下的问题,所以在性能方面比React Native更高一筹。打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体,说明Flutter的渲染没用原生控件进行渲染。

自身优缺点列举

Cordova

优势:

iOS和Android基本上可以共用代码,纯web思维,开发速度快, 简单方便,一次编码,到处运行。如果熟悉web开发,文档很全, 系统级支持封装较好,所有UI组件都是有html模拟,可以统一 使用。

可实现在线更新,允许动态加载web js

文档多,开发者多,遇到问题容易解决,技术成熟

劣势:

占用内存高一些,不适合做游戏类型app, web技术午无法解决一 切问题,对于比较耗能的地方无法利用native的思维实现优势互 补,如高体验的交互,动画等。

React Native

优势:

虽然不能做到一次编码到处运行,但是基本上即使是两套代码, 也是相同的jsx语法, 使用js进行开发。用户体验高于html, 开发效率较高

Flexbox布局据说比native的自适应布局更加简单高效

可实现在线更新2015.7.28 AppStore审核政策调整:允许运行于JavaSriptCore的动态加 载代码。更贴近于原生开发

劣势

对开发人员要求较高,不是懂点web技术就行的,当官方封装的 控件、API无法满足需 求时就必然需要懂一些native的东西去 扩展,扩展性仍然远远不如web,也远远不如直 接写Native Code。

官方说的很隐晦:learn once, write anywhere。人家可run anwhere。就是针对不同的 平台需要些多套代码。

Flutter

优势

高生产效率。一套代码可以开发出Android和iOS应用;Dart语 言优越性,使得同样的 功能只需要很少的代码;迭代更加方便, hot reload功能;

创建优雅的、高度可定制的用户界面。Flutter内置了对Material Design和Cupertino(iOS-favor)的UI组件库;提供了可定制 的UI组件,不再受制于OEM控件的限制;

借助可移植的GPU加速的渲染引擎以及高性能本地ARM代码运行 时以达到跨平台的高质量用户体验。

劣势

Flutter采用Dart语言开发,属于小众语言,需要一切都要重新 学习。

Flutter现在还处在Beta阶段,第三方库很少。

总结

在跨平台开发这件事情上人们一直没有停止去寻找更好、更忧的解决方案。这些框架虽然平台系统的UI框架可以取代,但是系统提供的一些服务是无法取代的。所以优化的再好都没有原生来的流畅、性能好,但是能够接受去妥协一些缺点是可以给企业提供更多的开发选择。

Cordova诞生最早收获开发者和相关技术支持较多,使用起来遇到问题比较好解决。因为纯web开发思维性能比较低,比较适合多信息展示少交互对性能没有这么高要求的应用。

React Native出现相对较早,它优化了早期Hybrid混合开发中的性能问题使其在平台表现接近于原生应用。同时因为性能上的优化也妥协了一次编写到处运行的一套代码好处,但不影响它是目前最成熟、最受欢迎的移动开发框架。

Flutter出现相对较晚,从目前官网介绍和Beta版测试可知性能和速度上更优秀,但使用Dart小众语言还取决于行业内的接受态度,新技术可能会存在一些未知的问题,还需要时间的检验。

总的来说,以上整理分析的框架的优劣都是相互的,根据产品需求和企业技术方向以及技术人员的具体情况,选择最合适的就是最好的。

 



作者:悯农
链接:https://www.jianshu.com/p/900bf9cbd005
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。