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

阿里云优惠：最高￥2000云产品通用代金券
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=dansrwg4

前言

现在主流的移动开发平台是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小众语言还取决于行业内的接受态度，新技术可能会存在一些未知的问题，还需要时间的检验。

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

阿里云优惠：最高￥2000云产品通用代金券
https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=dansrwg4

移动端跨平台开发框架对比分析相关推荐

WebGIS开发及二三维GIS开发框架对比分析
GIS(地理信息系统)前端开发是GIS应用开发的重要组成部分,随着Web GIS技术的发展,前端开发在地图应用中的作用愈加重要. 本文将介绍GIS前端开发的基本计划以及市面上各种二三维GIS开发框架的 ...
跨平台开发框架到底哪家强？5款主流框架横向对比！
跨平台开发框架到底哪家强? 目前市场上有多个专业做跨平台开发的框架,那么对开发者来说究竟哪一个框架更符合自己的需求呢?笔者特地总结对比了一下不同框架的特性. 国内外笔者选择了一共5个主流的测评对象,分 ...
移动端跨平台开发Flutter 与 React Native对比
移动端跨平台开发Flutter 与 React Native 深入对比分析 2019年6月21日20:41:35 发表评论 154 views 移动端跨平台在经历数年沉浮之后,如今还能在舞台聚光灯下雀 ...
对比Compose 、kotlin、flutter 移动端跨平台的未来。
此篇文章主要讨论移动端-跨平台技术: 你是否掌握了大部分Android开发需要的知识点呢? 你是否完整的看完过一本Android基础入门的书呢? 你的技术栈是否还是片面的一角? Kotlin Mult ...
阿里云小程序云发布小程序跨平台开发框架，助力开发者一次开发，多端运行
跨平台小程序开发框架是什么? 跨平台小程序开发框架是支付宝小程序开发工具内新增的开发模块,阿里云小程序云(https://www.aliyun.com/product/miniappdev)与知名跨平 ...
Web端CAD图形找不同？一键在Web端找出CAD图不同并对比分析
引言在实际中,当多专业设计协助时,遇到图纸更新后,要对比图纸找出图纸的不同处,一直是一个比较耗时费力的事情,也是业内的一大痛点.一般CAD新旧图纸的内容对比,包括增加新的图形元素.减少原有的图形元素 ...
HTML5移动端跨平台应用开发框架解析
移动端跨平台应用开发是个有趣的话题.纵观该领域目前各个开发商提供的多种方案,大致可以分为三大类: 基于HTML5的方案.该方案以PhoneGap/Cordova为代表.其基本思路是针对HTML5标准目 ...
Web前端开发框架对比
近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇.不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了 ...
技术干货 | 基于 Qt Quick Plugin 快速构建桌面端跨平台组件
导读:桌面端的 UI 开发框架对比移动端.Web 端的成熟方案,一直处于不温不火的状态.随着疫情掀起的风波,桌面端在线教育.视频会议等需求不断涌现.本文将围绕 Qt Quick 的优势来介绍如何快速创 ...

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

移动端跨平台开发框架对比分析相关推荐

最新文章

热门文章