移動端跨平臺開發框架對比分析

前言

如今主流的移動開發平臺是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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。