Design and Implementation of the PGClowcode Low‑Code Platform at Ctrip

Overview PGClowcode is a low‑code platform built by Ctrip’s PGC team for backend page development. The first version launched in March 2023; by October it had over 100 users, more than 130 applications and 180 pages.

Research Background

Why a low‑code platform is needed Backend requirements often have low priority and are delayed, leading teams to use ad‑hoc configuration tools that are unfriendly to operators and risky. Development effort is imbalanced: many backend tasks but insufficient front‑end resources, and different business units repeatedly build similar components, wasting time.

Attempts such as full‑stack developers or extracting common components proved ineffective, prompting the decision to build a low‑code or zero‑code platform.

What the platform should provide

Friendly visual UI that allows developers and product staff to drag‑and‑drop to build pages quickly.

Minimal or no code required for page logic.

A component library that satisfies daily needs.

Complete CI/CD capabilities with one‑click or automated deployment.

Security features including permission management and release approval.

Compatibility with existing backend pages with minimal changes.

Extensibility for user‑created components that can be shared on the platform.

Current Situation

There are hundreds of low‑code products, both commercial and open‑source, used for internal admin panels, data dashboards, and office systems. Most are domain‑specific and not universally applicable, so Ctrip chose an open‑source project (Appsmith) as a base and customized it.

Platform Features

The platform consists of two main parts: page building and component development.

User and Permission Management The platform integrates with Ctrip’s OIDC account system. Permissions are scoped to workspaces, with roles such as admin, developer, viewer, tester, and reviewer, each controlling access to resources like data sources, applications, and pages.

Visual Application Development Users drag components from a library of over 40 items onto a canvas, arrange layout, and configure properties via UI or custom JavaScript. The system supports import/export, multi‑user collaboration, and real‑time data binding.

Process Management Applications flow through development → testing → release states, with role‑based approvals that automate transitions.

Backup and Restore Automatic versioned backups allow users to revert to any previous stable version, reducing conflict during concurrent development.

Architecture and Technology

The platform follows a front‑back separation architecture. The front end uses React with Ctrip’s common frameworks; the back end is built on Spring WebFlux, integrating Cat, Clog, MongoDB, Cre‑dis, QConfig, QMQ, and other Ctrip infrastructure. CI/CD is handled by Ctrip’s internal pipelines, and deployment occurs on the Captain platform.

Key Technical Details

Visual Drag‑and‑Drop Implementation Dragging is rendered on a top‑layer canvas with placeholder color blocks to minimize DOM re‑paints and improve performance. An “grid point” system ensures components snap to predefined positions, guaranteeing layout regularity.

Application Development‑Deployment Application data (metadata, pages, components, actions, etc.) is stored as JSON in MongoDB. The platform defines collections such as plugin, workspace, datasource, application, page, action, and actionCollection.

Data Flow Three environments (FAT, UAT, PRO) are synchronized via QConfig. Data moves from draft to release states across environments, with automated notifications for reviewers.

Multi‑Role Collaboration Defined permission groups enable automatic notifications and workflow hand‑offs among developers, testers, and reviewers.

Backup & Restore Backups are exported to QConfig; restores import the selected version, creating a new version entry for traceability.

Planning and Outlook

Future work includes building an independent component extension platform with fine‑grained permission control, establishing a template library for one‑click page generation, and continuously enhancing features based on user feedback and industry research.