从 0 到 1，探究百亿流量验证下的 MVVM 框架设计

今天，我们换个角度聊一下 MVVM。

深入浅出——这大概是介绍一个框架的最好方式，或者说，这是所有人更习惯的一种学习方式。

但却并不适合所有的人。

有的时候，当你已经把一个框架捻熟于心，夸张到看到 changelog 就能明白作者们改动了哪里时，你是否有过一种迷茫？

你反复查看手里的这把利器，剑柄上刻着 V 字 R 字或是 A 字，源码铸造的剑身能够削铁如泥，剑鞘也是否花纹紧簇、雕工精湛……

但当你拔剑出鞘，大喝一声：下一个对手是谁！

可是，左突右刺，一片虚空。

对啊！下一个对手是谁？肯定不是再学一门“手艺”，或者再琢磨另一个轮子，那样太无趣……

倒不如，让我们研究一下如何设计一个框架。不仅仅是还原“数据追踪”、“状态检测”、“组件封装”、“消息通信”这些基础的技术点，而是站得更高，从底层应用、工具链封装、跨端渲染，前后端配合的角度来了解一个框架的设计与实施。

从“深入浅出”到“纵览全局”，这是一种思维的转变。我们追求的不光是源码内缜密的构思，更要了解的是一个框架是如何耦合进一整个业务团队的开发流程。

开发、调试、部署、编译……一套下来，需要的不仅仅是对技术原理的掌握，还要晓得每一个环节需要解决的核心问题是什么。

但如何化繁就简、提纲挈领地讲明白一个 MVVM 框架和其周边所涉猎的各个知识点呢？

《高性能 MVVM 框架设计与实现——San》帮你完成这棵知识树的构建。

本书的作者是百度移动研发部的大前端研发人员和技术专家，而 San 则是百度移动技术体系下推荐使用的高性能技术框架，横向支持了百度搜索、Feed 和小程序等业务场景，衍生出的 Node 服务端渲染支撑了百度搜索和推荐流百亿级别的流量，基于其定制化的未来将要开源的跨端融合融合框架 San Native 也正在支持覆盖上亿用户量的应用与场景。

看到这里，你一定会说：什么？又让我们学习一个新的框架？真的是学不动了啊！

且慢！别忽略书名中的第一个关键词——高性能。

我们之所以选择 San 作为介绍 MVVM 框架设计与实现的切入口，是因为它设计良好，充分平衡了框架性能和业务开发之间的关系，在足够用和足够好之间找到了一个最佳的落脚点。

如果拿车来做比喻，我们想造的是一台陆巡。相比轿车甚至多数 SUV，它没有那么好开，看不到很多 2.0T 车的尾灯；相比牧马人和 Benz G，它的越野能力和通过性也没那么强。但是它很可靠，能稳稳当当、舒适地带你到任何想去的地方。

—— Erik，百度前端架构师

阅读本书你会发现，San 很多地方做到了够用就好。

克制的 API 和组件设计方案，满足业务要求却不降低研发体验的开发手段，以及对产物体积和通信效率的苛刻要求，都会带给你耳目一新的感觉。

书籍写作的过程中，勘校的研发人员曾打趣地说：“这是要手把手教别人怎么造一个轮子。”

但事实上，这本书是在教人如何造一条轨道，贯穿的钢轨是足够灵活的框架，而钢轨下的枕木，则是周边的基础技术建设和对性能的不懈追求。

最后，总结一下为什么要读这本书的三大理由：

1. 百亿流量验证下的高性能框架

San 出自百度移动研发部门，该部门开发的业务覆盖了你能感知到的几乎所有百度产品。因为这些产品有用户量大、功能简明、响应速度要求高的特性，所以我们在设计框架的时候不得不把一件事情放在考量的首位，那就是高性能。

因此，在本书的各个章节中，你会看到 San 是如何把高性能这一设计理念贯彻始终的，以及如何在框架本身以及周边设施的打造上让其落地。

2、教你如何打造一个技术矩阵

“全栈开发”的概念流行已久，无论对于以横向划分（客户端、手机浏览器、PC 浏览器和 PC 客户端）还是以纵向划分（客户端和服务端）的维度，前端开发都已经由技术型覆盖演化为了框架型覆盖。

换言之，框架本身的运行时场景已经跨越了终端，从跨端融合到服务端渲染都能胜任。本书将会指导你如何打造能够支撑大规模团队日常开发的技术矩阵。

3、提升设计能力

“设计”两个字后面可以跟的东西有很多，不限于 San 框架本身。

在本书中，你会看到百度的工程师为了优化 San 工作流程，如何设计 San CLI 的各个模块，以及它们之间是如何配合的；你会看到如何设计协议、封装端能力，使得跨端融合框架 San Native 达到媲美客户端的运行效果和效率；你还会看到如何设计抽象开发者工具库，使得辅助开发工具能够满足各个端的研发需求。

总结来说，《高性能 MVVM 框架设计与实现——San》是一本不可多得的，全方面提升你框架设计能力，加深技术理解、拓宽技术视野的理论与应用结合的技术书籍。

