浅谈React Native与落实机制

澳门威尼斯人app下载 1

码市 Slogan

1. React Native简单介绍

目前App开发的主流方式有三种: Native开发,Hybird开发以及Web开发

创业公司的决定往往让人出其不意

为了筹备10月20号码市产品发布会,CODING
开发团队从9月开始如火如荼的开发码市网站,10月初码市网站已基本成型,可以正常运作。再此期间,码市App并没有纳入筹备计划中,取而代之的是码市移动版。就在发布会前两周(没记错的话应该是10月5号),张老板突然下达了命令:我们要用一周时间开发码市
App,必须赶在码市发布会之前上线!OMG!此事当真?!

原生Native开发

主要采用Object-C/Swift方式进行原生开发。运行效率高,流畅,用户体验好,可以做各种复杂的动画效果。平台独立性,代码无法在其他平台上运行,无法做到跨平台。更新审核周期比较长,不利于App问题的快速修复

挑战就是做一件你认为不可能完成的事情

一周时间开发码市App
的确称得上一个极限挑战,如何合理的安排时间?10月6日开始到10.20号整整两周,期间要做需求整理、原型制作、Ui设计、程序开发,外加一周
AppStore
审核时间。为了按时完成任务,做产品之前必须规划好清晰的任务排期。

任务排期:

产品定位(1天)-> 原型制作(1天)-> UI设计(2天)->
程序开发&测试(5天)-> 7天审核

这个排期够紧迫了吧,可 iOS
客户端想在预期的时间上线还是不可能,时间必须再压缩。

调整后任务排期:

澳门威尼斯人app下载,需求整理&原型制作(1天)-> 程序开发&测试(5天)-> 7天审核

开发根据低保真原型图开始搭建框架,与此同时并行 Ui 设计。

时间安排妥当了,接下来用半天时间熟悉码市网站,还好之前带过几个移动端的悬赏项目,对码市的流程有一定了解。下面是码市数据结构图:

澳门威尼斯人app下载 2

码市数据结构图

通过数据结构图你会清晰看到码市网站所有功能,然后将功能列出优先级, V1.0
需要做哪些功能,剩下的功能放在以后版本做迭代。浅蓝色框住的模块做成
Vebview 界面,所谓 Webview 就是嵌入 Web
网页,小组讨论后的结论是:悬赏详情做纯嵌入式、参与悬赏做半嵌入式(报名弹框的部分做成
Native
界面)
;浅灰色框住的个人资料第一个版本不做。登录注册原来计划只做登录,后来在
CTO 的建议下采用手机验证码低门槛的方式。“发布悬赏”
作为重量级功能张老板强调一定要做成 Native
界面,方便需求方随时随地发布悬赏。当然一级界面也要做成 Native
界面,毕竟还是要靠脸吃饭的。通过以上描述优先级显而易见。下面是加班加点赶出来的码市
App 的交互原型图:

澳门威尼斯人app下载 3

交互原型图①

澳门威尼斯人app下载 4

交互原型图②

下载过码市 App
的朋友会发现,实际效果和原型还是有些出入的,没关系,以你看到的效果为主。首页是采用竖列表布局,通过上下滑动查看更多悬赏,非常简单的视觉和交互。由于码市产品比较轻量级,首页底部并没有使用标签导航形式,而是充分利用了首页顶部导航以及第一屏的位置。

下面是一个微小的改动,下拉切换样式对手机来说操作比较麻烦,即便是 Web
网页操作起来也不是很方便,“所有类型”
作为悬赏最主观的筛选条件,需要体现出直观和易操作。

澳门威尼斯人app下载 5

细节改进

嵌入 Webview 页面的做法,一直是我很担心的,用户看到 Webview
页面其实会有反感心理,甚至会觉得这个产品做得很不友好。我们内部也思考过这个问题,结论是:嵌入的页面一定是不需要或者有比较少的交互操作,比如悬赏详情,介绍页,码士说等内容性页面。因此功能性页面需要做成
Native
页面
,比如:发布悬赏,参与悬赏,注册登录,意见反馈。为什么个人资料宁可不做,也不嵌入
Webview
?也正是因为个人资料包含:个人信息,技能展示,身份认证,码市测试几个内容量大且需要用户手动完成的功能页面。做成嵌入式估计用户会疯掉吧。

经历了一周加班加点的赶工,码市 App V 1.0 iOS 版本于 2015.10.12
提交,Android 晚几天提交,也许是上天庇佑抑或人品爆发两个平台都在
20号之前顺利上线,码市 App
这个早产儿就这样横空出世了!此处应该有掌声,我们做到了一周开发一个 App
的奇迹,我想这也是移动端团队迄今为止做的最有成就感的一件事情。

Hybird开发

以原生开发为主。
更新频繁,活动页面,运营页面等采用H5方式接入。定义好原生功能与H5之间的协议,拦截特定的URL
Schema进行原生功能的调用,App调用H5提供的js方法,给H5传值和通知H5

一些成果的检验和对未来展望

码市 App 的界面设计定位是简洁中性风格,下面展示的 icon
是码市新年主题图标,码市就像一个初出茅庐的齐天大圣形象,正在以戏剧的方式改变着众包行业。

澳门威尼斯人app下载 6

效果图展示

目前码市 App 已迭代 4 个版本,更新到 V 1.6 版本,优化了很多细节,比如
Webview
页面进度条控件加载流畅的问题啊,个人资料功能的完善等,身份认证和码市测试还是以悬赏的形式,招募外部开发者加入移动端项目组一起完成的,合作的很愉快,产品的效果也特别好。

