Introducing Taro‑CRN: A Cross‑Platform Frontend Framework for Ctrip’s APP and Mini‑Program Development

Authors : Li Yu, Hyme, and Chao – senior front‑end engineers and managers at Ctrip, focusing on cross‑platform front‑end frameworks and efficiency.

Project Background : With the rapid growth of mini‑program users, APP and mini‑program development cycles have converged, creating a need for a unified framework that reduces duplicated effort across multiple platforms.

Framework Overview : Taro‑CRN is a Ctrip‑internal framework that extends the mature Taro ecosystem to generate a single codebase that can be compiled to both mini‑programs and native APPs (CRN). It was co‑created by the ticket and train‑ticket teams and builds on Taro’s strong community support.

Design Goals :

Low‑cost entry to develop CRN pages with Taro.

Stay close to official Taro solutions and benefit from its community.

Integrate CRN’s build and packaging processes for Ctrip business development.

Minimize learning curve and improve developer experience.

Architecture : The framework consists of three main parts – a platform plugin, a Metro config plugin, and a component/API library.

3.1 Platform Plugin : Generates a CRN shell project based on Taro’s file structure, injects the necessary Metro config, and maps Taro components/APIs to their CRN equivalents. This enables developers to write standard Taro code while producing a CRN bundle without increasing package size.

3.2 Metro Config Plugin : Extends Metro’s build pipeline to handle the additional Taro‑CRN configuration, supporting custom file suffixes (e.g., .crn.xxx) and internal Ctrip platform differences.

3.3 Component & API Library : Provides a one‑to‑one mapping of Taro components and APIs to CRN implementations, allowing Taro developers to work without learning React Native. Missing RN components are also supplied, and some APIs are flattened to lower the entry barrier.

3.4 Additional Support : The @ctrip/plugin-publish-crn plugin automates publishing of the generated CRN project to a specified Git repository or branch, eliminating manual steps.

Integration Guide – 4.1 Adding Taro‑CRN to a Taro Project :

Install the platform plugin @ctrip/plugin-platform-crn (and optionally the publish plugin).

Configure CRN parameters in the config directory, for example:

crn: {
    projectName: 'YourProjectName', // project name
    partner: 'ct', // internal multi‑platform config
    publish: {
        target: 'git@Host:Group/Project.git',
        branch: 'specBranch',
        localDir: 'specDir'
    },
    dependencies: {
        "react-native-svg": "~12.1.1",
        "babel-plugin-inline-import": "^3.0.0"
    },
    enableSvgTransform: true // enable SVG support
    // more extensions …
}

Build with the usual Taro command: taro build --type crn or use the watch mode for debugging.

4.2 Using Taro‑CRN Components in a CRN Project : For cases where only specific business modules need cross‑platform support, developers can export Taro components as CRN‑compatible packages and import them into a CRN project. Example Metro configuration:

const TaroCRNMetroConfig = require("@ctrip/metro-taro-crn");
const configBu = {
    resolver: TaroCRNMetroConfig.resolver,
    transformer: TaroCRNMetroConfig.transformer,
};
module.exports = configBu;

Framework Summary : Taro‑CRN is ideal for existing CRN‑based apps that want to adopt Taro, for business modules that must run on both APP and mini‑program, and for teams lacking RN expertise. Future work includes expanding the component library and deeper integration across Ctrip’s multi‑platform ecosystem.