1. 程式人生 > >Cordova和React-Native兩種框架的對比

Cordova和React-Native兩種框架的對比

Cordova 和 React-Native 是使用 Web 開發移動端的兩大框架。 Cordova 是 Apache 旗下的。 React-Native 是 Facebook 旗下的在2013年釋出的一個前端框架。兩者皆開源。 下面的內容主要記錄了這兩大框架的優劣。以及移動端開發中有關 WebView 比較可行的幾種選擇。 Cordova文件 , React-Native文件 。

對比
跨平臺特性

  • Cordova: write once, run anywhere ( 一次開發,隨處執行)
  • React-Native: Learn once, write anywhere ( 一次學習,隨處開發)

功能支援

  • Cordova: 基本功能完全具備,對於底層,如攝像頭之類的,需要外掛。
  • React-Native: 完全支援。 Android 端不是很完善。

風險程度

  • Native 比 cordova 高。

開發成本

  • Cordova: 完全基於 html,css,js 。寫一次程式碼,兩個平臺都適用。
  • React-Native: 具有相同語法體系,但需要根據不同平臺編寫不同程式碼。

執行速度

  • Cordova: 相對較慢
  • React-Native: 跟 Native 基本相當

WebView問題
因為 Android WebView 和 IOS 的 UIWebView 記憶體洩露的問題。所以在選擇核心的時候,使用原生的 WebView 記憶體洩露很明顯。並且不易解決。 IOS8+ 之前,同樣有大量記憶體洩露。分別看一下Android和IOS系統比例圖:

  • Android
    這裡寫圖片描述
  • IOS
    這裡寫圖片描述

如果要考慮 Android4.4 以下的裝置和 IOS8+ 裝置。因為前後的執行核心不一。效能不一。以及國內廠商對於系統的深度定製,不同的渲染。 app 最好有專門的核心。保證擁有一致性的體驗。有如下幾個選擇:

使用 Crosswalk 開源 web 引擎
優勢

  1. 更豐富的 HTML5 特性支援。包括 WebGL,WebAudio,WebRTC,Gamepad,WebSocket 等等。
  2. 使用 Crosswalk 可以保持平臺的一致性。 劣勢

  3. 打包後的 app 體積增加 20M-30M 。

  4. Crosswalk lite 針對上面第一條, CrossWalk 提出了 Shared
    Mode 和 Crosswalk lite 解決方案。體積可以減少到只增加10M左右。

使用騰訊 TBS 瀏覽服務
優勢

  1. 速度快:相比系統 webView 的網頁載入速度有近30%的提升。
  2. 大小隻有 253K。
  3. 省流量:雲端優化技術使流量節省20%。
  4. 更安全:24小時安全問題解決機制。
  5. 更穩定:經過億級使用者的使用考驗,CRASH率0.15%。
  6. 整合強大的視訊播放器,支援各種視訊格式直接開啟。
  7. 適屏排版、字型設定等瀏覽增強功能的提供。
  8. Html5更完整支援。
  9. 無系統核心的碎片化問題,更少的相容性問題劣勢。
  10. X5SDK是通過呼叫微信/手機QQ/空間的X5核心。如果手機沒有安裝騰訊相關軟體。這個就不能使用。

劣勢

  1. 手機中必須安裝有騰訊的服務。

優劣對比

cordova  ionic :

優勢:
    ios 和 android 基本上可以共用程式碼,純web思維,開發速度快,簡單方便,一次編碼,到處執行,如果熟悉web開發,則開發難度較低。
    文件很全,系統級支援封裝較好,所有UI元件都是有html模擬,可以統一使用。

    可實現線上更新 允許載入動態載入web js

    文件多,開發者多,視訊教程多 容易學習    遇到問題容易解決  技術成熟



劣勢:

   佔用記憶體高一些(不過手機記憶體都大了不影響),不適合做遊戲型別app,   web技術無法解決一切問題,對於比較耗效能的地方無法利用native的思維實現優勢互補,如高體驗的互動,動畫等。


react-native :

優勢:

1、雖然不能做到一處編碼到處執行,但是基本上即使是兩套程式碼,也是相同的jsx語法,使用js進行開發。使用者體驗,高於html,開發效率較高 2、flexbox 佈局 據說比native的自適應佈局更加簡單高效
    可實現線上更新 2015.7.28 AppStore稽核政策調整:允許運行於JavascriptCore的動態載入程式碼
    更貼近原生開發

劣勢:

1、(引)對開發人員要求較高,不是懂點web技術就行的,當官方封裝的控制元件、api無法滿足需求時 就必然需要懂一些native的東西去擴充套件,擴充套件性仍然遠遠不如web,也遠遠不如直接寫Native code。
 2、(引)官方說得很隱晦:learn once, write anywhere。人家可沒說run anywhere。事實上,從官方的api來看SliderIOS,SwitchIOS..等等這些控制元件,之後勢必會出現SliderAndroid,SwitchAndroid...,也就是很可能針對不同的平臺會需要寫多套程式碼。
 3、發展還不成熟,目前很多ui元件只有ios的實現,android的需要自己實現。
        (引)從Native到Web,要做很多概念轉換,勢必造成雙方都要妥協。比如web要用一套CSS的閹割版,Native通過css-layout拿到最終樣式再轉換成native原生的表達方式(比如iOS的Constraint\origin\Center等屬性),再比如動畫。另外,若Android和iOS都要做相同的封裝,概念轉換就更復雜 5、文件還不夠完整 學習曲線偏高
4.文件少  學習起來困難