移动端跨平台开发框架对⽐分析
前⾔
现在主流的移动开发平台是Android和iOS，每个平台的开发技术和运⾏⽅式都不⼀样，⼤家都是针对每个平台开发应⽤。⾃然会存在⼀个移动应⽤产品要针对每个平台开发⼀套的现象，这样带来的问题则是开发成本⾼、效率低下，进⽽会有进⾏跨平台开发的需求。从最开始以Cordova为基础的Hybrid混合开发技术，到React Native的桥接技术，到现在新兴的Flutter技术，跨平台开发技术⼀直在演进。
⽬前主流跨平台框架简介
C or d ov a
Cordova 是Apache旗下的⼀个开源的移动开发框架。它允许你使⽤WEB开发技术（HTML5、CSS3、JavaScript）进⾏跨平台开发。应⽤在每个平台的封装器中执⾏，并且依赖规范的API对设备进⾏⾼效的访问，⽐如传感器、数据、⽹络状态等等。
Cordova通过对HTML、CSS、JS封装为原⽣APP。Cordova将不同设备的功能，按标准进⾏了统⼀封装，开发⼈员不需要了解设备的原⽣实现细节，并且提供了⼀组统⼀的JavaScript类库，以及为这些类库所使⽤的设备相关的原⽣后台代码。因此实现了“write once, run
anywhere”(⼀次开发，随处运⾏)。
Cordova前⾝是PhoneGap。2011年Adobe公司将其收购对其开源，并捐献给Apache，重新命名为Cordova。
Re act Nativ e
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的流⾏移动平台。
F lutte r
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框架原理图
手机上可以打html与css的app关于性能
跨平台开发第⼀个考虑的就是性能问题
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的渲染没⽤原⽣控件进⾏渲染。
⾃⾝优缺点列举
C or d ov a
优势：
iOS和Android基本上可以共⽤代码，纯web思维，开发速度快， 简单⽅便，⼀次编码，到处运⾏。如果熟悉web开发，⽂档很全， 系统级⽀持封装较好，所有UI组件都是有html模拟，可以统⼀ 使⽤。
可实现在线更新，允许动态加载web js
⽂档多，开发者多，遇到问题容易解决，技术成熟
劣势：
占⽤内存⾼⼀些，不适合做游戏类型app, web技术午⽆法解决⼀ 切问题，对于⽐较耗能的地⽅⽆法利⽤native的思维实现优势互 补，如⾼体验的交互，动画等。
Re act Nativ e
优势：
虽然不能做到⼀次编码到处运⾏，但是基本上即使是两套代码， 也是相同的jsx语法， 使⽤js进⾏开发。⽤户体验⾼于html， 开发效率较⾼
Flexbox布局据说⽐native的⾃适应布局更加简单⾼效
可实现在线更新2015.7.28 AppStore审核政策调整：允许运⾏于JavaSriptCore的动态加 载代码。更贴近于原⽣开发
劣势：
对开发⼈员要求较⾼，不是懂点web技术就⾏的，当官⽅封装的 控件、API⽆法满⾜需 求时就必然需要懂⼀些native的东西去 扩展，扩展性仍然远远不如web，也远远不如直 接写Native Code。
官⽅说的很隐晦：learn once， write anywhere。⼈家可run anwhere。就是针对不同的 平台需要些多套代码。
F lutte r
优势：
⾼⽣产效率。⼀套代码可以开发出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⼩众语⾔还取决于⾏业内的接受态度，新技术可能会存在⼀些未知的问题，还需要时间的检验。
总的来说，以上整理分析的框架的优劣都是相互的，根据产品需求和企业技术⽅向以及技术⼈员的具体情况，选择最合适的就是最好的。
2018.7.24

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。