因为支持用javascript开发原生应用，react native一推出就受到不少公司热捧，各家都跃跃欲试。但有一个痛点是，在移动端，我们是否有必要开发多套程序：ios、android和h5？本次将通过对moles框架的分享，介绍携程在react native方面的实战干货，希望给大家一些灵感和启发。
本次分享的内容包括三个方面：
moles框架在react native和我们主app的集成中起到了什么作用？
moles框架是如何打通android、ios、h5、seo，让我们一套代码跑在多个平台上
moles框架的组成以及原理是怎样的?
这些内容将通过以下几个部分的讲解来一一给大家进行解答：
react native的现状
moles 框架的出现
moles 框架的组成
moles 框架的功能
moles 框架的原理简析
moles 框架的使用
moles 框架的案例
开源计划。
react native是2015年3月份facebook开源的一个native上的一个框架。那么为什么它现在会这么火呢。
我们先来看看它有什么优点：
首先，对于做前端的我来说，最吸引的就是可以用javascript来开发native应用了。之前javascript只可以开发浏览器上的一些功能，随着node.js的出现，又让javascript走向了服务端，现在react native的出现又让javascript走向了native端。如果要用现在一个时髦的词来形容javascript的话，我觉得“全栈”真的不为过。
其次，react native是facebook将reactjs的思想移植到native端。所以react native就拥有了rectjs的很多特性，如：组件化思想、virtual dom技术以及jsx与flexbox组合完成的布局等等，同时react native又引入了热更新机制、csslayout机制，让开发人员尤其是native开发人员眼前一亮。
有优点也有缺点，我们再来看看它的不足：
我们知道react native先出了ios版本，然后出了android版本。两个版本之间存在很多的差异性，甚至有好多组件都会带有平台的后缀，这使得开发人员必须要为这两个平台写不同的代码。
此外，对于公司来说，在移动上的投入，不仅有native还会有h5，而在h5上react native并没有考虑。从mvc框架的角度来看，react native只做了view这一层，那么controller、model、router还需要做。从app的完整性来看，只学会react native并不能开发一个健全的app。它的更新策略、hybrid api的提供，配套的ui组件、监控机制等等这些都没有。
伴随着react native项目的开发，逐渐的moles框架就形成了。
mole [məʊl] 小鼹鼠，是种凿洞能力非常强的啮齿类动物。把框架称为之为moles，也是寄希望我们的框架能像mole一样，能够打洞，能够打通android、ios、h5、seo这几个平台。当然一个mole的能力是有限的，所以我们取其复数形式moles。
如果说当前移动端的三大痛点是：性能、动态性、多端适配的话。那么我认为react native解决了性能、动态性，而我们moles则解决了多端适配的问题。
moles的目标是要尽可能的做到在h5端开发的内容可以直接运行在native上，在native端开发的内容也可以直接运行在h5上。
该框架主要由三部分组成：
- moles-web
该部分主要是为h5服务，是将react native在android、ios中没有差异化的components、apis提取出来，单独封装成一个library供h5端来使用。这样做的好处是，这个library只在h5上会是使用到，在native是不需要的，以减少框架在native的体积。
- moles-cui
该部分主要是是将react native在android、ios中有差异化的components、apis提取出来，并且添加一些公司定制化的组件进去，包括：ui组件、监控组件、采集组件、路由组件等等。moles-cui可以说是moles框架的核心部分，它不但native开发需要使用，在h5上的开发也需要使用。
- moles-cli
该部分主要包括moles项目的初始化、编译、打包等功能。
moles框架的功能可以用下图来说明：
主要涵盖的对不同平台的适配、对底层api的调用以及对app中性能和错误的监控等等。
那么moles在携程主app中所处的位置如何呢？
如上图所示它就是bu开发人员和react native、ctrip react native 的一个桥梁。让开发人员更专注于自己的业务逻辑，而不必为react native的更新问题、不同平台的兼容性问题等等而烦恼。
由于moles涉及的内容众多，如：路由的设计、页面生命周期的设计、打包的设计等等。这里我们仅以组件的设计为例，来简析其实现原理。
要做到native和h5代码共享，通常想到的做法有两种：
1） native组件运行在h5上，如：
2）h5组件运行在native上，如：
moles中组件的设计采用了做法1的思路，就是将native上支持的view、text、navigator等组件运行在h5上。要实现native组件运行在h5上，需要解决两个难点：1. 组件化 2. 组件的生命周期。
我们刚开始的时候就讲到，react native上的组件化思想是facebook将reactjs的思想用在native上。这就为我们能在h5上实现native的组件奠定了基础。所以我们完全可以借助reactjs来开发这些组件，但是在实际的开发中，发现reactjs的体量实在是太大了，所以我们最后采用了携程开源的react-lite框架。
为了减少大家的学习成本，moles框架在设计方面尽量采用大家比较熟悉的语法和命令。要使用moles，需要先安装moles-cli。
下面是第一次使用moles-cli的简单流程：
安装moles-cli
初始化moles项目
安装项目依赖
moles-cli初始化后的目录结构和react-native-cli初始化出来的结构几乎一样，唯一不同的是多了一个web目录，该目录主要是为h5服务。
下面来看下简单的代码使用情况
上面的代码若在native端会调用react natie提供的react-native模块，在h5端会调用moles-web模块
上面的代码为moles-cui的使用，不论在native端还是h5端，都需要通过引入’moles-cui’模块来使用。
以运行ios项目为例：
打包、拆包项目
目前moles框架已在携程的主app上投入生产，有兴趣的同学可以安装携程app 6.17，进入”我的携程“频道，其中的站内信页面就是基于moles框架开发的。现在还有攻略、游轮等频道也在陆陆续续的接入中。相信在不久的将来，大家会在携程的各大频道上看到moles的身影。我们也希望moles能成为携程乃至业内基于react native开发项目的首选框架。
下面是基于moles开发的效果图：
我携频道
攻略频道
八、开源计划
之前分享的时候，就有不少同学咨询开源的事情。这里简述下，moles未来将是一个开源的框架。是一个为开发react native项目提供解决方案的开源框架。我们会将moles框架的相关产品逐步的开源给大家。
目前已将moles框架的打包工具moles-packer开源在了github上。
关于moles-packer的一些介绍：
moles-packer 是由携程框架团队研发的，与携程moles框架配套使用的react native 打包和拆包工具，同时支持原生的 react native 项目。
当前版本:0.1.3