Moles Framework: Enabling Cross‑Platform Development with React Native at Ctrip

This transcript of a Ctrip technical micro‑share by senior manager Wei Xiaojun introduces the Moles framework, created to solve the challenge of maintaining separate native iOS, Android, and H5 applications when using React Native.

It first reviews React Native’s rise since its 2015 open‑source release, highlighting its JavaScript‑based full‑stack appeal, component‑based architecture, virtual DOM, JSX, Flexbox, hot‑reload, and CSS‑layout features, while also noting drawbacks such as platform‑specific component differences, limited MVC support, and missing native APIs.

The Moles framework emerged to bridge these gaps, aiming to let H5‑developed content run on native platforms and vice‑versa, thereby addressing the multi‑platform adaptation pain point.

Framework composition : - moles-web : a library that extracts platform‑agnostic components and APIs for H5 use, reducing native bundle size. - moles-cui : the core module that extracts platform‑specific components, adds custom UI, monitoring, analytics, and routing components, required on both native and H5 sides. - moles-cli : tooling for project initialization, compilation, and packaging.

The framework’s functions include cross‑platform component adaptation, low‑level API invocation, and performance/error monitoring, illustrated with architecture diagrams in the original slides.

Within Ctrip’s main app, Moles acts as a bridge between business unit developers and React Native, allowing teams to focus on business logic without worrying about React Native updates or platform incompatibilities.

Design principle : Moles follows the approach of running native components on H5. Example code snippets demonstrate both strategies:

Native‑on‑H5: class HelloWorld extends Component{\n render(){\n <View>\n <Text>HelloWorld</Text>\n </View>\n }\n}

H5‑on‑Native: class HelloWorld extends Component{\n render(){\n <Div>\n <Span>HelloWorld</Span>\n </Div>\n }\n}

Usage : Install the CLI with $ sudo cnpm install @ctrip/moles-cli -g , initialize a project via $ moles init ProjectName , install dependencies, and use imports such as import { View } from 'react-native' for native code or import { Application, Page } from 'moles-cui' for shared components. Build and run with commands like $ moles run-ios and package with $ moles packer --input /path/to/project --entry index.ios.js --output /path/to/build --bundle bu.bundle --common true .

Real‑world cases show Moles deployed in Ctrip’s production app (e.g., the “My Ctrip” channel and upcoming “攻略” and “游轮” channels), with screenshots of the resulting UI.

Open‑source plan : The Moles packaging tool moles-packer (v0.1.3) is already open‑sourced on GitHub ( https://github.com/ctripcorp/moles-packer ) and published to npm ( https://www.npmjs.com/package/moles-packer ), with future plans to open the entire framework.

The article concludes with an invitation for community contributions and a call for technical article submissions.