React_Native与ExMobi技术路线探索.docxVIP

随着Facebook陆续开源React Native的iOS和Android版本，这种以JavaScript来开发原生APP的方式在移动应用开发圈里得到广泛关注，虽然React Native并不是第一个采用JavaScript编写原生APP的产品，但是其独特的设计思想和实现方式是非常值得借鉴的。而作为国内老字号的移动应用开发平台，同样支持开发原生APP 以及轻应用的ExMobi经过7年不断演进之后，在技术架构上又有怎样的突破呢？这里，笔者就通过亲身体验来剖析React Native与ExMobi在技术架构、开发者受众、成熟度等多维度的异同，从中探索更多移动应用开发技术上的可能与创新，以飨读者。产品背景对产品背景的了解，有助于我们对产品的原理、发展等多方面有基础的认识。React Native官网上的博客不仅很有技术含量，而且还很有情怀，所以我们就从这里入手。下面就是其中一段摘抄：可以看出由于WEB在移动端差强人意的表现，使得Facebook要寻求两其其美的办法：所以React Native诞生了：而ExMobi则不同，ExMobi完全是为移动设备诞生，从早期的非智能机时代、早期智能机时代的Java、Symbian、Windows Mobile、Brew、Black Berry平台到现在的后智能机时代Android、iOS系统盛行，ExMobi的架构也发生了翻天覆地的变化。这里特指的是ExMobi第五代产品。经过前四代产品的技术积累，并与现在Android和iOS两大主流系统的特性结合，ExMobi产品也是做了很大调整，但始终不变的是坚持Native原生APP为主线，通过技术难关的攻克不断提高开发者的开发效率，又不影响APP的性能和体验，同时也支持HTML5的webapp模式开发，提倡Native Component+Web Plus的主流开发模式，让开发者可以充分利用原生组件和HTML5混合布局，完全标签化写法，并通过JS将本地能力无缝对接，开发方式灵活。ExMobi也致力于提供优良的开发工具MBuilder，帮助开发者能够快速开发ExMobi应用。从React Native和ExMobi的产品背景中，我们可以看到两者的共同点都是为了提高移动应用开发效率，降低开发成本，并都尽可能的结合Native和HTML5的优点，提出了各自的创新开发模式。原生组件通信原理React Native通过JavaScript编写APP的方式，乍看以为是以webview提供的现成的JS与原生语言之间的互调，但是如果当我们调试一个React Native程序的时候，在debug视图中是不会看到任何webview被调用的痕迹。所以，实际上React Native并没有使用现成的与webview的通信方法，而是使用了更直接的JS运行环境，比如在iOS中为系统自带的JavaScriptCore。这与Phonegap这类以webview为主的界面展现与本地能力调用的模式有本质上的区别，也是确保React Native高性能和高效率的基础。有了这个核心基础，我们再来看看React Native是如何通过JS来挂钩到原生UI和本地能力的。从上图很容易可以看到，开发者通过JS去调用一个React Native提供的方法，实际需要先经过两个桥接封装类，一个JS的桥接，另一个是原生的桥接。两个桥接类之间就是通过前面提到的JS运行环境来通信。JS桥接类的作用是将开发者的调用行为加入到React Native的模块调用队列，同时生成一个回调的ID。Native桥接类的作用是将队列里的调用行为取出来根据模块找到对应的原生UI或者本地能力的函数来执行，并将执行的结果通过回调的ID逐步传递到开发者的JS回调函数中。也就是经过这两个桥接类的相互作用，建立起了JS函数与原生能力的调用序列。其中不得不提的是React Native进行了虚拟DOM的封装，所有的视图的更新都是虚拟DOM做了一个校验（diff）后最小更新，用内存计算换取UI渲染效率。而开发者可以（不是必须）使用一种叫JSX的语法即可达到像web开发一样使用标签和CSS样式表来开发React Native应用，React Native会将JSX转化为JS语法通过上述通信流程完成原生UI的渲染和本地能力的调用。var React = require(react-native);var styles = React.StyleSheet.create({? ? text: {? ?? ???color: red,? ?? ???backgroundColor: white,? ?? ???fontSize: 30,? ?? ???margin: 80,? ?? ???textAlign: center? ? },? ? con