Building a Low-Code Platform for Vivo Game Center: A Practical Guide

This article introduces how vivo's Game Center built a low-code platform to address challenges in the era of declining internet traffic and increasingly diverse user needs.

Background and Pain Points:

Starting from 2020, internet traffic peaked and distribution became difficult. The traditional development cycle from requirement review to full release took over a month. Different user segments (MOBA players, casual game players) had varying priorities, and the homepage lacked flexibility to highlight key information. Additionally, the platform couldn't quickly respond to operational needs or developer requests for special sections.

The core issues stemmed from two missing capabilities: (1) flexible, dynamically adjustable component-based functionality, and (2) visual, rapid page construction capabilities.

Platform Architecture:

The platform uses a component-based design approach. The Game Center homepage is divided horizontally into rows, with each row defined as a component. The component granularity balances flexibility (finer granularity = more flexibility) with operational configuration cost.

Component Structure:

Components are composed of two parts: meta-components (basic templates) and data sources. Meta-components define the UI layout and configurable properties through schema editing. Data sources can be either operator-configured or system-automated, coming from internal or external systems via HTTP or Dubbo protocols.

Technical Implementation:

The platform uses Alibaba's QLExpress for dynamic script execution, converting operator-configured data into external API call parameters. Dubbo generic invocation technology retrieves detailed data, providing flexibility without extensive code development. Flutter is used for client-side dynamic updates through full or differential packages.

Hierarchy:

The system follows a top-down structure: Data + Meta-component → Component → Multiple Components → Page → Multiple Pages → Solution (Scheme). Multi-experiment frameworks determine which solution to display, while DMP user profiling enables personalized page delivery.

Results:

Client-side: Full rollout cycle reduced by 15+ days with higher fault tolerance. Server-side: Development efficiency improved by 4x. Testing:无需回归老版本，测试效率提升30%-50%。运营: Visual operations reduced learning cost by 30% and improved configuration efficiency by 10%. Overall project cycle shortened to at least 1/4 of the original timeline.