How Baidu Re‑engineered Its Mobile Search Front‑End Architecture for Scale

What Is Front‑End Architecture?

Front‑end architecture refers to the abstract organization and structuring of web page components—HTML, CSS, and JavaScript—often packaged as templates or MVVM components, similar to how a building’s framework defines its overall shape.

Background and Issues at Baidu Mobile

Baidu, the leading Chinese search engine with about 12% global market share, serves billions of daily requests through its mobile app. The search result page alone handles a billion‑level traffic and supports hundreds of product lines, resulting in several systemic problems:

Numerous business lines produce a massive monolithic codebase.

Over 200 commits per month generate more than 30 000 lines of code.

More than 80 developers work in the same repository.

No single team can fully master the entire module stack.

These symptoms are grouped into three core issues:

Unclear responsibilities: A single module often serves multiple teams, mixing search, tab, operation, and other features.

Severe code coupling: Errors are frequent, the structure is rigid, and reuse is difficult.

Outdated technology stack: The page still uses Smarty templates, PHP‑bound logic, and lacks TypeScript, Jest, or modern frameworks.

Goals and Direction

The redesign targets two objectives: satisfy business demands and enable flexible technical upgrades. Baidu defined three architectural layers to achieve this:

Foundation layer: Align with open‑source communities to avoid reinventing wheels and to modernize the tech stack.

Middle layer: Introduce independent modules that clarify ownership and improve delivery speed.

Top layer: Apply componentization to accelerate business iteration.

Solution Overview

Modularization splits the monolith into independent business modules, each exposing a unified Molecule interface that describes rendering logic and dependencies. The server composes these modules into the final page.

Client‑side dependency injection introduces a lightweight container that registers shared services and resolves module dependencies at runtime, ensuring loose coupling between modules.

The container manages Service objects (e.g., logging, analytics) while business modules declare only the services they need, preventing direct module‑to‑module dependencies.

Implementation Details

1. Moduleization

Identify business boundaries, split the large repository into smaller, independently versioned modules, and provide automated pipelines for each module’s build, test, and deployment.

2. Componentization

Baidu chose the San framework for componentization, but Vue or React could be used similarly. Migration involves converting Smarty templates into San components, giving the UI a semantic, reusable structure.

3. Cross‑Platform Strategy

Adopt TypeScript as a high‑level language that can be compiled to multiple runtimes.

Apply dependency inversion: modules depend on interfaces, not concrete implementations.

Design the Molecule interface to be platform‑agnostic, avoiding PHP‑specific APIs.

The transition proceeds in three stages illustrated in the architecture diagram.

4. Page Performance

Introducing a front‑end framework can increase bundle size, so Baidu focused on two optimizations:

Server‑Side Rendering (SSR): Render the first view on the server to improve first‑paint time.

SSR Optimizations: Reduce runtime overhead by compiling VNode trees at build time and performing HTML concatenation instead of recursive rendering.

Benchmarks show the new San‑based SSR implementation is roughly 10 ms faster than the legacy Smarty engine, delivering a noticeable performance gain for the search result page.

Conclusion

The case study demonstrates how a large‑scale web product can evolve its front‑end architecture by adopting community‑driven foundations, clear module boundaries, and modern component frameworks, while preserving performance through SSR and careful build‑time optimizations. These principles are applicable to any organization facing similar front‑end scalability challenges.