Subtoken‑TranX: Front‑end JavaScript Code Generation for Industrial Use

Alibaba's DaTaobao technical team and Prof. Li Ge's group at Peking University jointly built the first code‑generation system adopted in an industrial front‑end development environment. The system, deployed on the BizCook platform, generates JavaScript code from natural‑language requirements.

Automatic code generation aims to translate natural logic into formal code. Existing deep‑learning models, even large Transformers, perform poorly on this task, especially with limited paired data. The authors constructed a high‑quality dataset of 2,489 JavaScript expression pairs, categorized into String‑Template Expressions (STE), OR‑Logic Expressions (OLE), Conditional Expressions (CE), and Data‑Processing Expressions (DPE).

Data preprocessing includes code normalization via Esprima/Escodegen, placeholder substitution for string literals, and simplification of member accesses. To mitigate data scarcity, a task‑augmentation strategy incorporates a variable‑semantic table, providing auxiliary supervision for variable naming.

The core model, Subtoken‑TranX, extends the TranX AST‑based generator to operate at the subtoken level, using a special <EOT> token to mark the end of subtoken sequences. This reduces vocabulary size and over‑fitting on small datasets.

Experiments on the BizCook test set show that Subtoken‑TranX outperforms the original TranX and standard Transformer models, both with and without task augmentation. Task‑augmented models achieve higher accuracy, edit similarity, and F1 scores, especially in variable usage. The approach meets the performance requirements for real‑world deployment and has been adopted in Alibaba’s large‑scale promotion platform.

Overall, the study demonstrates that combining task augmentation with a subtoken‑level AST generator effectively addresses data‑limited code‑generation scenarios in front‑end development.