Moles:携程基于React Native的跨平台开发框架

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看195 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 195|回复: 1
收起左侧

Moles:携程基于React Native的跨平台开发框架

[复制链接]
h5lover 发表于 2016-7-31 01:44:24 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
本文为携程技术中心的投稿。携程关于React Native的大招来了!之前我们分享个过携程曾发布过一个让React Native兼容H5的框架ReactMix(详见敏捷大拇指上的《ReactMix:基于HTML+JS+CSS写ReactNative HTML5 Web APP的最佳实践》),而这个Moles更加彻底,贯彻一套代码到处运行,来看看它是如何实现的。



因为支持用javascript开发原生应用,ReactNative一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS、Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发。

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

1、Moles框架在ReactNative和我们主App的集成中起到了什么作用?

2、Moles框架是如何打通Android、iOS、H5、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、H5、SEO这几个平台。当然一个mole的能力是有限的,所以我们取其复数形式Moles。

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

Moles的目标是要尽可能的做到在H5端开发的内容可以直接运行在Native上,在Native端开发的内容也可以直接运行在H5上。




3、Moles 框架的组成

该框架主要由三部分组成



3.1、moles-web

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



3.2、moles-cui

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



3.3、moles-cli

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

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

Moles:携程基于React Native的跨平台开发框架 2

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 2





4、Moles 框架的功能

Moles框架的功能可以用下图来说明:

Moles:携程基于React Native的跨平台开发框架 3

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 3


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

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

Moles:携程基于React Native的跨平台开发框架 4

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 4


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




5、Moles 框架的原理简析

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

要做到Native和H5代码共享,通常想到的做法有两种:

1、Native组件运行在H5上,如:

Moles:携程基于React Native的跨平台开发框架 5

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 5


2、H5组件运行在Native上,如:

Moles:携程基于React Native的跨平台开发框架 6

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 6


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

我们刚开始的时候就讲到,React Native上的组件化思想是Facebook将ReactJS的思想用在Native上。这就为我们能在H5上实现Native的组件奠定了基础。所以我们完全可以借助ReactJS来开发这些组件,但是在实际的开发中,发现ReactJS的体量实在是太大了,所以我们最后采用了携程开源的react-lite框架。




6、Moles 框架的使用

为了减少大家的学习成本,Moles框架在设计方面尽量采用大家比较熟悉的语法和命令。要使用Moles,需要先安装moles-cli。

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

安装moles-cli

[Bash shell] 纯文本查看 复制代码
$ sudo cnpm install @ctrip/moles-cli -g


初始化Moles项目

[Bash shell] 纯文本查看 复制代码
$ moles init ProjectName


安装项目依赖

[Bash shell] 纯文本查看 复制代码
$ cd ProjectName
$ cnpm install


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

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

Moles:携程基于React Native的跨平台开发框架 7

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 7


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

Moles:携程基于React Native的跨平台开发框架 8

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 8


上面的代码为moles-cui的使用,不论在Native端还是H5端,都需要通过引入'moles-cui'模块来使用。

以运行iOS项目为例

[Bash shell] 纯文本查看 复制代码
$ moles run-ios


打包、拆包项目

[Bash shell] 纯文本查看 复制代码
$ 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开发的效果图:

Moles:携程基于React Native的跨平台开发框架 9

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 9

我携频道

Moles:携程基于React Native的跨平台开发框架 10

Moles:携程基于React Native的跨平台开发框架 - 敏捷大拇指 - Moles:携程基于React Native的跨平台开发框架 10

攻略频道




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




相关内容:

ReactMix:基于HTML+JS+CSS写ReactNative HTML5 Web APP的最佳实践

Moles:携程基于React Native的跨平台开发框架

携程App的网络性能优化:架构、问题、实践、新技术方向

携程App的架构优化之旅

2016年携程App网络服务通道治理和性能优化实践

更多图片 小图 大图
组图打开中,请稍候......

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

本帖被以下淘专辑推荐:

1起来 发表于 2016-8-7 22:12:06 | 显示全部楼层
Moles框架
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表