How Ant Group’s Bakery Platform Revolutionizes Front‑End Product Demo and Collaboration

Why Build a Product Demo Platform

Traditional Alipay H5 development faces debugging difficulty, high visual acceptance cost, complex compatibility testing, and unintuitive data analysis, leading to delivery delays and reduced user experience.

Our Solution: Bakery One‑Stop Demo Platform

Ant Group created the Bakery platform, consisting of Bakery UI (a local development toolkit) and Bakery Web (a centralized demo platform), to provide low‑cost, real‑time product preview for all roles in the development flow.

Designing and Implementing the Platform

The platform’s core modules address three key components of a product demo: interface data, container capability, and static resources.

Product Demo Components

Interface data: unified management of API and JSAPI data to enable cheap creation of demo instances.

Container capability: browser‑based simulation of hybrid and mini‑program containers for low‑cost preview.

Static resources: pages, CSS, JS, etc., required for the demo.

Managing Mock Data with Bakery UI

Visual data entry and scenario switching.

Semantic grouping of interfaces for easy case switching and debugging.

Lightweight, decentralized implementation; mock assets are version‑controlled with Git, supporting multi‑person collaboration and reuse across projects.

Technical Implementation

Mock assets are stored as a file‑tree; a Node‑fs SDK exposes CRUD operations. Using Egg and Umi, a lightweight mock server is built, and a mock‑script provides container simulation, enabling mock asset management and RPC debugging for various front‑end frameworks.

Container Simulation

For hybrid container simulation, Bakery’s proxy script intercepts JSBridge calls, rewrites business logic, redirects data calls to mock sources, and substitutes UI interactions with libraries like antd‑mobile, achieving full container capability interception.

What Can Be Done with Product Demos

Visual Acceptance Efficiency

Instead of back‑and‑forth between developers and designers, the demo platform lets users upload design sketches, automatically parse them, compute visual match scores, and generate reports with style improvement suggestions, streamlining visual QA.

Embedding Asset Service

The platform links UI elements to data points during the embedding creation phase, intercepts click and exposure events via JSBridge, and maps them to data services, eliminating ambiguous textual descriptions and making analytics more intuitive.

Product Big‑Picture Capability

By aggregating interactive demo instances, the platform can showcase full product flows, version history, and evolution, providing valuable references for newcomers and senior engineers alike.

Overall Review and Future Plans

Since 2019, Bakery has solved developer pain points, extended demo capabilities to non‑technical collaborators, and opened APIs for internal middle‑platforms. Future work includes supporting more app types (e.g., third‑party mini‑programs), exploring new scenarios such as pre‑launch product manuals and public‑opinion replay, and open‑sourcing the mock‑data and demo solutions to the community.