San: Baidu's Lightweight MVVM Component Framework and Its Real-World Applications

This article introduces San, a lightweight MVVM component framework developed by Baidu, covering its design philosophy, features, ecosystem, and production applications.

Evolution of Frontend Development: Over the past 10-15 years, JavaScript has evolved from a simple scripting language for basic website logic into a powerful ecosystem capable of building cross-platform applications. The article traces the timeline of major JavaScript frameworks: jQuery (2006), Backbone (2010), AngularJS (2010), React (2013), Vue (2014), Svelte (2016), and San (2016).

Birth of San: Before 2016, despite trying React, Vue, and Angular, Baidu's team still used jQuery for core business due to IE8 compatibility requirements. To address this, San was developed and officially launched in 2016, focusing on PC browser compatibility (supporting IE6+) while maintaining modern framework capabilities.

Key Features: San is a data-driven UI framework that prioritizes performance, small bundle size, and compatibility. It uses declarative HTML-like templates with support for data binding, conditional rendering, and loops. The framework implements a component-based architecture with complete lifecycle management aligned with WebComponent standards. San also supports server-side rendering (SSR) for improved SEO and faster time-to-interactive.

Comparison with React and Vue: The article compares San with React (which offers great flexibility but has a steeper learning curve) and Vue (known for its approachable template syntax and excellent documentation). San draws inspiration from Vue's design while implementing new approaches—for example, placing methods directly under components while data is encapsulated. San provides 4 component communication schemes compared to Vue's 6+.

Ecosystem: San's ecosystem includes San CLI (project scaffolding and build tools), UI component libraries (Wuji, Santd based on Ant Design), San DevTools (Chrome extension for debugging), and San SSR for server-side rendering.

Applications at Baidu: Since 2018, Baidu APP has adopted San as its unified frontend framework. The framework is used across multiple products including Baidu APP Feed pages, search result pages, user profiles, and mini programs. Real-world implementations demonstrate significant improvements: 30%+ development efficiency gains, 26% reduction in first byte time, 56% reduction in synchronous content rendering time, and 20%+ performance improvements across various metrics.