How Tango’s AST‑Driven Low‑Code Engine Boosts Frontend Productivity

Developers often criticize low‑code platforms for limiting flexibility, yet low‑code remains a major investment. In NetEase Cloud Music, Tango is designed to combine low‑code speed with source‑code freedom.

Providing Low‑Code Capabilities on Top of Source Code

Tango adds visual development to an existing codebase and mainstream open‑source frameworks, keeping the source code as a core asset while offering an “escape hatch” for developers.

AST‑Driven Engine

The engine manipulates the Abstract Syntax Tree (AST) of the source code. User actions are translated into reads and writes on AST nodes, enabling visual low‑code editing. This approach is similar to tools like UglifyJS or ESLint plugins, but applying it to arbitrary code generation requires handling unpredictable developer behavior.

Standardizing Front‑End Development with TangoBoot

TangoBoot is a standardized front‑end framework built on popular open‑source stacks. It defines a uniform development paradigm covering build, startup, view rendering, state management, async data fetching, and micro‑frontend integration.

TangoBoot works in both low‑code and source‑code environments, allowing developers to adopt it directly or use the visual designer that generates code following the same conventions.

Reducing View and Logic Code by About 50%

Using TangoBoot, developers can write roughly half the view and logic code. The framework relies on Reactive States and Reactive Views, automatically updating the UI when bound data changes. A Todo app example shows the concise syntax compared with a traditional Dva implementation.

Implementation of Front‑End Reactive State Management

TangoBoot’s state management is based on the principle that a view automatically re‑renders when the data it binds to changes. The following minimal example demonstrates consuming a variable in a view. counter.count Incrementing the variable triggers a re‑render without manual UI updates.

const counter = store({ count: 1 });
const Page = view(() => {
  return (
    <div>
      <span>{counter.count}</span>
      <button onClick={() => { counter.count++; }}>add</button>
    </div>
  );
});

The reactive system uses an ES6 Proxy to intercept property accesses and mutations, building a relation table that maps objects, properties, and components. When a property is set, the framework looks up dependent components and re‑renders them.

import { saveRelation, renderCompsThatUse } from './reactiveWiring';

export function store(obj) {
  return new Proxy(obj, traps);
}

const traps = {
  get(obj, key) {
    saveRelation(obj, key, currentlyRenderingComp);
    return Reflect.get(obj, key);
  },
  set(obj, key, value) {
    renderCompsThatUse(obj, key);
    return Reflect.set(obj, key, value);
  },
};

The view wrapper marks the currently rendering component, allowing the get trap to record which component depends on which property.

Unified Service Function Calls for Backend APIs

TangoBoot provides a unified pattern for data requests. Developers configure service functions, and Tango generates the corresponding call logic, delegating the actual HTTP request to axios or fetch. The request is proxied through TangoGateway, which handles authentication, CORS, and mock concerns automatically.

Challenges and Philosophy

Unlike many low‑code platforms that invent new languages, Tango builds on existing community standards and provides a visual designer on top of them. This keeps the development experience consistent across low‑code and source‑code workflows, while avoiding the maintenance burden of fully private solutions. Tango is positioned as an assistant tool that lowers the barrier for cross‑skill‑stack developers without replacing the core development process.

Open‑Source Progress

Repository: https://github.com/NetEase/tango

Documentation: https://netease.github.io/tango-site/