对于原生native还是倍加推崇的,极佳的用户体验和性能让我学的如痴如醉,可是互联网这个世界可以用一句话可以总结:没有什么是不可能的。自从阿里淘宝天猫横空出世,它们教会了人们如何在网上购物,然后仿佛一夜之间,电商公司如雨后春笋般的涌现,连小学生都知道掌上O2O。这不得不说是一个奇迹。在感叹的同时,电商界已经打的头破血流了,CEO们想尽办法挤占市场,因此一款好的产品,一款好的APP也就是必须的。(ps:终于说到APP了)。

为了功能的快速迭代,为了减少资源成本,和bug热修复等等,电商巨头们迎来了H5的时代。目前市场上HybridApp模式是最多的,本公司也是一样。下面我纪录一下我使用H5方面的一些体会。纯属个人想法。勿喷。

1、(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层。对于用户体验,依然差的要死。对于前端已经没有激情了。呵呵。

2、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来调,这在一定程度上提升了用户体验。而且性能上要好太多。

 

Cordova VS React Native 谁是未来? - b的更多相关文章

  1. 使用CodePush实时更新 React Native 和 Cordova 应用

    近期公司的React native App(云订货)用上CodePush实时更新App技术了.棒棒的 CodePush 是微软开发的.能够实时更新 React Native 和 Cordova 应用. ...

  2. Airbub 弃用React Native

    弃用 React Native ? 最近的技术圈尤为热闹,Google 发布了首个 Flutter 预览版.Vue.js 在 GitHub 上的 star 数量超过了 React.js,而如今全球著名 ...

  3. React Native vs. Cordova.

    简评:跨平台开发五彩斑斓,本文作者简单介绍 RN 和 Cordova 的两种不同终端跨平台流程,从与原生开发联系中分析其利弊. 什么是原生(Native)? 原生是一个相对概念.其实软件开发最后意义指 ...

  4. 移动端跨平台方案对比:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  5. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  6. React Native入门指南

    转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...

  7. 写给移动开发者的 React Native 指南

    本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...

  8. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  9. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

随机推荐

  1. 【转】java 文件 读取目录下的所有文件(包括子目录)

    转自:http://www.cnblogs.com/pricks/archive/2009/11/11/1601044.html import java.io.File; import java.io ...

  2. 如何解决 SogouIinput not enough space for thread data ?? 虚拟内存

    问题:总是提示没有足够的空间读写数据 上图: 原因: 可能是虚拟内存设置了过大了[我不知道明白是不是也是这样,我出现这个问题就是因为我把虚拟内存设置成了4G,我的物理内存是2G的] 具体问题具体分析, ...

  3. highgui.h备查 分类: C/C++ OpenCV 2014-11-08 18:11 292人阅读 评论(0) 收藏

    /*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...

  4. 京东手机webapp商城

    http://bases.wanggou.com/mcoss/mportal/show?tabid=2&ptype=1&actid=1562&tpl=3&pi=1&am ...

  5. 腾讯QQ企业邮箱POP3/SMTP设置

    腾讯企业邮箱支持通过client进行邮件管理. POP3/SMTP协议 收发邮件server地址分别例如以下. 接收邮件server:pop.exmail.qq.com (port 110) 发送邮件 ...

  6. 为Android GridView 设置行背景

    经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...

  7. 写一个函数,参数为$n,生成一个数组,其元素为1~$n,各元素位置随机排列,不得重复

    function rand_array($n){ $array=range(1,$n); shuffle($array); return $array; }

  8. Shell编程速查手册

    https://blog.atime.me/note/shell-scripting-summary.html 总结一下日常Shell脚本里常用的知识,忘记时方便查阅. 常见的shell 常见的Lin ...

  9. linux_2.6内核内存缓冲与I/O调度机制:

    http://blog.csdn.net/kaiwii/article/details/7030178 到底是BIO还是BH?答案是BIO与BH

  10. (转)resize扩展

    jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了.怎么办呢, ...