How NetEase Cloud Music Built a Source‑Code‑Driven Low‑Code Frontend Platform

The article analyzes NetEase Cloud Music's front‑end team's challenges with repetitive, mode‑driven development and explains how they designed a source‑code‑based low‑code system—Tango—that unifies LowCode and ProCode, integrates with existing GitLab and deployment tools, and dramatically speeds up business‑focused delivery.

NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
How NetEase Cloud Music Built a Source‑Code‑Driven Low‑Code Frontend Platform

Current Business Development Situation

Rapid growth has produced over 40 platform products (public tech, quality assurance, data intelligence) plus many CMS and web applications, leading to a flood of repetitive development tasks. Front‑end teams face long lead times for simple changes, while back‑end and product teams struggle with resource bottlenecks.

Four Root Causes of Development Bottlenecks

People : High turnover and scarcity of full‑stack engineers.

Change : Constantly evolving requirements with ever‑shorter iteration cycles.

Complexity : Growing technical stack and increasingly tangled dependencies.

Misalignment : Gaps between demand, delivery processes, and long‑running pipelines.

Shifting Focus from Application Development to Business Delivery

The team proposes moving developers from merely building applications to delivering business outcomes, emphasizing a non‑linear, rapid response process where multiple roles can contribute via low‑code techniques.

Cloud Music "Tango" Low‑Code Initiative

To address the challenges, NetEase Cloud Music launched the "Tango" low‑code project, aiming for a visual, source‑code‑centric development experience that supports both LowCode and ProCode modes.

Source‑code visual construction : Generates UI from actual source code without a proprietary DSL, keeping the solution framework‑agnostic.

Seamless integration : One‑click app creation, GitLab syncing, and reuse of existing material libraries.

Contract‑driven and model‑driven capabilities : Aligns with internal contract‑testing workflows and auto‑generates pages from backend metadata.

Problems with Traditional Low‑Code Solutions

Conventional platforms rely on private page‑description protocols (often JSON‑based) that are hard to maintain, not Turing‑complete, and tightly coupled to specific DSLs, resulting in high design costs and one‑way code generation.

Private protocols increase maintenance overhead.

Dependency on specific DSLs limits material reuse.

Generated code cannot be reversed back to the original model.

Source‑Code‑Based Low‑Code Approach Using AST

The team adopted an Abstract Syntax Tree (AST) strategy, leveraging Babel's JavaScript AST parsing and generation. By converting visual drag‑and‑drop actions into AST manipulations, the system can modify the AST and then render the updated source code.

Dual LowCode & ProCode Real‑Time Switching

Because the platform operates directly on source code, changes in the visual editor instantly reflect in the code and vice‑versa, enabling seamless switching between LowCode (visual) and ProCode (hand‑written) modes, even for local projects continued online.

Deep Integration with Existing Development Infrastructure

Tango integrates with GitLab for automatic commits, provides one‑click application creation and deployment, consumes internal component packages, connects to the data gateway for contract‑driven page generation, and supports design‑to‑code via D2C.

Contract Testing and Model‑Driven Features

The platform incorporates contract testing, automated mock services, and metadata‑driven page generation, strengthening the overall development workflow.

Low‑Code Engine and Rapid Project Bootstrapping

A dedicated low‑code engine abstracts core capabilities, allowing a new project to be scaffolded with roughly 30 lines of code, focusing developer effort on service integration and feature implementation, thereby reducing trial‑and‑error costs.

Conclusion

By building a source‑code‑centric low‑code system, NetEase Cloud Music addresses repetitive development pain points, streamlines front‑end workflows, and enhances collaboration across roles, all while maintaining compatibility with existing tools and accelerating business‑focused delivery.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

frontendASTlow-codeWeb Developmentsource codeGitLab integrationTango platform
NetEase Cloud Music Tech Team
Written by

NetEase Cloud Music Tech Team

Official account of NetEase Cloud Music Tech Team

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.