How Baidu Revamped Its Search Front‑End Architecture: Lessons for Modern Web Development

What Is Front‑End Architecture?

Front‑end architecture refers to the overall structural design and organization of web page components, including HTML, CSS, and JavaScript, typically packaged as reusable components within template engines or MVVM frameworks.

Baidu Mobile Search Context and Pain Points

Baidu’s search result page handles billions of daily requests and serves over 500 product requirements each year, involving dozens of downstream modules. The massive codebase suffers from four concrete issues:

Numerous business lines result in a huge monolithic library.

Over 200 commits per month amount to more than 30 k lines of code.

80+ developers work in the same repository, making full knowledge impossible.

No single team can master the entire module set.

These translate into three core problems:

Unclear responsibilities: a single module serves multiple teams (e.g., search tabs, operation products, recommendation, logging, billing).

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

Outdated tech stack: reliance on Smarty templates, PHP‑only environment, and lack of TypeScript, Jest, or modern build tools.

Strategic Directions (Three‑Layer Approach)

To address the issues, Baidu defined two architectural goals—business‑driven flexibility and technical upgradeability—and organized the solution into three layers:

Foundation layer: Align with open‑source ecosystems, avoid reinventing wheels, and adopt community‑driven tools to modernize the tech stack.

Middle layer: Split responsibilities into independent modules, improving delivery speed and reducing cross‑team friction.

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

Figure 2: The three directional goals for Baidu’s front‑end architecture.

Implementation Details

Infrastructure

Adopt TypeScript for static analysis and cross‑platform compatibility.

Introduce continuous integration pipelines to catch regressions early.

Enforce unit testing from the start of refactoring.

Modularization

Define clear business boundaries and split the monorepo into multiple smaller repositories.

Each sub‑module owns its own CI/CD, dependency selection, and release cycle.

Componentization

Choose a component framework (e.g., San, Vue, or React). Migrate Smarty templates to component files, preserving business semantics while enabling reuse.

Server‑Side Rendering (SSR) and Performance

Introduce SSR to improve first‑paint time; the rendering layer sits between front‑end and back‑end.

Optimize SSR by compiling VNode trees at build time and performing pure HTML concatenation at runtime.

Benchmark shows a ~10 ms improvement over the legacy Smarty engine.

Figure 13: Performance comparison between San SSR and the original Smarty template engine.

Key Takeaways

By introducing a layered architecture, clear module boundaries, a DI container for client‑side dependencies, and modern tooling (TypeScript, CI, SSR), Baidu reduced coupling, upgraded its tech stack, and achieved measurable performance gains. The same principles can guide other large‑scale front‑end teams facing similar scalability challenges.