Design and Architecture of JD's "Tongtian Tower" Visual Activity Page Builder Platform
This article explains the background, requirements, architectural design, technology selection, component structure, template definition, data handling, quality assurance measures, and future roadmap of JD's internal visual activity page builder platform, Tongtian Tower, highlighting its React‑based frontend implementation and open‑extension strategy.
Since its first release in 2015, JD's internal platform "Tongtian Tower" has been used by operations to quickly build activity pages for the JD Mall, handling thousands of daily activities during major sales events. The rapid growth of activity volume made traditional development processes unsustainable, prompting the need for a visual, low‑code solution.
The platform targets operation teams across business units, offering a "no‑code" page construction experience while still allowing extensions through custom templates. Users interact via drag‑and‑drop and form filling, while the system encapsulates template assembly, rendering, data distribution, and business logic behind a black‑box UI.
To balance openness and stability, the platform exposes custom template entry points, allowing developers to write modules in any stack. However, this flexibility introduces risk, as most page errors stem from custom code.
Quality and reliability are ensured through pre‑publish validation (checking links, coupon IDs, etc.), real‑time preview, data‑driven floor filtering, static fallback H5 pages, and monitoring via performance and anomaly platforms.
Technically, the platform adopts a standard React ecosystem (the "React family") to enable deep integration with JD React. The system is layered into Store, UI, Data Processing, Control, and Service layers, with UI kept lightweight and most business logic residing in the Service layer.
Component structure includes a common configuration panel and a custom panel. Configuration data is externalized into configurable tables, decoupling the UI from backend services.
Templates are the core unit of the visual platform, defined by three files describing layout, style, and data. These files are compiled into a JSON template object delivered via API. Layouts are written in JSX with change detection to minimize unnecessary renders; styles are applied directly (code omitted for brevity); data handling includes configuration‑panel to template binding, update mechanisms, and validation logic, all driven by a generated configuration description file.
The platform has undergone a major technical refactor, solving many earlier issues, but future work remains, including component reuse with preview/real states, decoupling templates from the visual system, building a template marketplace, and achieving cross‑platform code reuse through JD React.
JD Tech
Official JD technology sharing platform. All the cutting‑edge JD tech, innovative insights, and open‑source solutions you’re looking for, all in one place.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.