Design and Implementation of a Component Management System for Large‑Scale Marketing Pages at Qunar

Business background : Qunar’s tourism platform needed to reach users frequently through three marketing scenarios – daily promotions after ticket/hotel purchase, new‑user onboarding, and holiday campaigns – requiring a massive number of high‑frequency pages.

Solution overview : To meet the scale and speed requirements, the team adopted a reuse‑first approach and configuration‑driven development, avoiding per‑page coding and enabling rapid updates without redeployment.

System design – Page Management System (CMS) : A custom Component Management System was created where developers publish reusable UI components, and operators assemble pages by dragging and dropping these components. The CMS differs from traditional content CMS by focusing on component lifecycle (development → test → deploy → integration → operation).

Distributed component development : Each component lives in its own Git repository, allowing independent iteration and preventing a monolithic codebase. Completed components are published and integrated into the main system via a visual interface.

Page rendering architecture : Three rendering modes are supported – app‑side hybrid rendering with offline packages, H5 browser rendering with optional server‑side rendering, and native mini‑program rendering with offline‑package mode. Each mode handles configuration updates, network fallback, and performance optimizations.

Evolution to multi‑end rendering : Initially the CMS only rendered H5 pages; later a self‑developed solution wrapped components as WeChat mini‑program components, providing native performance through partial refresh (setData) and automatic lifecycle adaptation.

Risk control mechanisms : Versioned components, attribute validation, draft‑box workflow, mandatory review before publishing, and real‑time monitoring of rendering errors and resource loading ensure stability.

Process governance : A four‑party workflow (operations, design, product, technology) defines responsibilities for requirement intake, component reuse decisions, and conflict resolution, guaranteeing consistent quality.

Effect summary : The CMS reduced development, design, and operation costs, unified UI experience, improved page availability under weak networks, and enabled zero‑code deployments for major campaigns (e.g., double‑store, flash‑sale, 11‑day promotion).

Future plans : Continue lowering development, UI, and operation costs, enhance component usability (simplified attributes, Chinese documentation), and improve operator workflow to further increase marketing agility.