Front‑end Architecture Design: Lessons from Baidu Search Result Page

Introduction: Front‑end development has evolved from static pages to complex applications, leading many companies to separate front‑end and back‑end architectures. This article explores what front‑end architecture is and the challenges faced by large‑scale front‑ends such as code size, cross‑team collaboration, coupling, and outdated tech stacks.

Case Study – Baidu Mobile Search: Baidu’s search result page handles billions of requests daily, with hundreds of product requirements and dozens of downstream modules. The monolithic codebase suffers from massive libraries, frequent commits, many developers, and limited module knowledge.

Identified Problems: (1) Unclear responsibilities across modules, (2) Severe code coupling, (3) Outdated technology stack (no componentization, reliance on Smarty templates, PHP‑centric tooling, lack of TypeScript, Jest, etc.).

Architecture Evolution: Baidu defines three layers – a foundation layer that adopts community‑driven open‑source tools, a middle layer that isolates independent modules to clarify responsibilities, and a top layer that introduces componentization. The target architecture separates logs, search box, related search, and performance tracking into independent modules, adds a rendering layer between front‑end and back‑end, and introduces Node.js at the bottom.

Implementation Details: The backend uses a “Molecule” interface to compose modules, similar to micro‑services but within a single process. The client side employs a dependency‑injection container to resolve services and assemble components. Modules are written in TypeScript, use DI, and can be rendered on the server.

Componentization & Performance: The chosen component framework is San (alternatives include Vue or React). To ensure cross‑platform compatibility, high‑level TypeScript code depends only on interfaces, and the Molecule interface remains platform‑agnostic. Server‑Side Rendering (SSR) is introduced to improve first‑paint performance, and San’s SSR optimizations (compile‑time VNode elimination, compile‑time calculations) reduce runtime overhead.

Results: After migration, the componentized SSR version of the search result page is about 10 ms faster than the previous Smarty template implementation, demonstrating measurable performance gains.

Conclusion: The article summarizes Baidu’s front‑end architectural challenges and solutions, offering insights that can be applied to other large‑scale front‑end projects.