Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients

Background: Tongtian Tower is a marketing activity page building system that provides rich capabilities for operations and merchants. With the expansion to large promotions and multi‑channel activities, various businesses demand personalized styles that often require custom development, leading to high R&D costs and slow delivery.

To address these challenges, the Flexible Template solution was created to improve production efficiency, reduce costs, and deliver a simple, multi‑device, consistent building experience.

What the Flexible Template can do: By defining element protocols and specifications, the system ensures performance and stability while supporting a wide variety of flexible, data‑driven elements. Users can drag and adjust elements on a B‑side flexible canvas, automatically generating pages that adapt to both H5 and native clients with consistent rendering and interaction.

The article proceeds to describe the architecture and practice of the flexible template on CMS, H5, and native client sides.

Figure 1: Flexible Template Overview

CMS Flexible Template Architecture: The design separates elements from templates, using a configuration‑plus‑protocol approach to dynamically construct pages. The overall architecture includes a material pool, an element pool, and the flexible template builder.

Figure 2: CMS Architecture Diagram

Main ideas:

Material Pool: Classifies common material types (product pool, text‑image pool, content pool) for reuse across elements.

Element Pool: Abstracts page floor elements into generic types (text, image, price, custom logic) and links them to material fields to generate styled elements.

Flexible Template Builder: Provides a lightweight canvas for users to layout elements and define custom rules such as event jumps and fallback filters.

Flexible Canvas Implementation: The canvas offers both preset style configuration and user‑defined floor styling. It consists of three major modules:

Source Data Module: Handles element data ingestion and user‑added elements.

Canvas Operation Module: Core interaction layer, including data mapping, attribute configuration (size, color, margin, radius, fallback filters, event jumps), preview rendering using a shared component library, drag‑and‑drop capabilities, and validation.

Data Export Module: Exports user actions as a protocol‑compliant element collection for reuse.

Figure 3: Flexible Canvas Implementation

H5 Flexible Template Architecture and Implementation: H5 supports three scenarios – Touch Web (mobile browsers, mini‑programs), CMS preview (what‑you‑see‑is‑what‑you‑get), and native fallback via WebView. The rendering logic is packaged as an independent npm module using TypeScript and React, with styled‑components for dynamic styling.

Figure 4: H5 Architecture Diagram

Key technical choices:

TypeScript + React for type safety and UI consistency.

styled‑components for CSS‑in‑JS, externalized during bundling to reduce package size.

Data Layer: Field constraints in the server‑provided floor data guide material lookup (dataPath) and style extraction (style) via a defined parsing protocol.

Parsing Layer: Transforms floor data into a component tree by mapping template types to canvas types and generating element objects based on dataPath and style.

Figure 5: H5 Parsing Flowchart

Configuration Layer: Extracts environment‑specific configurations (App, H5, mini‑program) to achieve “one configuration, multiple usages”.

Rendering Layer: Uses React components to render the parsed component tree.

Testing and CI: Jest + React Testing Library achieve ~85% unit test coverage; Storybook provides UI component previews; both are integrated into CI for automated testing and preview updates.

Client Flexible Template Architecture and Reuse Logic: The template is packaged as an SDK that renders native controls based on parsed floor data, handling data & UI rendering and providing application services (network, image loading, analytics, navigation) via open interfaces.

Figure 6: Client SDK Architecture

Reuse mechanisms rely on the host app’s list control (e.g., RecyclerView) for container reuse and an element reuse pool that compares MD5 hashes of canvas data to manage cached elements.

Figure 7: Client Reuse Flowchart

Results: Flexible Template 1.0 is live, reducing production costs and improving business application. Efficiency gains are illustrated in the following statistics.

Figure 8: Development & Build Efficiency Improvement

The solution has already supported major promotions such as the National Sports Day and JD’s Qixi Festival, with plans to support upcoming events like 618 and 11.11.

Figure 9: Flexible Template Applications

The combination of element pools and flexible canvas empowers users with a free and convenient template building experience, gradually reducing the need for manual template creation and enabling future enhancements to support more business scenarios while slimming down client packages.

We thank the product, backend, and testing teams for their strong support, which has been essential to the stable and robust development of the flexible template project.