How Ant Group Redefined Frontend Development with Lightweight R&D

What is Frontend Lightweight R&D

Frontend lightweight R&D is defined by comparing it with traditional development; the article later expands on practical implementations within Ant Group's frontend team.

Conventional R&D Mode (React + Node)

Traditional development mixes coding, integration, building, and DevOps on a timeline, causing heavy manual hand‑offs and efficiency bottlenecks.

Pure JavaScript is machine‑oriented; business semantics rely heavily on comments and human interpretation, making large‑scale projects costly to understand.

Lightweight R&D Introduction

By addressing the “heavy” aspects of conventional development—integration, maintenance, code comprehension, and operations—the Ant Group frontend team created a lightweight solution to improve developer happiness.

Engineering tooling that makes integration work lighter.

Language‑level optimizations that transform code into a linear, visual format easier for humans to understand.

FaaS‑based operations that reduce focus on full builds, deployments, and infrastructure resources.

Lightweight R&D Mode

A unified business programming environment mixes front‑end and back‑end code; domain models and views are auto‑identified as “nodes,” enabling visual data‑flow representation.

Built‑in simulator integration, H5+BFF FaaS one‑click builds, incremental deployment, and isolation of developers from build/deploy steps.

Developers focus solely on data and logic while the platform handles the remaining capabilities.

Key Design: Code as Documentation

The core philosophy is “Documentation is code, code is documentation.” By treating code like readable articles, the solution preserves business knowledge and enables seamless knowledge transfer and reuse.

JS Language Enhancements

Automatic orchestration eliminates manual concurrency handling; the system auto‑recognizes UI (H5) and data (BFF) nodes.

Visual support creates bidirectional relationships between nodes and DAG graphs.

Language design prevents NPE issues and supports high‑precision calculations.

Visual Programming

Beyond simple node development, the environment automatically generates data flow: DAG graphs represent relationships between data and UI nodes, enabling code‑first development, visual debugging, and low‑code style orchestration.

Node inspection and live debugging (code auto‑visualization).

Reverse node editing (low‑code intervention).

Configurable standard capabilities: mock, exception handling, timeout handling, logging, reducing code noise.

Plugin System

A plugin mechanism designed for both workflow and capability integration connects various platforms, keeping lightweight R&D vibrant. Developers can write custom plugins to satisfy personal and user needs.

Conclusion

Lightweight R&D targets the heavy pain points of conventional development, offering higher efficiency for complex, iterative H5+Node projects. Its three core capabilities ensure strong support for suitable scenarios, achieving productivity gains where 1 + 1 > 2.