移动端跨平台开发框架对比分析
阿里云優惠：最高￥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
總結
以上是生活随笔為你收集整理的移动端跨平台开发框架对比分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot2.0 基础案例(1
- 下一篇： Linux多线程实践(5) --Posi