Design and Implementation of Ctrip's Legao Frontend Component Platform

Ctrip's marketing department created the Legao platform to provide a mature, reliable, and fast visual page‑building solution for regular and custom marketing activities, allowing operators to configure H5 pages by assembling reusable components without extensive development effort.

Since its launch, Legao has generated over 4,000 pages and expanded its component library to more than 100 modules, including 30+ business‑specific components, dramatically easing the company's operational pressure.

The platform categorises components into four groups: (1) Business components that encapsulate complete UI and backend logic for specific marketing scenarios; (2) General web components such as video, carousel, and multi‑banner widgets; (3) Activity‑level modules that combine multiple components to form whole activity flows (e.g., lottery, group‑buy); and (4) Special components like positioning modules, tab‑switching controllers, external‑link bridges, and custom code snippets.

Legao's technical stack evolved through three stages: initially built on the company’s Lizard framework using Backbone and AMD modules; later incorporating Vue UMD components compiled via vue‑cli 3.0; and finally adding lightweight static HTML/CSS/JS snippets loaded via AJAX for urgent, highly customised features. Each type is rendered either by a Java‑based template engine or, for Vue components, by vue.runtime.js.

To extend component reuse beyond the Legao system, the team released legao.seed.js , a simple SDK that allows developers to embed Legao components in any page, preserving full configuration capabilities while reducing the need for separate backend and front‑end development pipelines.

A key productivity feature is the dynamic form generator, which automatically creates unified configuration forms for component properties, eliminating manual JSON editing and enabling operators to modify component attributes without developer intervention.

Looking forward, Legao is being migrated to the NFES (React) framework to improve first‑screen performance, component modularisation, internationalisation, and SEO, with the long‑term goal of establishing a sustainable component‑centric development cycle across both regular and custom marketing activities.