mdcc2016跨平台分享

#移动端跨平台

Web应用 VS 原生应用


Web应用优势

  • 一次编写,几乎可以在所有平台运行
  • 搜索引擎可爬性
  • 版本控制简单
  • 可分享性

Web应用的问题

  • 页面的载入时间,离线体验
  • 无法利用主屏幕图标,推送通知等功能增强应用画面外的
    互动
  • 受限于浏览器的实现,用户体验难以匹敌 Native 应用
  • 相机,音频,视频,后台,振动,剪贴板,应用内支付……
  • Android 的老旧机种上的性能问题

原生应用优势

  • 响应速度及缓存
  • 更强的用户交互性 推送通知等交互
  • 用户体验做的更好
  • 性能优化等方面控制更好

原生应用的问题

  • 多平台需要多人开发,iOS、Android 等(以后出现其他平台需要更多人去适配)
  • 版本控制不便
  • 上线修复bug需要发布新版本(热更新不能解决全部问题)
  • iOS 上线发布等待时间长(即便现在速度提高很多)

需求

  • 尽可能地将现有的 Web 应用快速包装成 Native 应用上线
  • 尽可能让现有的开发者轻松上手 Native 的开发
  • 尽可能实现 iOS/Android/Web 间跨平台的代码复用,减少未来
    多平台对应可能带来的负担
  • 快速进行版本更新迭代

动态配置方案

  • 从 Server 获取配置 –> 解析 –> 执行native代码
    很多时候,我们自觉或者不自觉的利用 JSON 文件实现动态配置的 效果,它的核心流程是:

    • 通过 HTTP 请求获取 JSON 格式的配置文件。
    • 配置文件中标记了每一个元素的属性,比如位置,颜色,图片 URL 等。
    • 解析完 JSON 后,我们调用 Objective-C 的代码,完成 UI 控件的渲染。

    缺陷明显:不能处理复杂业务逻辑的改变 只能配置一些简单设置

##驱动原生 已是一种移动App端技术流派

  • 采用原生渲染,摒弃Webkit渲染,提升体验
  • 一般都采用Web语言作为基础开发语言,降低学习成本
  • 种种迹象表明,一种叫“小程序” 的东西也是驱动原生型

tips:怎么查看app是否是原生 or webkit(Android版)


##初识 React (前端JS框架)

  • FaceBook 推出 React 框架
  • 把一组相关的 HTML 标签,也就是 app 内的 UI 控件,封装进一个组件(Component)中

React Native:

一个基于 JavaScript,具备动态配置能力,面向前端开发者的移动端开发框架,React Native
它的宗旨是让前端开发者像用 React 写网页那样,用 React Native 写移动端应用

Learn once,Write anywhere!

React Native 希望前端开发者学习完 React 后,能够用同样的语法、工具等,分别开发安卓和 iOS 平台的应用并且不用一行原生代码

如果用一个词概括 React Native,那就是:Native 版本的 React。

###Weex

weex 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台APP.

Weex&ReactNative对比

JS引擎:

weex使用V8, ReactNative使用JSCore

iOS上weex依然使用JSCore而在安卓上weex使用了V8

安卓ReactNative虽然使用了JSCore,但这个JSCore不是系统源生的,而是直接打入app包里的WebKit库,这也是为啥安卓项目引入RN包大小会增大4~5M的原因,ReactNative在iOS上JSCore是系统自带的,完全无法打入app包内,所以iOS的包大小,引入RN后变化并没有那么夸张

来到了weex,反正安卓RN都是完全自己植入进去的一整个JSCore,那不如把JSCore换成最新的V8引擎,但是iOS就不同了,iOS继续使用系统自带的JSCore还是方便的,系统自带的不用白不用

框架对比

vue vs react

react模板JSX学习使用有一定的成本 vue更接近常用的web开发方式,模板就是普通的html,数据绑定使用mustache风格,样式直接使用css

扩展性

组件的扩展上,weex和ReactNative具有一样的能力

三方库的接入上,weex对网络,图片,统计等常见的用户可能想自己定制的功能,提供了相应的适配接口,可以由用户方便的定制,ReactNative需要自己修改源码

ReactNative其实是一个可以任意扩展支持的框架,你down下来的源码,你发现实现不了的功能,扩展一下,妥妥没问题,你down下来的源码,你发现性能有问题?很卡?(说的就是listview!)我去自己扩展一个啊~iOS基于tableview自己重写一个带重用cell的RNTableview~安卓基于recycleview,重写一个哈?我始终认为,RN是一个思路,不是一个死的框架

