本書以San 為例，結合具體的實現，從框架設計、工程鏈路、跨端開發(fā)和全棧實現等方面說明了如何優(yōu)化前端框架的性能。主要內容包括：San 的組件化設計、響應式的數據設計，以及數據流管理等知識；San SSR 的設計及其在業(yè)務中的具體運用；在“開發(fā)– 調試– 編譯– 部署”工作流中用于提升效率的工具，專門為San 開發(fā)的命令行工具San CLI，以及對應的可視化界面實現；San 的跨端融合支持；San 的發(fā)展規(guī)劃。
本書適合所有前端開發(fā)人員閱讀。
GitHub Star 4.5K 項目 San 核心人員傾力打造
從 0 到 1，用 JavaScript 動手做一個 MVVM 框架
揭秘支撐百度搜索、Feed、小程序三大業(yè)務的MVVM框架設計
帶你跳出框架，領悟高性能跨端全棧設計思想
跳出框架，闡述設計思想
跨端開發(fā)，專注性能優(yōu)化
全站全端，場景自由切換
本書在以下幾個方面有所創(chuàng)新和突破：
1.設計思想：跳出框架之外，帶大家了解為何需要框架，以及框架如何設計的書；
2.性能為上：在框架設計、工程鏈路、跨端開發(fā)、全棧實現等方面結合具體實現說明性能如何優(yōu)化的書；
3.全棧全端：介紹從服務端客戶端、從瀏覽器到客戶端，基于多個場景、多種研發(fā)模式下進行框架設計和業(yè)務配合的書；
4.全景展現：把工具鏈路設計、調試方案、插件設計等結合框架一起講的書，讓讀者對于前端框架有一個全景式的把握。
百度 KFive 是百度 App 大前端團隊，在業(yè)務支持之外，KFive 研究的技術方向很廣，包括人工智能、跨端融合，等等。KFive 的名稱不僅來源于起初的辦公地點在百度科技園 5 號樓，更體現了其對軟件開發(fā)的理解，即“五 Key”：Key1者，精益求精；Key2 者，大巧不工；Key3 者，獨運匠心；Key4 者，百煉千錘；Key5 者，善始善終。
作者簡介：
王永青 ：網名“三水清”，百度資深研發(fā)專家，曾經先后服務于微博、騰訊，2013 年加入百度，開始移動前端開發(fā)工作。先后負責百度 App 的前端技術架構、垂類、用戶增長、小游戲、Feed 等業(yè)務。目前主要從事 Feed 前端架構、San 框架工具鏈研發(fā)等工作。對于跨端開發(fā)、工程化、性能優(yōu)化和前端架構等有較豐富的經驗。
樊中愷 ：百度資深研發(fā)專家，2011 年加入百度，2013 年開始移動研發(fā)工作。對前端技術架構、前端 AI、前端智能化、微前端等方向有豐富的開發(fā)經驗。目前工作主要面向前后端架構設計、Web AI 和跨端研發(fā)等方向。曾參與清華大學前端公開課程建設，多次出品和參與前端方向的主題會議，翻譯出版多部技術圖書。
錢思成 ：百度資深研發(fā)工程師，長期負責搜索性能優(yōu)化和前端架構開發(fā)。曾負責搜索性能評價和監(jiān)控體系建設、組件化、微前端化、UI 自動化等方向的工作，是極速搜索、簡單搜索、手機百度 App 搜索等重要項目的核心參與者。
王凱 ：百度資深前端研發(fā)工程師，2017 年加入百度，長期深耕百度通用組件、工程效能平臺、電商等技術業(yè)務方向。經歷和推進了百度搜索樂高平臺化配置系統(tǒng)的全面架構進化和落地，在組件、主題、樣式等領域積累了大量實踐經驗，影響搜索 PV 十億級別日流量，主導開發(fā)的組件庫涉及 H5、NA、小程序等業(yè)務場景。
梅旭光 ：百度資深研發(fā)工程師，目前負責搜索組件化渲染框架、服務端渲染架構的研發(fā)工作。Node.js Core Collaborator，GMTC 講師，San-SSR Maintainer，曾發(fā)布語言轉換器 ts2php、多端統(tǒng)一開發(fā)框架 Mars 等開源項目。對前端框架、服務端渲染設計和實現有較為豐富的經驗，致力于提升 Web 產品的用戶體驗。
錢思成 ：2016 年加入百度，曾參與百度 MIP 項目，負責搜索結果頁極速瀏覽框架、San 服務器端渲染框架、搜索結果頁前端架構改進。2021 年加入微軟中國，任資深軟件工程師。QCon+ 講師，百度技術學院講師，LiquidJS 模板引擎作者，翻譯出版多部技術圖書。
楊珺：百度資深研發(fā)工程師，長期負責搜索性能優(yōu)化和前端架構開發(fā)。曾負責搜索性能評價和監(jiān)控體系建設、組件化、微前端化、UI 自動化等方向的工作，是極速搜索、簡單搜索、手機百度 App 搜索等重要項目的核心參與者。
金展 ：百度資深前端研發(fā)工程師，曾先后負責百度知道、百度經驗、百度 App、百家號等多個百度產品線的前端技術迭代和性能優(yōu)化工作，以及 San 命令行工具 San CLI、San 組合式 API、前端組件庫 Santd 等開源生態(tài)的升級維護。
廖煥宇 ：百度前端工程師，主要關注跨端動態(tài)渲染技術，前端代碼規(guī)范，效能提升與性能優(yōu)化；深度參與 San 生態(tài)建設；喜歡分享軟件開發(fā)經驗，在 GitHub 中創(chuàng)建了一些實用的提效工具。
朱國璽 ：技術專家，百度資深研發(fā)工程師，2016 年加入百度，先后參與百度貼吧、MIP、搜索、百度 App 等項目的架構設計與研發(fā)，具有多年跨端融合研發(fā)經驗，目前專注于百度 App 動態(tài) NA 化等技術方向。
第 1章 San，一個新的起點 1
1.1 San的誕生 3
1.2 San的特性 3
1.3 框架對比 6
1.3.1 抽象程度 6
1.3.2 運行時和預編譯 7
1.3.3 同構與跨端 8
1.3.4 生態(tài) 8
1.4 為什么選擇San 9
1.5 小結 10
第 2章 組件，一切的起點 11
2.1 從實際項目出發(fā)，實現一個簡單的San 11
2.1.1 實現一篇文章 11
2.1.2 實現文章列表 13
2.1.3 抽象出文章類 16
2.1.4 數據驅動視圖的邏輯 18
2.2 編寫第 一個San組件 21
2.2.1 安裝San 21
2.2.2 Hello San 23
2.3 使用San實現文章項 24
2.3.1 使用HTML語法描述結構 25
2.3.2 使用CSS控制樣式 25
2.4 聲明式的視圖模板 26
2.4.1 插值語法 27
2.4.2 屬性綁定 30
2.4.3 表達式 32
2.4.4 方法 33
2.4.5 過濾器 34
2.5 事件 35
2.5.1 事件修飾符 38
2.5.2 自定義事件 39
2.6 指令 41
2.6.1 條件 41
2.6.2 循環(huán) 44
2.6.3 源碼解析 47
2.7 San組件 49
2.7.1 組件定義 50
2.7.2 生命周期 51
2.7.3 視圖模板 53
2.7.4 數據 54
2.7.5 組件引用 56
2.8 雙向綁定 58
2.9 工程搭建 61
2.10 小結 66
第3章 數據，組件的基石 68
3.1 響應式原理 69
3.1.1 如何追蹤數據變化 69
3.1.2 主動式數據變化追蹤 72
3.1.3 如何收集依賴 81
3.1.4 如何觸發(fā)視圖更新 86
3.2 視圖更新 87
3.2.1 視圖更新過程 87
3.2.2 ANode 91
3.2.3 基于ANode的預處理 92
3.2.4 節(jié)點遍歷中斷 99
3.3 數據及其更新 100
3.3.1 數據定義 101
3.3.2 數據校驗 106
3.4 狀態(tài)管理 111
3.4.1 為什么要進行狀態(tài)管理 111
3.4.2 基礎使用 113
3.4.3 san-store的實現原理 117
3.4.4 san-update庫 128
3.4.5 實例 135
3.5 小結 138
第4章 組件進階，構造復雜的前端應用 139
4.1 組件間通信 141
4.1.1 父子組件通信 142
4.1.2 更多組件通信方式 149
4.2 插槽 151
4.2.1 數據環(huán)境 152
4.2.2 命名 153
4.2.3 作用域插槽 155
4.3 路由 157
4.4 動畫和過渡 160
4.4.1 s-transition 161
4.4.2 動畫控制器 161
4.5 APack 163
4.6 小結 164
第5章 服務端渲染 166
5.1 服務端渲染的用途 166
5.1.1 單頁應用的問題 166
5.1.2 引入服務端渲染 167
5.1.3 應用場景評估 168
5.2 如何做服務端渲染 169
5.2.1 立即使用San SSR 170
5.2.2 開發(fā)支持SSR的組件 172
5.2.3 編譯到其他語言和平臺 174
5.3 San SSR的工作原理 176
5.3.1 San服務端渲染過程 176
5.3.2 組件信息解析 177
5.3.3 編譯到render AST 178
5.3.4 render的代碼生成 180
5.4 客戶端反解 182
5.4.1 組件反解的概念 182
5.4.2 數據注釋 183
5.4.3 復合插值文本 184
5.4.4 調用組件反解 184
5.5 服務端渲染優(yōu)化 185
5.5.1 預渲染優(yōu)化 186
5.5.2 正確使用render 187
5.5.3 編譯到源碼 188
5.5.4 復用運行時工具庫 189
5.6 小結 190
第6章 San命令行工具 192
6.1 為什么需要San CLI 192
6.2 命令行工具的實現 193
6.2.1 解析命令行參數 193
6.2.2 命令行工具的發(fā)布和調試 194
6.2.3 基于yargs的命令行模塊 195
6.2.4 命令行插件化的實現 197
6.3 打造San項目腳手架 198
6.3.1 實現簡單的項目腳手架 199
6.3.2 實現可交互的項目腳手架 200
6.3.3 腳手架的完整實現邏輯 209
6.3.4 更好地組織代碼 210
6.4 San CLI的構建方案 213
6.4.1 編譯與構建 214
6.4.2 構建方案的技術選型 217
6.4.3 San CLI的構建方案 218
6.5 San CLI的整體架構 231
6.6 開箱即用的最佳實踐 233
6.6.1 語言層面的支持 233
6.6.2 開發(fā)調試 235
6.6.3 面向項目部署 239
6.6.4 性能優(yōu)化 242
6.7 小結 248
第7章 組件編譯和HMR 249
7.1 San單文件組件 249
7.1.1 一個簡單的San單文件組件 249
7.1.2 單文件組件的特性 250
7.2 單文件組件編譯的配置 251
7.2.1 加載器和插件 251
7.2.2 San加載器簡介 254
7.3 單文件組件編譯的原理 254
7.3.1 提取San文件中的模板、腳本和樣式 255
7.3.2 從單文件組件到San組件 259
7.3.3 San加載器的構建流程 261
7.3.4 San加載器的整體運行流程 270
7.4 實現組件的HMR 271
7.4.1 webpack HMR簡介 271
7.4.2 HMR的工作原理 271
7.4.3 san-hot-loader簡介 275
7.4.4 San組件的HMR的實現 276
7.5 利用APack實現組件的傳輸優(yōu)化 284
7.5.1 從模板到ANode 284
7.5.2 從ANode到APack 286
7.5.3 APack的實現原理 287
7.6 小結 296
第8章 測試與調試 297
8.1 San DevTools簡介 297
8.1.1 San DevTools的設計初衷 297
8.1.2 技術選型 298
8.2 San DevTools中的通信 299
8.2.1 工作原理 299
8.2.2 構建WebSocket服務 300
8.2.3 構建Bridge與協議解耦 301
8.2.4 構建調試頁面與被調試頁面之間的通信信道 303
8.3 San DevTools中的數據收集和處理 307
8.3.1 收集頁面中的San數據 307
8.3.2 構建Agent 309
8.3.3 構建頁面組件樹 311
8.3.4 實時修改組件數據 315
8.3.5 組件性能數據的處理 317
8.3.6 事件與消息 324
8.3.7 san-store中的時間旅行 326
8.4 單元測試 332
8.4.1 DOM測試 332
8.4.2 快照測試 335
8.5 小結 336
第9章 San Native跨端融合 337
9.1 跨平臺開發(fā) 337
9.1.1 JavaScript驅動的NA原生渲染 338
9.1.2 跨端渲染方案的優(yōu)缺點 338
9.2 渲染引擎 342
9.2.1 供JavaScript調用的渲染API 342
9.2.2 宿主所使用的渲染引擎 342
9.2.3 實現JavaScript代碼 343
9.3 高性能的跨端技術方案 343
9.3.1 響應式驅動NA渲染 344
9.3.2 適配跨端渲染 345
9.3.3 視圖設計 346
9.3.4 事件系統(tǒng) 348
9.3.5 樣式選擇器 351
9.4 San Native的Web化 362
9.4.1 Web化的背后原理 362
9.4.2 Native渲染與Web渲染的差異 364
9.5 共享機制和多bundle 365
9.6 小結 368
第 10章 San的未來 369
書單推薦
