Backend Development 13 min read

Design and Architecture of Vivo's Wukong Activity Platform

Vivo's Wukong Activity Platform combines a SaaS‑PaaS architecture, drag‑and‑drop visual editor, plug‑in component kit, optimized iframe rendering, distributed static page compilation, and AI‑driven page generation to enable million‑scale, low‑code activity creation, flexible BCA rule modeling, and complex orchestration for rapid marketing deployment.

vivo Internet Technology
vivo Internet Technology
vivo Internet Technology
Design and Architecture of Vivo's Wukong Activity Platform

The article summarizes a presentation by the Vivo Internet Wukong System R&D team at the 2023 Vivo Developer Conference, describing the design and implementation of an AI‑enhanced, drag‑and‑drop activity platform.

Background : In 2018 Vivo’s internet business entered a stable growth phase but lacked efficient operation tools. A visual, WYSIWYG activity editor was built to allow rapid activity deployment through simple drag‑and‑drop actions.

Platform Goals : Ensure million‑scale activity platform efficiency and stability by adopting a SaaS + PaaS architecture, creating a plug‑in component platform, and leveraging rendering engines, rule engines, generic calls, model abstraction, and page staticization.

Frontend Design (Section 2): The platform consists of four parts – plug‑in component development, activity designer rendering, static page generation, and AI‑driven site building.

2.1 Activity Page Generation Flow : A three‑step visual generation process creates activity pages without developer involvement.

2.2 Plug‑in Development Kit : Developers use a standardized component kit to build business components. The kit includes a VSCode plugin for project scaffolding, NPM package hosting with CDN sync, and an open‑platform + authentication center for secure collaboration.

2.3 Activity Designer Rendering : After component publishing, operators drag components onto a canvas. The rendering engine uses an iframe for cross‑origin isolation, flexible nesting, and asynchronous loading. To improve iframe communication performance, a custom unirender loading scheme was designed, achieving zero‑copy data transfer, 70% reduction in communication code, and 50% lower memory usage while preserving Vue reactivity.

2.4 Static Page Publishing : The platform dynamically bundles components into final activity pages. Two performance bottlenecks were identified: time‑consuming Webpack builds and a single‑node compilation service. The solution splits the service into consumer and provider nodes, registers them with Zookeeper for load‑balanced scheduling, and enables automatic failover.

2.5 Intelligent Automation : AI techniques are applied to (a) convert third‑party H5 pages into Wukong activity pages via OCR, feature extraction, and component replacement, and (b) generate activity pages from natural‑language descriptions using a large language model, template matching, and AI‑assisted asset creation.

Mid‑Platform Design (Section 3): The middle platform provides three layers – overall architecture, flexible high‑efficiency design, and support for complex activities.

3.1 Overall Architecture : The system offers content, marketing, and interaction components (e.g., quizzes, sign‑ins, lotteries) with unified user reach (push, gray release) and a configuration layer for consistent experience.

3.2 Flexible Design – BCA Model : The Behavior‑Condition‑Action model abstracts user actions, conditions, and resulting actions. A rule engine (Aviator) evaluates conditions and triggers actions, enabling rapid integration of custom tasks and rewards via generic Dubbo calls.

3.3 Complex Activity Support : Solutions include composite activities for data sharing across events, low‑code Playmaker editor for visual dependency wiring, and centralized configuration generation that mirrors Spring bean initialization.

Conclusion : The Wukong system delivers a visual, componentized, one‑stop operation platform. It advances AI‑driven site building, adopts the BCA model for flexibility, and uses Playmaker to simplify complex activity orchestration. Future work will explore more AI scenarios, enhance e‑commerce capabilities, and open the platform to external developers.

frontend developmentAILow-codemicroservicesactivity platform
vivo Internet Technology
Written by

vivo Internet Technology

Sharing practical vivo Internet technology insights and salon events, plus the latest industry news and hot conferences.

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.