Design and Architecture of JD.com’s Tongtian Tower Visual Activity Page Builder

Author Introduction Tian Sheng, a front‑end engineer at JD.com, works on the visual configuration layer of the Tongtian Tower platform, focusing on architecture design, optimization, and new technology adoption.

Background Tongtian Tower is an internal platform for quickly building activity pages. Since its first release in 2015 it has supported thousands of daily activities during major sales events, and traditional development processes could not keep up with the growing demand.

Purpose and Direction The platform targets operators from various business units, offering a “no‑code” page‑building experience while still allowing extensions through custom templates. A visual editor with drag‑and‑drop and form‑filling is provided, keeping the underlying system a black box for users.

Technical Details – Technology Stack The front‑end stack is built on the React ecosystem, chosen for its community support and deep integration with JD React. The system is divided into Store, UI, Data Processing, Control, and Service layers, with most business logic residing in the Service layer.

Component Structure The UI consists of a generic configuration panel and a custom panel. Configuration data is expressed as a table that can be delivered via API, decoupling the UI from the back‑end. The generic panel parses this table, while the custom panel handles complex business logic.

Template Definition A visual template is defined by three files describing layout, style, and data. These files are compiled into a JSON template object that the front‑end consumes. Layout is written in JSX, style is provided as CSS code, and data drives the rendering and validation logic.

Data Layer Data handling includes mapping configuration panels to template data, implementing data updates, and performing validation. A parser generates form items from the configuration description, automating data updates and validation.

Quality Assurance Before publishing, the platform validates configuration completeness, provides real previews, filters incomplete layers, offers static fallback H5 pages, and integrates with performance and monitoring services to ensure page reliability.

Conclusion and Outlook After a major technical revamp, the platform now supports template component reuse, decoupled visual systems, a template marketplace, and cross‑platform code reuse via JD React. Future work includes further component abstraction, market creation, and deeper multi‑device integration.