最后希望知道 CODING 的朋友和不知道 CODING 的朋友看到这篇文字对码市 App
有新的认识。也希望广大程序猿、产品经理、设计师朋友们在缺钱的时候来码市找找赚钱机会,有创业梦想的抑或是想解决公司产品问题的老板们多来码市看看,说不定码市一不小心就解决了您的问题呢。

Web开发

是Web
App,以Web为主,通过js或者插件方式调用原生功能,如拨打电话,位置服务等。
一套Web代码可以分别在各个平台上运行。受限制与UIWebView,app的性能和体验都无法与纯原生app相提并论。比较有代表性的:采用cordova和ionic进行web
app开发,通过开发原生插件功能供Web端调用

React Native的出现

不同的开发方式都在解决如下的几个问题

  • 使得APP的体验效果和原生应用一样好
  • 跨平台,提高项目代码的重用性
  • 应对广告或者活动更新,能够进行热替换而不用进行APP新发布

因此Facebook在2015年发布了React
Native框架,旨在帮助前端程序员解决如上的棘手问题,在发布当初,相比于其他Hybird框架,React
Native有如下的特点

  • 基于组件开发,提供代码的复用率。
  • 各个平台功能代码可以进行复用,官方数据表明:iOS和android功能代码可以达到90%以上的复用。
  • 不用Webview,彻底摆脱了Webview的限制:交互和性能问题。
  • 相对其它Hybrid 方案,React Native性能更好,用户体验更接近原生。
  • 减少编译时间,提高开发效率。
  • 可以采用热更新方式进行app功能升级和问题修复,提高app的迭代率和开发效率
React Native实例
  • 在JS语言中嵌入了HTML和CSS的元素,这种被扩展了的JavaScript语言称为jsx
  • React Native框架中,JavaScript内存中维护了一个Virtual
    DOM,JSX内容在Virtual DOM中被转化翻译成真实的DOM树,Virtual
    DOM与真实显示的DOM保持一一对应的关系
  • 当界面发生变化时,得益于高效的 DOM Diff 算法,我们能够知道 Virtual
    DOM 的变化,从而高效的改动 DOM,避免了重新绘制 DOM

澳门威尼斯人app下载 7

JSX实例
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

2. 动态配置

在当下移动端App越来越人性化的趋势下,App的更新迭代速度很快,但是限制于App
Store和安卓市场的应用版本更新限制,如果每次界面上有部分需要更新,例如广告更换,页面布局调整等,都需要通过发布一个新的版本来实现,着实对应用商和用户来说都是不合理的,因此如果有一种方式可以动态的配置移动端界面便是极好的。

很多时候,我们都是利用 JSON 文件实现动态配置的效果,它的核心流程如下

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

通过这种方法,我们实现了在后台配置 app
的展示样式。从本质上来说,移动端和服务端约定了一套协议,但是协议内容严重依赖于应用内要展示的内容,不利于拓展。也就是说,如果业务要求频繁的增加或修改页面,这套协议很难应付。

然而这种通过JSON通信,配置一些可选项的方式在很多情况下都不能够满足现在快速迭代开发的App,如果想要改变一些业务逻辑或者进行一些复杂度比较高的修改操作,则客户端只读取JSON配置项是做不到的,无法调用处理业务逻辑的方法等,不具备调试功能。

各种移动平台支持JavaScript

然而,基于现在移动设备都支持JavaScript代码的执行这一条件(例如iOS上内置了JavaScript
Core来执行JavaScript代码),React
Native的推出发挥了这一优点,通过JavaScript代码,不仅仅只是传递简单的配置信息,更可以进行业务逻辑的处理。

Learn once, write everywhere

和其他Hybird框架所宣传的”Write once, run everywhere”不同,React
Native其实不能真正意义上称为”跨平台”框架,因为它的本质是使用了各个移动平台都支持JavaScript语言,React
Native帮我们做好了将JavaScript代码转化成Object-C或者Java语言,并且帮我们处理好了各种回调问题,因此表面上我们只需要编写JavaScript语言,即可在不同的平台上展现应用,这也是React
Native的开发初衷: 分别开发安卓和iOS而不用写一行原生代码

3. 通信机制

iOS — JavaScript / Objective-C

我们虽然使用的是React
Native框架,但还是需要依赖UIKit等框架,从而调用Objective-C代码以在iOS平台上执行,JavaScript其实只是为我们提供了编写业务逻辑和前端界面的辅助工具,React
Native在iOS上能够运行的实质是利用JS代码调用OC代码执行,我们需要关注的重点就是JS与OC之间的通信机制,包括JS是如何去调用OC代码,又如何实现回调功能,这是React
Native的核心功能之一。

我们都知道,JS作为一种脚本语言,是不需要像C语言那样被编译链接然后执行,在执行脚本语言时,会在运行时动态地进行词法和语法的分析,然后生成一课抽象语法树和对应的字节码,由JS解释器等将字节码转化成对应的机器码,而整个流程都是由JS引擎来加以完成。

JavaScript Core

在iOS平台下,React Native利用了iOS提供的JavaScript
Core作为JS解析器,然而RN并没有完全使用JS
Core中提供的JS-OC互调的特性,而是自己实现了一套通用的方案,以便兼容不同的版本

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注