Cordova VS React Native 誰是將來? - b

對於原生native仍是倍加推崇的，極佳的用戶體驗和性能讓我學的如癡如醉，但是互聯網這個世界能夠用一句話能夠總結：沒有什麼是不可能的。自從阿里淘寶天貓橫空出世，它們教會了人們如何在網上購物，而後彷彿一晚上之間，電商公司如雨後春筍般的涌現，連小學生都知道掌上O2O。這不得不說是一個奇蹟。在感嘆的同時，電商界已經打的頭破血流了，CEO們想盡辦法擠佔市場，所以一款好的產品，一款好的APP也就是必須的。（ps:終於說到APP了）。

爲了功能的快速迭代，爲了減小資源成本，和bug熱修復等等，電商巨頭們迎來了H5的時代。目前市場上HybridApp模式是最多的，本公司也是同樣。下面我紀錄一下我使用H5方面的一些體會。純屬我的想法。勿噴。

一、（PhoneGap）Cordova 

PhoneGap是一款開源的手機應用開發平臺，它僅僅只用HTML和JavaScript語言就能夠製做出能在多個移動設備上運行的應用。 PhoneGap將移動設備自己提供的複雜的API進行了抽象和簡化，提供了一系列豐富的API供開發者調用，只要你會HTML和Javascript或 者Java語言，就能夠利用PhoneGap提供的API去調用各類功能，製做出在各類手機平臺(iPhone，Android ，BlackBerry，Symbian，Palm，Window Phone)上運行的應用。目前phonegap得到Apple,IBM,NOKIA,palm等衆多公司的支持。簡單來講使用PhoneGap就是使用HTML,JavaScript和CSS來開發程序，最終經過PhoneGap能夠產生對應版本的native 程序。Cordova是後面Apache改的名字，歷史緣由，這裏不細說了。 





看這張圖，PhoneGap API將你寫的h5應用打包成響應的native程序，這個是怎麼實現的呢？看過代碼就知道了：

[code]public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

初始化一個WebView

[code]  protected void init() {
        appView = makeWebView();
        createViews();
        if (!appView.isInitialized()) {
            appView.init(cordovaInterface, pluginEntries, preferences);
        }
        cordovaInterface.onCordovaInit(appView.getPluginManager());

        // Wire the hardware volume controls to control media if desired.
        String volumePref = preferences.getString("DefaultVolumeStream", "");
        if ("media".equals(volumePref.toLowerCase(Locale.ENGLISH))) {
            setVolumeControlStream(AudioManager.STREAM_MUSIC);
        }
    }

其實很簡單，就是咱們日常使用的H5＋webView這種開發模式。webview 的好與很差我就不說了。 

Cordova與native經過phone Gap Bridge（CordovaLib）來通訊，也就是說phoneGap提供了豐富的插件庫來與native通訊。沒有接觸插件開發的工程師們能夠看看我寫的這篇  自定義Cordova插件—SweetAlertDialogPlugin 

不少時候Cordova提供的插件是知足不了咱們開發須要的，所以都是咱們自定義插件開發。

因此咱們看到了phoneGap仍是停留在web層。對於用戶體驗，依然差的要死。對於前端已經沒有激情了。呵呵。

二、React native

Facebook 在 React.js Conf 2015 大會上推出了基於 JavaScript 的開源框架 React Native，本中文教程翻譯自 React Native 官方文檔。

React Native 結合了 Web 應用和 Native 應用的優點，可使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操做系統原生的 UI 組件，代替 DOM 元素來渲染等。

React Native 使你可以使用基於 JavaScript 和 React 一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在全部開發人員關心的平臺的開發效率上——開發者只需學習一種語言就能輕易爲任何平臺高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，並將繼續爲 React Native 投資。

官方是這麼介紹的，你們真正關心的恐怕不是這個，而是js如何跟原生組件搭上關係的呢。舉個例子。咱們熟悉的Toast. 

JS代碼，前端攻城獅們，是否是很贊成看的懂啊。

[code]'use strict';

var RCTToastAndroid = require('NativeModules').ToastAndroid;

/**
 * This exposes the native ToastAndroid module as a JS module. This has a function 'show'
 * which takes the following parameters:
 *
 * 1. String message: A string with the text to toast
 * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
 */

var ToastAndroid = {

  SHORT: RCTToastAndroid.SHORT,
  LONG: RCTToastAndroid.LONG,

  show: function (
    message: string,
    duration: number
  ): void {
    RCTToastAndroid.show(message, duration);
  },

};

module.exports = ToastAndroid;

native代碼：

[code]package com.facebook.react.modules.toast;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.common.MapBuilder;

import java.util.Map;

/**
 * {@link NativeModule} that allows JS to show an Android Toast.
 */
public class ToastModule extends ReactContextBaseJavaModule {

  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "ToastAndroid";
  }

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = MapBuilder.newHashMap();
    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
    return constants;
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

經過getName這個方法拿到JS傳過來的名字ToastAndroid，來調用Toast。手法跟Cordova差很少。更多組件的封裝能夠去ReactAndroid的源碼。以爲寫的仍是很是不錯的。 React與Cordova不一樣，React經過封裝原生組件來供js來調，這在必定程度上提高了用戶體驗。並且性能上要好太多。