Frontend Development 8 min read

XView Pop‑up Building and Deployment for JD 618 Promotion: Component‑Based Visual Design

The article explains how JD upgraded its XView platform from a simple H5 container to a component‑based visual builder that enables fast, precise, and stable creation and deployment of marketing pop‑ups for the 618 promotion, covering design, client integration, dynamic data binding, and animation optimization.

JD Retail Technology
JD Retail Technology
JD Retail Technology
XView Pop‑up Building and Deployment for JD 618 Promotion: Component‑Based Visual Design

During JD's 618 promotion, pop‑up windows are a crucial marketing tool for creating atmosphere, directing traffic, and encouraging repeat visits. Previously, XView was used merely as an H5 container or with limited configuration capabilities, which required heavy developer involvement and suffered from high learning costs and inflexibility.

To address these issues, XView was upgraded to a component‑based visual builder that allows drag‑and‑drop assembly of pop‑up styles and easy attachment of delivery configurations, solving the problems of high usage cost, lack of flexibility, and the need for coding.

The new system was applied to several key pop‑ups for the 618 event, including pre‑heat openings, interactive T‑level pop‑ups, live‑stream bottom banners, and channel‑wide red‑packet rain effects, demonstrating the diversity and importance of pop‑up marketing scenarios.

From a business perspective, marketing pop‑ups require rapid creation, precise targeting, and high‑efficiency delivery. Core capabilities identified include audience targeting, trigger scenes, page overlay, animation, element coverage, layout forms, click events, and data binding.

The deployment platform is designed with two main goals: fast visual preview of pop‑up content and quick configuration of delivery rules. The final product is compiled into a DSL that leverages the native rendering engine (Tongtian Tower) for optimal performance.

On the client side, the system handles resource pre‑loading, trigger control, and content rendering, monitoring app and page lifecycles to determine the optimal timing for pop‑up display.

Dynamic data binding is supported by defining standard variable models, integrating upstream APIs, and linking API outputs to component properties, enabling real‑time data such as reward amounts or coupon values to be displayed.

Animation is used to improve efficiency; replacing large GIFs with Lottie animations reduces file size by about 90%, speeding up loading and increasing exposure rates.

Overall, the upgraded XView platform proved stable and fast during the 618 promotion, serving multiple business lines and demonstrating the advantages of a component‑based, visual deployment system over traditional H5 implementations.

frontendcomponentMarketingvisual builderpop-upXView
JD Retail Technology
Written by

JD Retail Technology

Official platform of JD Retail Technology, delivering insightful R&D news and a deep look into the lives and work of technologists.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.