Frontend Architecture Evolution: Lessons from Baidu Search Result Page

Frontend architecture refers to the abstraction and organization of web page components, encompassing HTML, CSS, and JavaScript, often packaged as reusable components within frameworks.

The article uses Baidu’s mobile search result page as a case study to illustrate the evolution of front‑end architecture from simple static pages to complex, large‑scale systems.

Key challenges identified include massive codebases with many business lines, high commit frequency, large developer teams, and outdated technology stacks such as Smarty templates, PHP‑centric back‑ends, and lack of TypeScript or modern testing tools.

These challenges are grouped into three problem areas: unclear responsibilities across modules, severe code coupling, and an obsolete tech stack.

To address them, Baidu proposes a three‑layer direction: a foundation layer that aligns with open‑source communities, a middle layer that isolates independent modules, and a top layer that introduces componentization.

The target architecture separates logging, search box, related search, and performance tracking into independent modules, adds a rendering layer between front‑end and back‑end, and introduces a Node.js runtime.

Implementation relies on a “Molecule” interface on the server side to compose modules, and a dependency‑injection container on the client side to resolve services and assemble components.

For componentization, Baidu adopts the San framework (alternatively Vue or React), migrating from Smarty templates to San components, and focuses on cross‑platform compatibility and page performance.

Performance is ensured by introducing server‑side rendering (SSR) and optimizing SSR by eliminating runtime VNode processing and moving work to compile time, resulting in a ~10 ms improvement over the legacy template engine.

The article concludes that the architectural lessons from Baidu’s search result page can inspire other front‑end teams facing similar scaling and maintenance issues.