How Baidu Redesigned Its Mobile Search Front‑End Architecture for Scale and Performance

What Is Front‑End Architecture?

Front‑end architecture refers to the abstract organization of web page components—HTML, CSS, and JavaScript—often packaged as reusable modules or MVVM components. It defines how these pieces are structured, combined, and maintained.

Baidu Mobile Background and Issues

Baidu, China’s leading search engine, handles billions of daily requests on its mobile search result page, supporting over 500 product requirements and dozens of downstream modules. The page’s overall architecture is illustrated in the diagram below.

Identified Problems

Numerous business lines lead to a massive monolithic codebase.

Over 200 commits per month, exceeding 30 k lines of code.

More than 80 developers work in the same repository.

No single team fully understands the entire module.

Three Core Problem Areas

Unclear responsibilities: a single module serves multiple teams (e.g., shared tabs, embedded operations, various product lines).

Severe code coupling: fragile logic, rigid structure, and low reusability.

Outdated technology stack: no Vue/React, still using Smarty templates, PHP‑bound, lacking TypeScript and Jest.

Solution Directions

Baidu defined a two‑goal architecture—meeting business needs while enabling flexible framework and tool upgrades—organized into three layers:

Foundation layer: adopt community‑driven open‑source tools to address outdated stack and responsibility issues.

Middle layer: independent modules to clarify responsibilities and improve delivery efficiency.

Top layer: componentization to accelerate business iteration.

Implementation Details

Modularization : The backend splits the large codebase into independent business modules that expose a unified Molecule interface for rendering and dependency declaration.

Service Side : Modules are combined via the Molecule interface, similar to micro‑services but running within a single process, enabling multi‑language and multi‑framework support.

Client Side : A dependency‑injection container resolves module dependencies at runtime. Each module declares required services, and the container provides them, keeping modules decoupled.

The client‑side code example shows constructor‑based dependency declaration, allowing independent development and testing.

Componentization Strategy

Baidu chose the San framework (alternatives include Vue or React) to replace Smarty templates. The componentization plan addresses two key challenges: cross‑platform compatibility and page performance.

Cross‑Platform : Using TypeScript as a high‑level language, applying dependency inversion, and designing a simple Molecule interface enable seamless migration from PHP to Node.js without rewriting business logic.

Page Performance : Introducing Server‑Side Rendering (SSR) improves first‑paint time. Further SSR optimizations—compile‑time VNode elimination and pre‑computed rendering—reduce runtime overhead.

After deploying San SSR, Baidu observed a ~10 ms reduction in first‑screen latency, demonstrating that component‑based SSR can outperform legacy template engines.

Conclusion

The challenges and solutions described for Baidu’s search result page are applicable to many large‑scale front‑end systems. By adopting modularization, a DI container, and modern component‑based SSR, teams can improve maintainability, scalability, and performance.