百度 KFive

2022.6.6

作者简介

百度 KFive，来自百度移动研发部的大前端技术团队。

名字来由：Coding 之术有 5key。key1 者，精益求精；key2 者，大巧不工；key3 者，独运匠心；key4 者，百炼千锤；key5 者，善始善终。

王永青 ：网名“三水清”，百度资深研发专家，曾经先后服务于微博、腾讯，2013 年加入百度，开始移动前端开发工作。先后负责百度 App 的前端技术架构、垂类、用户增长、小游戏、Feed 等业务。目前主要从事 Feed 前端架构、San 框架工具链研发等工作。对于跨端开发、工程化、性能优化和前端架构等有较丰富的经验。

樊中恺 ：百度资深研发专家，2011 年加入百度，2013 年开始移动研发工作。对前端技术架构、前端 AI、前端智能化、微前端等方向有丰富的开发经验。目前工作主要面向前后端架构设计、Web AI 和跨端研发等方向。曾参与清华大学前端公开课程建设，多次出品和参与前端方向的主题会议，翻译出版多部技术图书。

钱思成 ：百度资深研发工程师，长期负责搜索性能优化和前端架构开发。曾负责搜索性能评价和监控体系建设、组件化、微前端化、UI 自动化等方向的工作，是极速搜索、简单搜索、手机百度 App 搜索等重要项目的核心参与者。

王凯 ：百度资深前端研发工程师，2017 年加入百度，长期深耕百度通用组件、工程效能平台、电商等技术业务方向。经历和推进了百度搜索乐高平台化配置系统的全面架构进化和落地，在组件、主题、样式等领域积累了大量实践经验，影响搜索 PV 十亿级别日流量，主导开发的组件库涉及 H5、NA、小程序等业务场景。

梅旭光 ：百度资深研发工程师，目前负责搜索组件化渲染框架、服务端渲染架构的研发工作。Node.js Core Collaborator，GMTC 讲师，San-SSR Maintainer，曾发布语言转换器 ts2php、多端统一开发框架 Mars 等开源项目。对前端框架、服务端渲染设计和实现有较为丰富的经验，致力于提升 Web 产品的用户体验。

杨珺：2016 年加入百度，曾参与百度 MIP 项目，负责搜索结果页极速浏览框架、San 服务器端渲染框架、搜索结果页前端架构改进。2021 年加入微软中国，任资深软件工程师。QCon+ 讲师，百度技术学院讲师，LiquidJS 模板引擎作者，翻译出版多部技术图书。

金展 ：百度资深前端研发工程师，曾先后负责百度知道、百度经验、百度 App、百家号等多个百度产品线的前端技术迭代和性能优化工作，以及 San 命令行工具 San CLI、San 组合式 API、前端组件库 Santd 等开源生态的升级维护。

廖焕宇 ：百度前端工程师，主要关注跨端动态渲染技术，前端代码规范，效能提升与性能优化；深度参与 San 生态建设；喜欢分享软件开发经验，在 GitHub 中创建了一些实用的提效工具。

朱国玺 ：技术专家，百度资深研发工程师，2016 年加入百度，先后参与百度贴吧、MIP、搜索、百度 App 等项目的架构设计与研发，具有多年跨端融合研发经验，目前专注于百度 App 动态 NA 化等技术方向。

大咖推荐

San 框架为前端开发打开了新思路，值得对架构设计和研发工具建设感兴趣的程序员了解。

——王磊    百度 App 移动研发部总监

作为 San 的早期用户，我对它的稳定性、可靠性产生了深刻的印象。对于框架开发者来说，它的设计思路和精简的实现也值得学习。

—— 李玉北    字节跳动 Web Infra 团队负责人

San 框架在百度用户产品的构建过程中发挥了很大的作用。这本书细致地讲解了 San 的实现原理，并带领读者深入了解了围绕 San 打造前端生态的方方面面。读完此书，相信你除了可以领略 San 本身的独到之处，也会对高性能前端应用有更深入的理解。

—— 顾轶灵    百度资深前端工程师

San 项目自 2016 年启动至今，历时 6 年。百度众多技术专家不断打磨、精心雕琢，最终给行业开发者呈献了一个简单、可依赖的前端 MVVM 框架。在前端框架层出不穷的今天，San 凭借好用、兼容性强以及务实的设计理念赢得了一席之地。这本书以 San 为案例，深入介绍了  MVVM   框架的设计思想，抛开  San  框架本身也是干货满满，值得细细研读。

—— 张云龙    巧子科技、皓鹿科技创始人，前端工程化先驱

作为百度内部兼顾新老版本浏览器以及完成从模板时代过渡到 MVVM 时代的框架，San 有一些很有趣的设计，不管是组件反解还是对于编译时的 ANode 设计，都使得它在兼容历史版本的同时保持了优异的运行时性能。在这本书中，作者不仅关注 San 的原理与实现，更重要的是带领大家完成了对一个  MVVM  框架的完整剖析，知其然并知其所以然。

—— 天翔（@Skyline）    快手资深前端工程师