React Native 实践之携程 Moles 框架

编者：本文来自携程框架研发部高级经理魏晓军在第二期【携程技术微分享】上的分享，如下为整理后的文字实录。视频回放可点击这里。关注携程技术中心微信公号ctriptech，可获知更多微分享课程信息。

由于支持用javascript开发原生应用，React Native一推出就受到很多公司热捧，各家都跃跃欲试。但有一个痛点是，在移动端，咱们是否有必要开发多套程序：iOS、Android和H5？本次将经过对Moles框架的分享，介绍携程在React Native方面的实战干货，但愿给你们一些灵感和启发。

本次分享的内容包括三个方面：

1. Moles框架在React Native和咱们主App的集成中起到了什么做用？

2. Moles框架是如何打通Android、iOS、H五、SEO，让咱们一套代码跑在多个平台上？

3. Moles框架的组成以及原理是怎样的?

这些内容将经过如下几个部分的讲解来一一给你们进行解答：

• React Native的现状

• Moles 框架的出现

• Moles 框架的组成

• Moles 框架的功能

• Moles 框架的原理简析

• Moles 框架的使用

• Moles 框架的案例

• 开源计划

1、React Native的现状

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组件、监控机制等等这些都没有。

2、Moles 框架的出现

伴随着React Native项目的开发，逐渐的Moles框架就造成了。

mole [məʊl] 小鼹鼠，是种凿洞能力很是强的啮齿类动物。把框架称为之为Moles，也是寄但愿咱们的框架能像mole同样，可以打洞，可以打通Android、iOS、H五、SEO这几个平台。固然一个mole的能力是有限的，因此咱们取其复数形式Moles。

若是说当前移动端的三大痛点是：性能、动态性、多端适配的话。那么我认为React Native解决了性能、动态性，而咱们Moles则解决了多端适配的问题。

Moles的目标是要尽量的作到在H5端开发的内容能够直接运行在Native上，在Native端开发的内容也能够直接运行在H5上。

3、Moles 框架的组成

该框架主要由三部分组成

1. moles-web

该部分主要是为H5服务，是将React Native在Android、iOS中没有差别化的Components、APIs提取出来，单独封装成一个Library供H5端来使用。这样作的好处是，这个Library只在H5上会是使用到，在Native是不须要的，以减小框架在Native的体积。

2. moles-cui

该部分主要是是将React Native在Android、iOS中有差别化的Components、APIs提取出来，而且添加一些公司定制化的组件进去，包括：UI组件、监控组件、采集组件、路由组件等等。moles-cui能够说是Moles框架的核心部分，它不但Native开发须要使用，在H5上的开发也须要使用。

3. moles-cli

该部分主要包括Moles项目的初始化、编译、打包等功能。

下面是moles-web与moles-cui的一个关系图

4、Moles 框架的功能

Moles框架的功能能够用下图来讲明

主要涵盖的对不一样平台的适配、对底层API的调用以及对APP中性能和错误的监控等等。

那么Moles在携程主App中所处的位置如何呢？

如上图所示它就是BU开发人员和React Native、Ctrip React Native 的一个桥梁。让开发人员更专一于本身的业务逻辑，而没必要为React Native的更新问题、不一样平台的兼容性问题等等而烦恼。

5、Moles 框架的原理简析

因为Moles涉及的内容众多，如：路由的设计、页面生命周期的设计、打包的设计等等。这里咱们仅以组件的设计为例，来简析其实现原理。

要作到Native和H5代码共享，一般想到的作法有两种：

一、Native组件运行在H5上，如：

class HelloWorld extends Component{
  render(){
   return(
    <View>
      <Text>HelloWorld</Text>
    </View>
    )
  }
}

二、H5组件运行在Native上，如：

class HelloWorld extends Component{
  render(){
     return(
    <Div>
      <Span>HelloWorld</Span>
    </Div>
     )
  }
}

Moles中组件的设计采用了作法1的思路，就是将Native上支持的View、Text、Navigator等组件运行在H5上。要实现Native组件运行在H5上，须要解决两个难点：一、组件化 二、组件的生命周期。

咱们刚开始的时候就讲到，React Native上的组件化思想是Facebook将ReactJS的思想用在Native上。这就为咱们能在H5上实现Native的组件奠基了基础。因此咱们彻底能够借助ReactJS来开发这些组件，可是在实际的开发中，发现ReactJS的体量实在是太大了，因此咱们最后采用了携程开源的react-lite框架。

6、Moles 框架的使用

为了减小你们的学习成本，Moles框架在设计方面尽可能采用你们比较熟悉的语法和命令。要使用Moles，须要先安装moles-cli。

下面是第一次使用moles-cli的简单流程：

安装moles-cli

$ sudo cnpm install @ctrip/moles-cli -g

初始化Moles项目

$ moles init ProjectName

安装项目依赖

$ cd ProjectName
$ cnpm install

moles-cli初始化后的目录结构和react-native-cli初始化出来的结构几乎同样，惟一不一样的是多了一个web目录，该目录主要是为H5服务。

下面来看下简单的代码使用状况

import React,{
  View
} from 'react-native'

上面的代码若在Native端会调用React Natie提供的react-native模块，在H5端会调用moles-web模块

import{
  Application,
  Page
}from 'moles-cui'

上面的代码为moles-cui的使用，不论在Native端仍是H5端，都须要经过引入'moles-cui'模块来使用。

以运行iOS项目为例

$ moles run-ios

打包、拆包项目

$ moles packer 
    --input /path/to/project 
    --entry index.ios.js 
    --output /path/to/build 
    --bundle bu.bundle 
    --common true

参数说明：

• input：项目目录（默认为当前目录）

• entry：入口文件名称（默认为 index.js）

• output：输出目录（默认为 ./build 目录）

• bundle：默认输出文件名称与入口文件同名，也可指定文件名

• common：是否打common包（默认为false）

7、Moles 框架的案例

目前Moles框架已在携程的主App上投入生产，有兴趣的同窗能够安装携程App 6.17，进入”个人携程“频道，其中的站内信页面就是基于Moles框架开发的。如今还有攻略、游轮等频道也在陆陆续续的接入中。相信在不久的未来，你们会在携程的各大频道上看到Moles的身影。咱们也但愿Moles能成为携程乃至业内基于React Native开发项目的首选框架。

下面是基于Moles开发的效果图：

我携频道

攻略频道

8、开源计划

以前分享的时候，就有很多同窗咨询开源的事情。这里简述下，Moles将来将是一个开源的框架。是一个为开发React Native项目提供解决方案的开源框架。咱们会将Moles框架的相关产品逐步的开源给你们。

目前已将Moles框架的打包工具moles-packer开源在了github上。

关于moles-packer的一些介绍：

moles-packer 是由携程框架团队研发的，与携程Moles框架配套使用的React Native 打包和拆包工具，同时支持原生的 React Native 项目。

当前版本：0.1.3
GitHub 地址：https://github.com/ctripcorp/moles-packer
npm 地址：https://www.npmjs.com/package/moles-packer