Supporting Core Homepage Scenarios with Visual Building and Low-Code: NetEase Cloud Music Case Study

Visual building and low-code solutions that rely on drag‑and‑drop are common for activity pages and back‑office CRUD, but they are rarely used for core C‑end scenarios that demand high performance and flexibility.

NetEase Cloud Music built a visual construction capability called “Lingqu” that fully covered the two most trafficked homepage flows—Discovery and Music—in a recent redesign, covering all 26 modules.

Business Background

The new homepage’s Discovery and Music flows are core information‑flow pages. Adding new modules traditionally required releases, leading to long iteration cycles and duplicated effort across vertical businesses.

Integrated Build‑Deploy Process

Typical delivery involves multiple roles, integration, testing and release, incurring high communication and time costs. By combining building, deployment and a client‑side DSL engine on the Lingqu platform, a single front‑end developer can independently complete the whole process.

Dynamic Capability & Performance

Dynamic capabilities are essential for rapid iteration, but they often degrade performance. For high‑traffic homepage scenarios, the client‑side DSL provides the best balance of performance (near‑native) and flexibility.

Visual Building System

To reduce the learning curve of the GaiaX‑based DSL, a visual builder was created that allows developers to drag‑and‑drop DSL cards, preview, debug, and publish them without writing raw DSL code.

Data Decoupling

Non‑intrusive data orchestration is achieved by leveraging the existing BFF (GraphQL) layer, enabling UI developers to select data sources, mock data, and let backend services supply the underlying services.

Card Deployment

Cards are delivered through the Lingqu platform, which offers various targeting strategies (client version, audience segmentation, frequency control, A/B testing) and supports custom strategies via BFF.

Full‑Page Mixed Layout Container

A mixed‑layout container combines DSL‑generated cards with native or React‑Native components to handle page‑level features such as pull‑to‑refresh, caching, and cell reuse.

Quality Assurance

The platform provides preview with mock data, change‑diff during publishing, strict release gates with device scanning, runtime monitoring, rollback, and fallback configurations for missing data.

Conclusion & Outlook

The case demonstrates that visual building and low‑code solutions can support core, high‑traffic scenarios while meeting performance, dynamism and fine‑grained operation requirements. Future work will expand these techniques to more business areas.