Boosting Large‑Scale E‑Commerce Events with Taro: A Dual‑Platform Development Playbook

Definition of T‑Level Interactions

T‑level interactions ("Top‑level interactions") are large‑scale e‑commerce events such as Chinese New Year, 618, and Double‑Eleven. They generate massive traffic, high transaction volumes, and strict timeliness requirements, requiring simultaneous development for H5 web pages and WeChat mini‑programs with a consistent user experience.

Key Technical Considerations

Development must achieve high efficiency, a smooth developer experience, and consistent dual‑platform UX. Testing should maintain high quality with rapid issue resolution, and production must be stable with quick error correction and fallback mechanisms.

Taro – Dual‑Platform Development Framework

Why Taro Is Needed

Single‑app development cannot satisfy the need to integrate with WeChat flows. Multiple teams using different stacks lead to code duplication, inconsistent UI, and lower productivity. Consolidating on a single framework enables cross‑team collaboration, reduces redundancy, and improves efficiency.

Plugin for JD.com Mini‑Program

A custom plugin allows Taro 3 projects to run as independent sub‑packages in JD.com mini‑programs. The plugin was first used in the 2021 618 event, where compiled assets were copied into the JD mini‑program environment for testing and development. It was later abstracted into a reusable Taro 3 plugin for any project.

Compatibility Solution

During the Double‑Eleven "Love Travel" project, Windows developers encountered compatibility issues with the plugin. To remove the hard dependency on the JD mini‑program, a virtual folder mirroring the mini‑program structure was created. Stub functions were placed in this folder to satisfy import paths, allowing the same build to run on both Windows and macOS and speeding up debugging. The trade‑off is the inability to debug JD‑specific features locally.

Future work plans to use Webpack 5 Module Federation to reference JD mini‑program modules remotely, eliminating the need for local copies.

Business Component Library – Improving Labor Efficiency

Even with an efficient dual‑platform tool, T‑level projects often require 90–100 person‑days, leading to overtime or low‑quality deliveries. Component‑based development was adopted to boost personal productivity and newcomer friendliness.

Component Library Development Steps

Select Components – Categorize into UI‑inclusive and UI‑exclusive groups; the latter is further split into business logic, non‑business logic, and pure utility functions based on frequency analysis of past modules.

Choose Tech Stack – Use Taro as the base framework, Tiga for automated dual‑platform testing, Rollup for lightweight bundling, and Lerna for monorepo management and version control.

Documentation – Provide comprehensive, searchable documentation to ensure components are discoverable and reusable.

Proof of Concept

After two months of development, ten components were created; seven were used in the Year‑End Festival interaction, saving over ten person‑days and freeing resources for a Spring Festival collaboration.

Error Handling and Fallback Strategies

Large‑scale interactions increase the likelihood of defects slipping through testing. In the JD Sports Games event, a 45‑minute white‑screen outage occurred due to upstream data errors at midnight and missing front‑end fallback handling.

Mitigations introduced:

Midnight data‑validation checklist to catch erroneous upstream data before it reaches the front end.

Generic error‑boundary component that catches and hides failing UI sections, preventing a single error from crashing the entire page.

Emphasis on thorough self‑testing and robust code practices.

These measures reduced critical incidents in subsequent Double‑Eleven, Year‑End Festival, and Spring Festival projects.

Related Link

Tiga: https://tiga.jd.com/