9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

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

  • 2016-07-25
  • 本文字数:3287 字

    阅读完需:约 11 分钟

本文为携程技术中心的投稿。携程关于 React Native 的大招来了!之前我们分享个过携程曾发布过一个让 React Native 兼容 H5 的框架 ReactMix ,而这个 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 框架的案例
  • 开源计划。

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

二、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 项目的初始化、编译、打包等功能。

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

四、Moles 框架的功能

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

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

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

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

五、Moles 框架的原理简析

由于 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,需要先安装 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 服务。

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

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

上面的代码为 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)

七、Moles 框架的案例

目前 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

github 地址: https://github.com/ctripcorp/moles-packer

npm 地址: https://www.npmjs.com/package/moles-packer


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2016-07-25 17:088250

评论

发布
暂无评论
发现更多内容

粤、蒙、沪同步试点全电发票,数字化转型思路你拿捏了吗?

金小K

数字化进程中,如何保证数据安全?

CECBC

年度盘点丨2021数字化转型优秀案例TOP10

ToB行业头条

涨薪密码 | 音视频开发-程序员界的技术皇冠

Yt

音视频 WebRTC ffmpeg 流媒体 SRS流媒体服务器

软件定义存储的头部厂商也来了,XSKY 星辰天合加入龙蜥社区

OpenAnolis小助手

龙蜥社区

从“看得清”到“看得懂”:视域提升带来的管理“魔法”

脑极体

数据并行:提升训练吞吐的高效方法 |深度学习分布式训练专题

百度大脑

项目经理如何有效管理项目进度?项目管理3大常见问题及解决方案

优秀

项目管理 项目管理工具

为什么企业组织更愿意选择内部私有的IM,而不使用钉钉、微信等软件?

WorkPlus

如何用建木CI部署k8s资源

Jianmu

Kubernetes DevOps CI/CD 开源项目

Hoo虎符研究院 | 币海寻珠——2021年4季度区块链投融事件TOP20

区块链前沿News

Hoo虎符 虎符交易所 虎符研究院 区块链投融 灰度基金

开源的安全可信治理与区块链

CECBC

阿里云「低代码音视频工厂」正式上线,为企业用户打造音视频应用开发最短路径

阿里云视频云

音视频 低代码 开发

洞态漏洞检出测试第二期:NoSQL & LDAP注入漏洞

火线安全

DevSecOps WEB安全 安全漏洞

点外卖也可用数字人民币,国内零售支付产业体系全面升级

CECBC

当云服务变成云云云云服务,谁能带领企业穿越云层?

脑极体

安全架构要参:构建企业适用的安全架构

I

安全架构 企业安全

政法委重点人员联防联控系统开发,重点人群管理服务平台建设

a13823115807

你了解集合?那你倒是给我说说啊!【3】

XiaoLin_Java

集合 java基础 1月月更

Hoo虎符研究院 | 币海寻珠——即将初始发行Token区块链项目

区块链前沿News

Hoo 虎符交易所 初始发行

四位一体水溶交融,Docker一拖三Tornado6.2 + Nginx + Supervisord非阻塞负载均衡容器式部署实践

刘悦的技术博客

nginx tornado Supervisor ,docker docker image

QCon-OPPO大规模CV预训模型技术及实践

安第斯智能云

算法 计算机视觉 预训练模型

低代码平台对程序员有哪些好处?

J2PaaS低代码平台

跨越2021丨在逐梦中星夜兼程,在前行中不忘初心

YonBuilder低代码开发平台

低代码

CVE-2021-32682 elFinder RCE 简单分析

H

网络安全 安全漏洞

Flutter 压缩图像的最佳方式

坚果

flutter 1月月更

从事【音视频】的开发者,看过来,如果记不住FFmepg命令,可以收藏,不记得的时候,掏出来翻翻

奔着腾讯去

c 音视频 ffmpeg

VuePress 博客优化之 last updated 最后更新时间如何设置

冴羽

JavaScript Vue 前端 博客 vuepress

谁说操作系统没有创新,这里就有一个,还是分布式的

LAXCUS分布式操作系统

如何修改Kestrel上传文件的大小

喵叔

1月月更

微信小程序与webview关于iphone X的兼容设置

CRMEB

  • 扫码添加小助手
    领取最新资料包
Moles:携程基于React Native的跨平台开发框架_移动_魏晓军_InfoQ精选文章