揭秘支撑百度搜索Feed小程序三大业务的MVVM框架设计思想，San 核心人员倾力打造...

Posted 2022-06-17 turingbooks

如果你是一名前端工程师，那么一定接触过组件化框架，比如 Angular、React、Vue……

对于前端开发者而言，无论是初入职场的新兵还是久经沙场的老将，在面对纷繁复杂的业务需求和层出不穷的技术选型时，都会经常对自己发起“灵魂三问”。

• 我在哪儿？

• 我该怎么办？

• 我为什么要做这个？

不管你的焦虑来自无法确定的方案、开发遇到的阻碍，还是听说隔壁桌的同事又掌握了一门新技术，你一般会把驱散焦虑的美好期待寄托在某一本书或者某一个技术博客上。

但是你会发现，在看完书和博客之后，自己更焦虑了：

刚了解了代码层面的最佳实践，又发现还要处理不同运行时的场景；好不容易趟过了兼容性的“坑”，还要面对一堆关于开发工具、模拟调试和持续集成的问题。

你无法参透框架或者研发流程设计者究竟在想什么，只能从框架背后的技术栈中选取一个自认为最重要的环节去研究，但仍然对技术全局一头雾水。这就是为什么前端开发者在面对不断更新的前端技术时总是会望洋兴叹，原因跟前面提到的“灵魂三问”直接相关。

• 你不知道自己在哪儿！

• 你不知道该怎么办！

• 你不知道为什么要做这个！

想知道这些问题的答案吗？那么就来阅读本书吧！一起动手做一个框架~

正忙于开发产品、着急上线的你可能会问：“为什么还要分出精力了解一个新的框架？”在大家因技术快速迭代而不停追赶前端新技术的时代，San 有什么理由成为我们新的关注点？

1►

这本书能给你带来什么？

“绝知此事要躬行”，本书选用 RealWorld 作为基础来讲解各个知识点，通过 San 这个轻巧的前端框架，展示了前端框架设计和开发实践的全景图，包括：

• 业务框架的架构和使用；

• 研发工具和构建工具的最佳实践；

• 前后端协同开发的核心方法；

• 跨端渲染流程的设计心得。

https://github.com/kfiveteam/high-perf-mvvm。（开源项目）

如果你是团队的前端技术负责人，本书会让你充分了解如何设计一个满足业务需求且具备兼容性和可扩展性的高性能 MVVM 框架，并指导你围绕这一框架构建稳健的工具链和研发流程。

如果你是一个参加工作不久的前端新人，可以通过阅读本书对前端框架的设计以及主流研发模式获得全面的认识，以便在自己负责的领域中正确发力，为整个团队创造更大的价值。

本书的重点不在于介绍热门的前端框架，而是关注一些本质性的问题：我们为什么需要框架？如何设计框架？如何建设框架的生态？

如果读完本书并且能回答上述问题，那么我相信你对框架的理解将会超出一般使用的范畴。

如果这时候再尝试问一句“为什么要选择这种技术”，我想你给出的理由将不再只是“维持团队的技术栈统一”或“开发者社区生态良好”这些常见的答案了。

2►

本书内容概览

本书将讨论以下几点：

一款匹配需求的框架

提到框架设计，这似乎并不是绝大多数前端开发者需要关注的事情。虽然必须承认这一点，但是请不要忽视“匹配需求”这 4 个字。

San 出自百度移动研发部门，该部门开发的业务覆盖了你能感知到的几乎所有的百度产品。

因为这些产品有用户量大、功能简明、响应速度要求高的特性，所以我们在设计框架的时候不得不把一件事情放在考量的首位，那就是高性能。

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

一个技术矩阵

“全栈开发”的概念流行已久，无论对于以横向划分（客户端、手机浏览器、PC 浏览器和 PC 客户端）还是以纵向划分（客户端和服务端）的维度，前端开发都已经由技术型覆盖演化为框架型覆盖。换言之，框架本身的运行时场景已经跨越了终端，从跨端融合到服务端渲染都能胜任。围绕开发本身的其他相关支持技术也在蓬勃发展：编码辅助工具、编译部署工具、调试工具、文档生成工具……它们都能让你事半功倍。

本书以 San 框架为基础，循序渐进地从不同的角度来讲解如何打造技术矩阵。

学会如何设计

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

我们会在介绍具体技术前，尝试把自己的思考一并展示给你，甚至包括我们在实践过程中辗转碰壁的过程。事实上，在把一门新的技术推广到公司级别的过程中，必须权衡很多不那么“纯粹”的技术问题。

我们既不会游走在业务之外闭门造车，也不会一味盲从、接纳其他技术框架社区抛出的标准。这里面蕴含的“技术哲学”是在核心开发者不断打磨以及与一线开发人员不停沟通的基础上积累而来的，我们希望通过本书把它分享给你。

3►

创作团队

本书创作的工程师们（按照所著章节顺序排列：钱思成、樊中恺、王凯、梅旭光、杨珺、金展、廖焕宇、朱国玺、王永青）来自百度 KFive，这是一个人数众多、负责手机百度等移动端产品开发的大前端技术团队。在开发面向数亿用户的移动端和 PC 端产品的过程中，他们亲身实践了本书中提及的技术方案和研发框架，并且因此大幅提升了研发效率、产品性能和用户体验。本书的内容全部源于这些经过亲身实践、在日复一日的需求迭代中汲取出来的真知灼见。

作者简介

王永青 ：网名“三水清”，百度资深研发专家，曾经先后服务于微博、腾讯，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）    快手资深前端工程师

限时五折，一键下单☟☟