RN原理 - weex原理基本是一致的(iOS为例)

  • 首先要明白的一点是,即使使用了 React Native,我们依然需要 UIKit 等框架,调用的是 Objective-C 代码。总之,JavaScript 只是辅助,它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid 完全没有关系,它只不过是以 JavaScript 的形式告诉 Objective-C 该执行什么代码。
  • React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。对于没有接触过 JavaScript 的人来说,非常有必要理解 JavaScript 代码如何被执行。
  • 苹果提供了一个叫做 JavaScript Core 的框架,这是一个 JavaScript 引擎。
  • 由于 JavaScript Core 是一个面向 Objective-C 的框架,在 Objective-C 这一端,我们对 JavaScript 上下文知根知底,可以很容易的获取到对象,方法等各种信息,当然也包括调用 JavaScript 函数。真正复杂的问题在于,JavaScript 不知道 Objective-C 有哪些方法可以调用。React Native 解决这个问题的方案是在 Objective-C 和 JavaScript 两端都保存了一份配置表,里面标记了所有 Objective-C 暴露给 JavaScript 的模块和方法。这样,无论是哪一方调用另一方的方法,实际上传递的数据只有 ModuleId、MethodId 和 Arguments 这三个元素,它们分别表示类、方法和方法参数,当 Objective-C 接收到这三个值后,就可以通过 runtime 唯一确定要调用的是哪个函数,然后调用这个函数。

React Native通信机制详解

##React Native 优缺点分析

优点

  • 复用了 React 的思想,有利于前端开发者涉足移动端。
  • 能够利用 JavaScript 动态更新的特性,快速迭代。
  • 相比于原生平台,开发速度更快,相比于 Hybrid 框架,性能更好。

缺点

  • 做不到 Write once, Run everywhere,也就是说开发者依然需 要为 iOS 和 Android 平台提供两套不同的代码,比如参考官方文 档可以发现不少组件和API都区分了 Android 和 iOS 版本。即使是共用组件,也会有平台独享的函数。
  • 不能做到完全屏蔽 iOS 端或 Android 的细节,前端开发者必须对原生平台有所了解。加重了学习成本。对于移动端开发者来说,完全不具备用 React Native 开发的能力。
  • 由于 Objective-C 与 JavaScript 之间切换存在固定的时间开销,所以性能必定不及原生。比如目前的官方版本无法做到 UItableview(ListView) 的视图重用,因为滑动过程中,视图重用需要在异步线程中执行,速度太慢。这也就导致随着 Cell 数量的增加,占用的内存也线性增加。

利用脚本语言进行原生平台开发的一次成功尝试,降低了前端开发者入门移动端的门槛,一定业务场景下具有独特的优势,不太可能取代原生平台开发。作为混合开发是提高效率的一种解决方案。

##展望

  • ReactNative 让 JavaScript 开发者可以不用学习新的语 言,直接开发 Native 应用
  • ReactNative 内部的 Bridge 的概念,让 ReactNative 拥 有无限的可能性,只要有人开发 Bridge 的话就可以兼容 新平台
    展望
  • ReactNative 将会巩固其 JavaScript 跨平台方案的决定 性低位,今后也会有越来越多的使用案例
  • React 团队在 React.js Conf 上提到了 ReactNative代码 在 Web 的复用问题,或许可以期待官方或者社区的动作
  • 通过 ReactNative 开发跨平台应用, iOS/Android/Web 开发者可以在 High Level 使用相同的语言进行开发

应用(混合型应用开发)

美团点评 RN实践

RN嵌入方式 Native APP + RN

  • JS包很小,不到1MB
  • 每个功能都有RN重复500多k代码
  • 热更新功能
  • 基于现有app,RN实现几个功能

工程结构 MDCC 客户端实例

##什么界面适合用RN 去做 ?

RN增量热更新思路

环境搭建

###必需的软件

  • Homebrew: Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件
  • Node.js
  • React Native的命令行工具(react-native-cli)
  • 安装watchman watchman是用于监听文件变化的工具,应该是用于监听文件变化,然后界面做出响应。
  • flow用于对代码进行类型检查,用于静态分析js语法错误的工具
  • nvm 是 Node.js 的版本管理器,可以轻松安装并管理各个版本的 Node.js
  • nvm安装node.js和npm

###初始化项目

react-native init RN_demo

React Native 从入门到原理

Weex & ReactNative & JSPatch

ReactNative 增量热更新思路

reactnative中文网

搭建开发环境

搭建开发环境 简书