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

Facing rapid business growth and diversified user demands, the Vivo Game Center team needed a way to accelerate product iteration while supporting developers' professional growth. The solution is a modular architecture that abstracts visual styles and data into reusable components.

What is modularization? It is a design philosophy that breaks down a product into functional modules. In the Game Center, modules correspond to different visual styles and business scenarios, allowing quick assembly of pages to meet varied user needs.

The modular system provides three core capabilities:

Componentization : Page layouts are split into independent, reusable UI components that combine style and data.

Configuration : Components can be assembled in different orders and configurations to build diverse pages without code changes.

Experimentation : An AB‑test framework and DMP (Data Management Platform) deliver different page variants to user segments, enabling multi‑version operation.

Before modularization, the homepage consisted of fixed banners, navigation, game lists, and ad components, requiring full app releases for any layout change. After modularization, components can be reordered, styled, and targeted dynamically, dramatically reducing release cycles.

Model abstraction and unification separate visual templates from data. Templates define UI structure (e.g., size, layout), while data includes recommendation or manually scheduled content. Manual schedules are four‑dimensional (time, space, action, business). By storing material, promotion assets, and schedule information in unified tables, the system reduces table proliferation and simplifies DMP‑based targeting.

Backend process unification standardizes the configuration workflow. Two tables—schedule data and material details—support all resource slots. A visual configuration UI lets operators select templates, bind DMP tags, and preview pages, streamlining the creation of banners, promotions, and other assets.

Frontend process abstraction classifies modular pages into pure modular, interleaved modular, and H5 modular types. Pure modular pages are fully component‑driven; interleaved pages insert components into existing game lists; H5 modular pages use web‑based components provided by an internal site‑builder.

The overall page‑generation flow is distilled into four stages: initialization, component list retrieval, construction, and merging. Handlers process each step—fetching AB‑test data, applying black/white‑list filters, de‑duplicating games, and assembling final component payloads—ensuring maintainable and extensible code.

In conclusion, the modular transformation of the Game Center improves component reuse, configuration flexibility, and experimental capability, while promoting a disciplined development methodology that reduces duplication and enhances scalability.