Wukong Activity Middle Platform: Micro-Frontend Architecture and Implementation for Marketing Activities

This article introduces vivo's "Wukong" Activity Middle Platform, a comprehensive solution designed to address the challenges of marketing activity development in the era of mass user operations. As vivo's internet products entered the era of operational management for stock users, traditional activity development models could no longer meet the explosive and diverse demands.

The platform solves eight major pain points including component reuse across different teams, long H5 project release cycles, inefficient resource allocation, data silos, lack of standardized solutions, and data security risks for non-business H5 requirements. Currently, Wukong has connected 30+ business units, launched 7000+ H5 pages, and provides 20+ marketing components, 50+ templates, and 60+ marketing tasks.

The platform offers four core capabilities: (1) Component/Template Market - enabling teams to submit custom activity components with real-time rendering and version switching; (2) Task Center - supporting offline submission of management backend pages without version release; (3) Real-time Configuration - achieving separation of code and data through cloud-based configuration storage; (4) Activity Support - including asset library, automated tracking, WeChat sharing, and data analysis.

For developers, Wukong provides a PaaS platform with development environment tools including @vivo/wukong-api utility library (10+ business capabilities, 15+ basic capabilities), built-in components (media picker, layer picker, activity picker, rich text, modal dialogs), VSCode plugin for one-stop development, and developer documentation.

The core technical implementation uses a micro-frontend architecture called RSC (Remote Service Component). Each activity component consists of UI component (code.vue), configuration component (prop.vue), and settings (setting.json). The platform compiles Vue SFC to UMD.js using webpack or @vue/cli, then dynamically loads and renders components through a custom loading mechanism that intercepts the globalObject to export Vue components.

The platform also plans to support visual data source creation and dynamic CRUD interface generation, reducing backend and testing resource requirements for lightweight H5 business scenarios.