How We Boosted Frontend Efficiency by 1.4× Using Taro for Multi‑Platform Mini‑Programs

Preface

In 2020 the Haro Mobility "Inclusive Vehicle" front‑end team decided to go all‑in on Taro to improve both efficiency and stability across their mini‑program portfolio.

Current Situation and Problems

At the beginning of 2020 the team maintained three mini‑programs: Haro Ride (WeChat), Haro Carpool (WeChat), and Haro Ride (Alipay). Developing the Alipay version required native syntax and took four person‑days, while the WeChat versions shared code and took another four person‑days for testing, totaling eight person‑days for a single iteration. Scaling this to the new Haro Taxi project would have required 85 person‑days for the Alipay side and an additional 42.5 person‑days for the WeChat side (half of Alipay), i.e., 127.5 person‑days, far beyond the available resources.

Breakthrough and Innovation: All‑in Taro

The team chose Taro, a cross‑platform framework they had already used for two WeChat mini‑programs in 2019, and upgraded to Taro 3.0 after evaluating performance and feature completeness. They also applied a monorepo strategy, which had previously increased productivity by 30%.

Automation Need

Manual copy‑paste conversion from Alipay XML/JS to Taro JSX proved error‑prone (missing tags, forgotten imports, lifecycle mismatches). To avoid repetitive work, the team decided to automate the conversion process.

Custom alipay2taro Converter

The solution is a custom converter built with the Babel toolchain:

Parse source code into an AST using @babel/parser.

Manipulate the AST with @babel/traverse and @babel/types to remove, rename, or add nodes (e.g., import React, replace Compent, convert data to state, map onload to componentDidMount, transform XML to JSX).

Generate the transformed code with @babel/generator.

Format the output with prettier for readability.

Key conversion steps include:

Import a React declaration.

Remove obsolete Compent references.

Convert data objects to component state.

Replace defaultProps with props.

Map onload lifecycle hooks to componentDidMount.

Transform XML view files into JSX using the himalaya-wxml library, which parses XML into an AST‑like structure.

Rename files and component names consistently.

Distinguish between page and component conversions.

All of these steps are orchestrated in a CLI‑exposed npm package, allowing developers to run the conversion with a single command.

Technical Details

Using @babel/types, the team creates import nodes like import React from "react";. With @babel/traverse, they walk the AST, identify CallExpression nodes that correspond to page or component definitions, and replace them with the appropriate Taro constructs. The parsePage function embodies the core logic, iterating over each property of the Alipay JS object, deciding whether it needs conversion, constructing the new node via the appropriate Babel type, and inserting it into the class body.

Results and Outlook

Within one month, four engineers delivered the Haro Taxi project, reusing nine pages from the existing Carpool mini‑program and achieving a 1.4× increase in development efficiency. No bugs were reported during the testing phase, and future iterations now require only a single developer per feature.

The team plans to continue publishing tools that improve productivity, code quality, and developer happiness.