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

前言

现在主流的移动开发平台是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://blog.csdn.net/ahence/article/details/79435378

http://szuwest.github.io/flutterkuang-jia-yan-jiu-he-yu-rndui-bi.html

https://blog.csdn.net/zhangzeshuai/article/details/80151710

https://blog.csdn.net/timtian008/article/details/54890514

https://www.jianshu.com/p/06acf2d8ba61

2018.7.24

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • 可能我不会再想着给你很多喜欢 我有过的爱情变成了怀念 你是我漫漫人生最终的心酸 我却不得不步步回头步步向前 浮华的...
    六7阅读 426评论 0 2
  • 创建用户1、Linux系统创建用户:useradd -d /home/ygzx ygzx2、为用户设置密码:pas...
    静候良机阅读 5,546评论 0 0
  • 他和我一样的年纪,高二党,却现在每天工作从下午5-11点,在我们酣睡的时候,就是他刚刚回家的时侯,哦不,回宿舍的...
    文妹子呀阅读 203评论 0 1