Case Study: React.js, Redux, and Node.js Architecture for Baidu Mami E‑commerce WebApp

We built a mobile‑first single‑page web app (mami.baidu.com) that enables users to select products, pay, and track orders, using a React.js front‑end and a Node.js back‑end.

Product Overview

The application is a mobile H5 page that completes the entire e‑commerce flow.

Technology Selection

After a two‑year stable period for React.js, the team evaluated React and other open‑source technologies and concluded that the stack was feasible.

React.js

React.js, open‑sourced by Facebook in 2013, focuses on the view layer. Its benefits include component‑based development (similar to iOS/Android), easy integration with other frameworks, virtual‑DOM performance, isomorphic rendering, and a rich ecosystem of reusable components.

In this project we observed two major strengths of React:

Strict adherence to W3C standards and web‑component‑based componentization, improving readability and maintainability.

Performance gains from virtual‑DOM operations.

Redux

Redux is used to manage the application’s data flow. Its key features are a single immutable state object, actions that trigger state changes via reducers, modular state splitting, powerful dev tools (webpack hot‑load, redux‑devtools), server‑side rendering support, and a clear JavaScript‑only API.

These features proved valuable for the Baidu Mami project, making Redux a solid choice for a single‑page web app.

Node.js

The back‑end is built on an internal Node.js MVC framework called Lark.js , which is open‑source and designed for high‑concurrency, large‑traffic internet services.

Lark.js emphasizes routing, layered architecture, and performance, targeting billion‑level PV services rather than rapid development.

It has been deployed in multiple Baidu product lines. The following diagrams show the project’s directory structure and layered architecture:

React‑router

React‑router provides rich routing capabilities with excellent pushState support, enabling smooth view transitions via AJAX.

Build and Deployment

Using Gulp and Webpack, two npm scripts were defined:

npm run dev

and

npm run deploy

dev : watches file changes, transpiles ES6 to ES5 via Babel, splits lib.js (stable core) and app.js (business code), compiles LESS, and restarts the Node.js service.

deploy : merges and minifies JS/CSS, adds MD5 hashes for cache‑busting.

Issues and Pitfalls

State design must be completed before development to ensure each piece of business data appears only once in the state tree.

Too few smart components caused deep prop‑drilling.

onClick events were unresponsive on many Android devices.

Conclusion

The Baidu Mami project adopted a popular front‑end stack and achieved the following advantages:

Isomorphic rendering with a single React component tree on both server and client, eliminating white‑screen loading.

Componentization and virtual DOM improved reuse, performance, and team collaboration.

React + Redux enforced a clear, consistent code structure across developers.

A thriving ecosystem of tools and libraries supports future upgrades and native React‑Native development.

Drawbacks include a higher learning curve due to the need to master Redux, React‑router, ES6, etc., and a bundle size exceeding 200 KB (≈60 KB gzipped), which is more suitable for large web apps.

Source: GitHub