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来调，这在必定程度上提高了用户体验。并且性能上要好太多。