Open‑Platform Construction and Component Development Practices in Ctrip’s Legao System

The Legao platform, built by Ctrip's market R&D team, serves as an activity‑building system that enables rapid, flexible construction of marketing, advertising, and custom pages, currently supporting over 10,000 effective pages and 300+ component types.

To move beyond simple component expansion, Legao adopts an open‑platform mindset: components are made highly extensible, publishable, and consumable by other teams through a unified container based on React, Next.js, and MobX, with server‑side rendering (SSR) support.

Component packages are emitted as UMD bundles that can run both on the server and client. Custom Webpack plugins rewrite the bundle to expose a function accepting shared dependencies such as react and react‑dom , enabling dynamic, on‑demand loading. The container registers components on a global object ( window.LEGAO_COMPONENTS ) and resolves them at runtime via window.LEGAO_COMPONENTS[component.name](dependency).default on the client or component.realComponnet(dependency).default on the server.

Legao’s CLI ( @ctrip/legao-cli ) provides a development environment that mirrors the production setup, supports proxy mode for online debugging, and manages component configuration, CI/CD integration, and resource publishing to the internal ARES static‑resource platform.

Special static methods such as beforeRender , asyncData , and provideData are defined on components to handle dependency graphs, server‑side data fetching, and cross‑component state sharing via MobX, respectively.

Beyond core components, Legao introduces online‑dependency components, dynamic forms, DIY static‑page modules, product canvas extensions, and a suite of reusable UI atoms (e.g., video, carousel, heat‑map banners). These are delivered either as CDN‑hosted modules or npm packages, allowing other projects to import them without repackaging.

The platform’s SDK ( @ctrip/legao-nfes-sdk ) decouples the rendering engine from a serverless web‑API layer, enabling third‑party pages to fetch and render Legao components dynamically, fostering a lightweight, plug‑and‑play integration model.

Overall, Legao’s open‑platform construction emphasizes component reusability, low‑code configuration, SSR readiness, and extensible tooling to create a sustainable ecosystem for frontend development within Ctrip.