Modularization Practices in Vivo Game Center: Componentization, Configuration, and Experimentation

Background – As the Vivo Game Center grew, diverse user needs and rapid product iteration demanded a more flexible development approach. The team sought ways to help product and operations iterate quickly while providing developers with growth opportunities.

What is Modularization? – Modularization is a design philosophy that breaks down functionality into reusable modules. In the Game Center, it means abstracting visual styles and data into components that can be assembled to meet varied business scenarios.

Three Core Capabilities – Componentization : splitting page layouts into reusable UI components; Configuration : assembling components via configurable templates to build pages quickly; Experimentation : using an AB‑test framework and DMP system to deliver different page versions to targeted user groups.

Implementation Details – Components consist of a visual template and associated data (either recommendation‑driven or manually scheduled). Scheduling data is three‑tiered: material (images, videos), promotion material, and schedule. Unified tables store all schedule data, reducing schema complexity and enabling DMP‑based targeting.

Backend Process Unification – The workflow for configuring schedules was standardized: materials → promotion material → schedule, with a visual configuration UI that allows operators to bind DMP tags and preview pages before release.

Frontend Process Unification – The home page now supports three modular page types: pure modular pages, interleaved modular pages, and H5 modular pages. Interleaved pages insert components into game lists based on defined rules, while pure modular pages are fully composed of components.

Unified Flow – The page‑rendering pipeline was distilled into four stages: initialization, component list retrieval, construction, and merging. This simplifies the service logic and improves maintainability.

Design Patterns – Strategies and factories are used to fetch schedule data, allowing new strategies to be added without altering existing code. Handlers process filtering (blacklist, installed, exposure) and assemble component data.

Conclusion – By abstracting and reusing components, the Game Center achieved faster feature rollout, reduced development overhead, and a more maintainable codebase. The modular approach also encourages developers to think beyond simple CRUD tasks, fostering deeper technical engagement.