How JD’s Frontend Team Delivered 16 High‑Traffic 618 Event Halls in Record Time

Background

In 2021 the JD 618 shopping festival reached a record order amount of 305.6 billion yuan, with the front‑end team responsible for developing 16 event halls under tight deadlines. The article shares the innovations, technical framework, and collaboration methods that enabled rapid delivery while avoiding resource bottlenecks.

1. Taro3 Application – Unifying H5 and Mini‑Programs

To support both H5 and mini‑program channels, the team adopted Taro3, which allows a single codebase to be packaged for multiple platforms. Two major white‑screen issues were encountered:

Android low‑version browsers rendering blank pages.

JD Shopping mini‑programs mishandling H5 hash routing.

For the Android issue, the root cause was the use of Web Components, which were replaced with equivalent React components for H5 without affecting mini‑programs. The latest Taro version now includes this fix, eliminating the need for special handling.

For the hash‑routing problem, three solutions were considered: requesting a whitelist, adding an omitH5Params flag to H5 links, and customizing Taro’s router. The team chose the third option, adding a route‑hook that applies a dedicated H5 routing configuration, simplifying deployment and reducing operational risk.

router: {
  forcePath: '/',
  customRoutes: {
    [`/pages/${process.env.TASK_DIR_NAME}/index`]: '/'
  }
}

2. Disaster‑Recovery Service – Ensuring User Experience

Each event hall runs for about a month with page views exceeding one hundred million, demanding high reliability. Two fallback strategies were evaluated:

Redirecting to a simple fallback page on request failures.

Monitoring requests and providing cached data when errors occur.

The chosen hybrid approach configures each hall to monitor its primary data‑fetch API and cache responses to OSS every hour. This guarantees no page redirects and allows dynamic updates aligned with operational strategies.

3. Intelligent UI – Boosting Conversion Rates

To personalize the shopping experience, the front‑end fetches a user design profile from a backend API during page load and renders product listings with different visual styles accordingly. This SPA‑style flow loads the main script, requests page data and the UI profile in parallel, then renders the appropriate UI.

4. Pull‑to‑Refresh – Alternative Page Refresh Mechanism

Inspired by the JD app’s pull‑to‑refresh habit, the team added a WebView‑compatible pull‑to‑refresh feature for event halls, allowing users to refresh content without navigating away.

5. Development Insights

Technical Framework

The evolution moved from Gulp + EJS to Webpack + Vue/React, and finally to Taro3, aiming for better performance, faster development, lower maintenance cost, and stable reuse.

Efficient Collaboration

Key practices include:

One branch per feature (e.g., dev, feature‑xxx).

Merging completed features back to dev and using git revert for quick rollbacks.

Managing shared modules via npm, git submodule, or git subtree, with a preference for git subtree to keep sub‑repositories intuitive.

Version Management for Multi‑Phase Campaigns

The 618 campaign is split into warm‑up, special‑event, and peak phases, each with distinct entry files, directories, and deployment commands (e.g., yarn deploy --name=dist stage=1 for warm‑up). This structure prevents configuration mix‑ups across phases.

Conclusion

Delivering dozens of high‑traffic event halls within a short window requires a robust, multi‑platform front‑end framework, resilient disaster‑recovery mechanisms, UI personalization, and disciplined collaboration. The practices described provide a repeatable blueprint for future large‑scale e‑commerce promotions.