移動開發(fā)對比跨平臺的優(yōu)缺點(diǎn)分析 ：Cordova ?React Native ??Flutter
前言
現(xiàn)在主流的移動開發(fā)平臺是Android和iOS赡若，每個平臺的開發(fā)技術(shù)和運(yùn)行方式都不一樣，大家都是針對每個平臺開發(fā)應(yīng)用团甲。自然會存在一個移動應(yīng)用產(chǎn)品要針對每個平臺開發(fā)一套的現(xiàn)象逾冬，這樣帶來的問題則是開發(fā)成本高、效率低下躺苦，進(jìn)而會有進(jìn)行跨平臺開發(fā)的需求身腻。從最開始以Cordova為基礎(chǔ)的Hybrid混合開發(fā)技術(shù)，到React Native的橋接技術(shù)匹厘，到現(xiàn)在新興的Flutter技術(shù)嘀趟，跨平臺開發(fā)技術(shù)一直在演進(jìn)。
目前主流跨平臺框架簡介
Cordova
Cordova 是Apache旗下的一個開源的移動開發(fā)框架愈诚。它允許你使用WEB開發(fā)技術(shù)（HTML5她按、CSS3、JavaScript）進(jìn)行跨平臺開發(fā)炕柔。應(yīng)用在每個平臺的封裝器中執(zhí)行酌泰，并且依賴規(guī)范的API對設(shè)備進(jìn)行高效的訪問，比如傳感器匕累、數(shù)據(jù)陵刹、網(wǎng)絡(luò)狀態(tài)等等。
Cordova通過對HTML欢嘿、CSS衰琐、JS封裝為原生APP。Cordova將不同設(shè)備的功能炼蹦，按標(biāo)準(zhǔn)進(jìn)行了統(tǒng)一封裝碘耳，開發(fā)人員不需要了解設(shè)備的原生實(shí)現(xiàn)細(xì)節(jié)，并且提供了一組統(tǒng)一的JavaScript類庫框弛，以及為這些類庫所使用的設(shè)備相關(guān)的原生后臺代碼。因此實(shí)現(xiàn)了“write once, run anywhere”(一次開發(fā)捕捂，隨處運(yùn)行)瑟枫。
Cordova前身是PhoneGap。2011年Adobe公司將其收購對其開源指攒，并捐獻(xiàn)給Apache慷妙，重新命名為Cordova。
React Native
React Native讓開發(fā)者使用JavaScript和React編寫應(yīng)用允悦，利用相同的核心代碼就可以創(chuàng)建Web,iOS和Android平臺的原生應(yīng)用膝擂。React Native著力于提高多平臺的開發(fā)效率-----僅需學(xué)習(xí)一次，編寫任何平臺（Learn once, write anwhere）。
React Native支持標(biāo)準(zhǔn)平臺組件使用架馋，在iOS平臺我們可以使用UITaBar控件狞山，在Android平臺我們可以使用rawer控件。這樣App從使用上和視覺上擁有像原生App一樣的體驗(yàn)叉寂。
2015年9月15日萍启，F(xiàn)acebook發(fā)布了React Native for Android，把Web和原生平臺的JavaScript開發(fā)技術(shù)擴(kuò)展到了Google的流行移動平臺屏鳍。
Flutter
Flutter是面向iOS和Android應(yīng)用勘纯，提供一套基礎(chǔ)代碼（使用Dart語言）的高性能高可靠軟件開發(fā)工具包，使開發(fā)者能夠在iOS和Android兩個主要的移動平臺上钓瞭，打造統(tǒng)一代碼的高性能應(yīng)用驳遵。
Flutter能夠在iOS和Android上運(yùn)行起來，依靠的是一個叫Flutter Engine的虛擬機(jī)山涡，F(xiàn)lutter Engine是Flutter應(yīng)用程序的運(yùn)行環(huán)境堤结，開發(fā)人員可以通過Flutter框架和API在內(nèi)部進(jìn)行交互。
在2017年的谷歌I/O大會上佳鳖，Google推出了Flutter----一款新的用于創(chuàng)建移動應(yīng)用的開源庫霍殴。在2018年初世界移動大會上發(fā)布Flutter的第一個Beta版本，2018年5月的I/O大會上更新到了Beta3版本系吩，向正式版本有邁進(jìn)了一步来庭。
移動端跨平臺開發(fā)技術(shù)演進(jìn)
以往最早的以Cordova為代表的Hybrid開發(fā)，主要依賴于WebView穿挨。但是WebView是一個很重的控件月弛，很容易產(chǎn)生內(nèi)存問題，而且復(fù)雜的UI在WebView上顯示的性能不好科盛。JS與Native代碼之間的通信需要使用JSBridge進(jìn)行上下文切換帽衙，因此會降低一些性能。
上圖是Cordova框架原理
React Native技術(shù)拋開了WebView贞绵，利用JavaScriptCore來做橋接厉萝，將JS調(diào)用轉(zhuǎn)為native調(diào)用，只犧牲了小部分性能獲取的跨平臺開發(fā)榨崩，這是一大步進(jìn)步谴垫。但是由于依然存在一個從JS代碼到原生代碼的轉(zhuǎn)化過程，在界面UI被頻繁操作的情況下母蛛，可能會導(dǎo)致性能問題翩剪。
上圖React Native框架原理
Flutter實(shí)現(xiàn)跨平臺采用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScriptCore彩郊，而是自己實(shí)現(xiàn)了一臺UI框架前弯，然后直接系統(tǒng)更底層渲染系統(tǒng)上畫UI蚪缀。所以他采用的開發(fā)語言不是JS，而是Dart恕出。據(jù)稱Dart語言可以編成原生代碼询枚。
上圖是Flutter框架原理圖
關(guān)于性能
跨平臺開發(fā)第一個考慮的就是性能問題
l Cordova的基礎(chǔ)是html和js運(yùn)行在webView容器里面，通過Cordova提供的接口與硬件通訊剃根；所以它的小路天生受到限制哩盲，而且也受到了各個廠商對webkit內(nèi)核支持的好壞；比如之前基于國產(chǎn)某Cloud的程序狈醉，在華為手機(jī)上顯示就不正常廉油，花費(fèi)不少精力修改。
l React Native的效率由于是將View編譯成了原生View苗傅，所以效率上要比基于Cordova的HTML5高很多抒线，但是它也有效率問題。React Native的渲染機(jī)制是基于前端框架的考慮渣慕，復(fù)雜的UI渲染是需要依賴多個view疊加嘶炭。比如我們渲染一個復(fù)雜的ListView，每一個小的控件逊桦，都是一個native的view眨猎，然后相互組合疊加。想想此時如果我們的list再需要滑動刷新强经，會有多少個對象需要渲染睡陪。所以它的列表方案不友好。
l Flutter吸收了前兩者的教訓(xùn)之后匿情，在渲染技術(shù)上兰迫，選擇了自己實(shí)現(xiàn)（GDI），由于有更好的可控性炬称，使用了新的語言Dart汁果，避免了React Native的那種通過橋接器與JavaScript通訊導(dǎo)致效率低下的問題，所以在性能方面比React Native更高一籌玲躯。打開Android手機(jī)開發(fā)者選項(xiàng)里面的顯示邊界布局据德，發(fā)現(xiàn)Flutter的布局是一個整體，說明Flutter的渲染沒用原生控件進(jìn)行渲染跷车。
自身優(yōu)缺點(diǎn)列舉
Cordova
優(yōu)勢：
iOS和Android基本上可以共用代碼棘利，純web思維，開發(fā)速度快姓赤， 簡單方便，一次編碼仲吏，到處運(yùn)行不铆。如果熟悉web開發(fā)蝌焚，文檔很全， 系統(tǒng)級支持封裝較好誓斥，所有UI組件都是有html模擬只洒，可以統(tǒng)一 使用。
可實(shí)現(xiàn)在線更新劳坑，允許動態(tài)加載web js
文檔多毕谴，開發(fā)者多，遇到問題容易解決距芬，技術(shù)成熟
劣勢：
占用內(nèi)存高一些涝开，不適合做游戲類型app, web技術(shù)午無法解決一 切問題，對于比較耗能的地方無法利用native的思維實(shí)現(xiàn)優(yōu)勢互 補(bǔ)框仔，如高體驗(yàn)的交互舀武，動畫等。
React Native
優(yōu)勢：
雖然不能做到一次編碼到處運(yùn)行离斩，但是基本上即使是兩套代碼银舱， 也是相同的jsx語法， 使用js進(jìn)行開發(fā)跛梗。用戶體驗(yàn)高于html寻馏， 開發(fā)效率較高
Flexbox布局據(jù)說比native的自適應(yīng)布局更加簡單高效
可實(shí)現(xiàn)在線更新2015.7.28 AppStore審核政策調(diào)整：允許運(yùn)行于JavaSriptCore的動態(tài)加 載代碼。更貼近于原生開發(fā)
劣勢：
對開發(fā)人員要求較高核偿，不是懂點(diǎn)web技術(shù)就行的诚欠，當(dāng)官方封裝的 控件、API無法滿足需 求時就必然需要懂一些native的東西去 擴(kuò)展宪祥，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web聂薪，也遠(yuǎn)遠(yuǎn)不如直 接寫Native Code。
官方說的很隱晦：learn once蝗羊， write anywhere藏澳。人家可run anwhere。就是針對不同的 平臺需要些多套代碼耀找。
Flutter
優(yōu)勢：
高生產(chǎn)效率翔悠。一套代碼可以開發(fā)出Android和iOS應(yīng)用；Dart語 言優(yōu)越性野芒，使得同樣的 功能只需要很少的代碼蓄愁；迭代更加方便， hot reload功能狞悲；
創(chuàng)建優(yōu)雅的撮抓、高度可定制的用戶界面。Flutter內(nèi)置了對Material Design和Cupertino（iOS-favor）的UI組件庫摇锋；提供了可定制 的UI組件丹拯，不再受制于OEM控件的限制站超；
借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運(yùn)行 時以達(dá)到跨平臺的高質(zhì)量用戶體驗(yàn)。
劣勢：
Flutter采用Dart語言開發(fā)乖酬，屬于小眾語言死相，需要一切都要重新 學(xué)習(xí)。
Flutter現(xiàn)在還處在Beta階段咬像，第三方庫很少算撮。
總結(jié)
在跨平臺開發(fā)這件事情上人們一直沒有停止去尋找更好、更憂的解決方案县昂。這些框架雖然平臺系統(tǒng)的UI框架可以取代肮柜，但是系統(tǒng)提供的一些服務(wù)是無法取代的。所以優(yōu)化的再好都沒有原生來的流暢七芭、性能好素挽，但是能夠接受去妥協(xié)一些缺點(diǎn)是可以給企業(yè)提供更多的開發(fā)選擇。
Cordova誕生最早收獲開發(fā)者和相關(guān)技術(shù)支持較多狸驳，使用起來遇到問題比較好解決预明。因?yàn)榧僿eb開發(fā)思維性能比較低，比較適合多信息展示少交互對性能沒有這么高要求的應(yīng)用耙箍。
React Native出現(xiàn)相對較早撰糠，它優(yōu)化了早期Hybrid混合開發(fā)中的性能問題使其在平臺表現(xiàn)接近于原生應(yīng)用。同時因?yàn)樾阅苌系膬?yōu)化也妥協(xié)了一次編寫到處運(yùn)行的一套代碼好處辩昆，但不影響它是目前最成熟阅酪、最受歡迎的移動開發(fā)框架。
Flutter出現(xiàn)相對較晚汁针，從目前官網(wǎng)介紹和Beta版測試可知性能和速度上更優(yōu)秀术辐，但使用Dart小眾語言還取決于行業(yè)內(nèi)的接受態(tài)度，新技術(shù)可能會存在一些未知的問題施无，還需要時間的檢驗(yàn)辉词。
總的來說，以上整理分析的框架的優(yōu)劣都是相互的猾骡，根據(jù)產(chǎn)品需求和企業(yè)技術(shù)方向以及技術(shù)人員的具體情況瑞躺，選擇最合適的就是最好的。
