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

What Is Front‑End Architecture?

Front‑end architecture refers to the way web page components are abstracted and organized, encompassing content, style, and scripts that are typically packaged into reusable components.

Baidu Mobile Search Background and Issues

Baidu, as China’s leading search engine, handles billions of daily requests on its mobile app. Its search results page aggregates many product line requirements, resulting in a monolithic codebase with several pain points.

Numerous business lines lead to a huge single repository.

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

More than 80 developers work in the same codebase.

No one can fully master the entire module.

These issues are grouped into three categories:

Unclear responsibilities : modules serve multiple teams, mixing search, UI, logging, and other features.

Severe code coupling : fragile logic, rigid structure, and difficult reuse.

Outdated technology stack : lack of component frameworks (no Vue/React), reliance on Smarty templates and PHP, missing TypeScript and Jest.

Architecture Optimization Goals

The goals are to satisfy business needs while enabling flexible technical upgrades. Baidu defined three architectural layers:

Foundation layer : Align with open‑source communities to avoid reinventing wheels and address outdated stacks and responsibility issues.

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

Top layer : Apply componentization on top of independent modules to accelerate business iteration.

Implementation

Modularization

On the server side, Baidu splits the monolithic codebase into independent business modules that expose a unified Molecule interface defining rendering and dependencies. This allows multi‑language and multi‑framework composition.

On the client side, a dependency‑injection (DI) container resolves each module’s services, enabling loose coupling and independent development.

Componentization

Baidu adopts the San framework (alternatively Vue or React) to replace Smarty templates, turning HTML strings into semantic components.

Cross‑Platform Strategy

Use TypeScript as a high‑level language that can be compiled to multiple platforms.

Apply dependency inversion so business modules depend only on interfaces, not concrete implementations.

Design the Molecule interface to be platform‑agnostic, avoiding direct PHP dependencies.

Page‑Performance Strategy

Introduce Server‑Side Rendering (SSR) to improve first‑paint time.

Optimize SSR by eliminating runtime VNode processing and moving calculations to compile time.

Conclusion

The challenges Baidu faced in scaling its mobile search front‑end are common across large‑scale web applications. By adopting a layered modular architecture, a DI container, modern component frameworks, and optimized SSR, Baidu achieved better maintainability, faster iteration, and measurable performance gains, offering valuable lessons for other front‑end teams.