实例分析关于携程Moles框架

声明：本文CSDN作者原创投稿文章，未经许可禁止任何形式的转载。
　　编者：本文来自携程框架研发部高级经理魏晓军在第二期【携程技术微分享】上的分享，以下为整理后的文字实录。关注携程技术中心微信公号ctriptech，可获知更多微分享课程信息。
　　责编：钱曙光，关注架构和算法领域，寻求报道或者投稿请发邮件qianshg@csdn.net，另有「CSDN 高级架构师群」，内有诸多知名互联网公司的大牛架构师，欢迎架构师加微信qshuguang2008申请入群，备注姓名+公司+职位。
　　因为支持用java开发原生应用，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的现状
　　React Native是2015年3月份Facebook开源的一个Native上的一个框架。那么为什么它现在会这么火呢。
　　我们先来看看它有什么优点：
　　首先，对于做前端的我来说，最吸引的就是可以用java来开发Native应用了。之前java只可以开发浏览器上的一些功能，随着Node.js的出现，又让java走向了服务端，现在React Native的出现又让java走向了Native端。如果要用现在一个时髦的词来形容java的话，我觉得“全栈”真的不为过。
　　其次，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组件、监控机制等等这些都没有。
　　二、Moles 框架的出现
　　伴随着React Native项目的开发，逐渐的Moles框架就形成了。
　　mole ［məʊl］ 小鼹鼠，是种凿洞能力非常强的啮齿类动物。把框架称为之为Moles，也是寄希望我们的框架能像mole一样，能够打洞，能够打通Android、iOS、H5、SEO这几个平台。当然一个mole的能力是有限的，所以我们取其复数形式Moles。
　　如果说 当前移动端的三大痛点是：性能、动态性、多端适配的话。那么我认为React Native解决了性能、动态性，而我们Moles则解决了多端适配的问题。
　　Moles的目标是要尽可能的做到在H5端开发的内容可以直接运行在Native上，在Native端开发的内容也可以直接运行在H5上。
　　三、Moles 框架的组成
　　该框架主要由三部分组成：
　　- 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项目的初始化、编译、打包等功能。