Design and Implementation of Mars: A Lightweight Frontend Mock Platform at Ctrip

The article introduces Mars, a lightweight frontend mock platform created by Ctrip's IBU ticket development team in 2020 to address business pain points related to parallel front‑end and back‑end development, testing, and issue diagnosis.

Background: Frontend developers need a stable, flexible, and easy‑to‑use mock solution to cover business scenarios, support device‑specific mocks, multiple environments, and simulate latency.

Research: Existing internal tools were service‑oriented and not suitable for frontend device‑level needs. Market tools were categorized into local data management, mock platforms (e.g., Rap, YApi), and proxy tools (e.g., Charles, Fiddler), each with limitations.

Design Decision: Two implementation options were considered: registering mock addresses in the service governance center (Option A) and using a proxy‑request approach (Option B). The team chose Option B for finer request control and easier client configuration.

Architecture: Mars consists of a GUI layer (real‑time packet display, mock data management, environment configuration) and a data‑processing layer (device parameter parsing, mock data selection, request forwarding). Figure 1: Mars framework diagram

Core Features:

Data real‑time echo: WebSocket‑based real‑time display of requests on the Mars UI.

Mock data control: Supports fixed mock data per interface and dynamic selection via JsonPath scripts, enabling one‑to‑many mock mappings.

Network environment switching: Allows per‑device environment configuration and sub‑environment binding to route specific interfaces to different test environments.

Delay simulation: Configurable response latency to emulate network slowdown or timeout scenarios.

Figure 2: Real‑time data echo

Extensions: Introduced mock data sets to bundle multiple interface mocks for complex scenarios, and applied the proxy mock approach to backend service calls, improving automated test coverage above 90%.

Issues Encountered: Higher memory consumption due to storing all proxied request data and increased response latency from the additional proxy layer, requiring careful resource planning.

Conclusion: Mars has been adopted by multiple teams, generating nearly 20,000 mock entries, over 600 data sets, and handling about 130 devices daily, satisfying roughly 95% of mock requirements and continuously evolving through integration with other development efficiency tools.