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

前言

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

目前主流跨平台框架简介

Cordova

Cordova 是Apache旗下的一个开源的移动开发框架。它容许你使用WEB开发技术（HTML五、CSS三、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 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。