123,123

內(nèi)容簡(jiǎn)介

　　本書(shū)以San 為例，結(jié)合具體的實(shí)現(xiàn)，從框架設(shè)計(jì)、工程鏈路、跨端開(kāi)發(fā)和全棧實(shí)現(xiàn)等方面說(shuō)明了如何優(yōu)化前端框架的性能。主要內(nèi)容包括：San 的組件化設(shè)計(jì)、響應(yīng)式的數(shù)據(jù)設(shè)計(jì)，以及數(shù)據(jù)流管理等知識(shí)；San SSR 的設(shè)計(jì)及其在業(yè)務(wù)中的具體運(yùn)用；在“開(kāi)發(fā)– 調(diào)試– 編譯– 部署”工作流中用于提升效率的工具，專門(mén)為San 開(kāi)發(fā)的命令行工具San CLI，以及對(duì)應(yīng)的可視化界面實(shí)現(xiàn)；San 的跨端融合支持；San 的發(fā)展規(guī)劃。本書(shū)適合所有前端開(kāi)發(fā)人員閱讀。

作者簡(jiǎn)介

　　百度 KFive 是百度 App 大前端團(tuán)隊(duì)，在業(yè)務(wù)支持之外，KFive 研究的技術(shù)方向很廣，包括人工智能、跨端融合，等等。KFive 的名稱不僅來(lái)源于起初的辦公地點(diǎn)在百度科技園 5 號(hào)樓，更體現(xiàn)了其對(duì)軟件開(kāi)發(fā)的理解，即“五 Key”：Key1者，精益求精；Key2 者，大巧不工；Key3 者，獨(dú)運(yùn)匠心；Key4 者，百煉千錘；Key5 者，善始善終。作者簡(jiǎn)介：王永青：網(wǎng)名“三水清”，百度資深研發(fā)專家，曾經(jīng)先后服務(wù)于微博、騰訊，2013 年加入百度，開(kāi)始移動(dòng)前端開(kāi)發(fā)工作。先后負(fù)責(zé)百度 App 的前端技術(shù)架構(gòu)、垂類、用戶增長(zhǎng)、小游戲、Feed 等業(yè)務(wù)。目前主要從事 Feed 前端架構(gòu)、San 框架工具鏈研發(fā)等工作。對(duì)于跨端開(kāi)發(fā)、工程化、性能優(yōu)化和前端架構(gòu)等有較豐富的經(jīng)驗(yàn)。樊中愷：百度資深研發(fā)專家，2011 年加入百度，2013 年開(kāi)始移動(dòng)研發(fā)工作。對(duì)前端技術(shù)架構(gòu)、前端 AI、前端智能化、微前端等方向有豐富的開(kāi)發(fā)經(jīng)驗(yàn)。目前工作主要面向前后端架構(gòu)設(shè)計(jì)、Web AI 和跨端研發(fā)等方向。曾參與清華大學(xué)前端公開(kāi)課程建設(shè)，多次出品和參與前端方向的主題會(huì)議，翻譯出版多部技術(shù)圖書(shū)。錢(qián)思成：百度資深研發(fā)工程師，長(zhǎng)期負(fù)責(zé)搜索性能優(yōu)化和前端架構(gòu)開(kāi)發(fā)。曾負(fù)責(zé)搜索性能評(píng)價(jià)和監(jiān)控體系建設(shè)、組件化、微前端化、UI 自動(dòng)化等方向的工作，是極速搜索、簡(jiǎn)單搜索、手機(jī)百度 App 搜索等重要項(xiàng)目的核心參與者。王凱：百度資深前端研發(fā)工程師，2017 年加入百度，長(zhǎng)期深耕百度通用組件、工程效能平臺(tái)、電商等技術(shù)業(yè)務(wù)方向。經(jīng)歷和推進(jìn)了百度搜索樂(lè)高平臺(tái)化配置系統(tǒng)的全面架構(gòu)進(jìn)化和落地，在組件、主題、樣式等領(lǐng)域積累了大量實(shí)踐經(jīng)驗(yàn)，影響搜索 PV 十億級(jí)別日流量，主導(dǎo)開(kāi)發(fā)的組件庫(kù)涉及 H5、NA、小程序等業(yè)務(wù)場(chǎng)景。梅旭光：百度資深研發(fā)工程師，目前負(fù)責(zé)搜索組件化渲染框架、服務(wù)端渲染架構(gòu)的研發(fā)工作。Node.js Core Collaborator，GMTC 講師，San-SSR Maintainer，曾發(fā)布語(yǔ)言轉(zhuǎn)換器 ts2php、多端統(tǒng)一開(kāi)發(fā)框架 Mars 等開(kāi)源項(xiàng)目。對(duì)前端框架、服務(wù)端渲染設(shè)計(jì)和實(shí)現(xiàn)有較為豐富的經(jīng)驗(yàn)，致力于提升 Web 產(chǎn)品的用戶體驗(yàn)。錢(qián)思成：2016 年加入百度，曾參與百度 MIP 項(xiàng)目，負(fù)責(zé)搜索結(jié)果頁(yè)極速瀏覽框架、San 服務(wù)器端渲染框架、搜索結(jié)果頁(yè)前端架構(gòu)改進(jìn)。2021 年加入微軟中國(guó)，任資深軟件工程師。QCon+ 講師，百度技術(shù)學(xué)院講師，LiquidJS 模板引擎作者，翻譯出版多部技術(shù)圖書(shū)。楊珺：百度資深研發(fā)工程師，長(zhǎng)期負(fù)責(zé)搜索性能優(yōu)化和前端架構(gòu)開(kāi)發(fā)。曾負(fù)責(zé)搜索性能評(píng)價(jià)和監(jiān)控體系建設(shè)、組件化、微前端化、UI 自動(dòng)化等方向的工作，是極速搜索、簡(jiǎn)單搜索、手機(jī)百度 App 搜索等重要項(xiàng)目的核心參與者。金展：百度資深前端研發(fā)工程師，曾先后負(fù)責(zé)百度知道、百度經(jīng)驗(yàn)、百度 App、百家號(hào)等多個(gè)百度產(chǎn)品線的前端技術(shù)迭代和性能優(yōu)化工作，以及 San 命令行工具 San CLI、San 組合式 API、前端組件庫(kù) Santd 等開(kāi)源生態(tài)的升級(jí)維護(hù)。廖煥宇：百度前端工程師，主要關(guān)注跨端動(dòng)態(tài)渲染技術(shù)，前端代碼規(guī)范，效能提升與性能優(yōu)化；深度參與 San 生態(tài)建設(shè)；喜歡分享軟件開(kāi)發(fā)經(jīng)驗(yàn)，在 GitHub 中創(chuàng)建了一些實(shí)用的提效工具。朱國(guó)璽：技術(shù)專家，百度資深研發(fā)工程師，2016 年加入百度，先后參與百度貼吧、MIP、搜索、百度 App 等項(xiàng)目的架構(gòu)設(shè)計(jì)與研發(fā)，具有多年跨端融合研發(fā)經(jīng)驗(yàn)，目前專注于百度 App 動(dòng)態(tài) NA 化等技術(shù)方向。

圖書(shū)目錄

第 1章 San，一個(gè)新的起點(diǎn) 1
1．1 San的誕生 3
1．2 San的特性 3
1．3 框架對(duì)比 6
1．3．1 抽象程度 6
1．3．2 運(yùn)行時(shí)和預(yù)編譯 7
1．3．3 同構(gòu)與跨端 8
1．3．4 生態(tài) 8
1．4 為什么選擇San 9
1．5 小結(jié) 10
第 2章組件，一切的起點(diǎn) 11
2．1 從實(shí)際項(xiàng)目出發(fā)，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的San 11
2．1．1 實(shí)現(xiàn)一篇文章 11
2．1．2 實(shí)現(xiàn)文章列表 13
2．1．3 抽象出文章類 16
2．1．4 數(shù)據(jù)驅(qū)動(dòng)視圖的邏輯 18
2．2 編寫(xiě)第一個(gè)San組件 21
2．2．1 安裝San 21
2．2．2 Hello San 23
2．3 使用San實(shí)現(xiàn)文章項(xiàng) 24
2．3．1 使用HTML語(yǔ)法描述結(jié)構(gòu) 25
2．3．2 使用CSS控制樣式 25
2．4 聲明式的視圖模板 26
2．4．1 插值語(yǔ)法 27
2．4．2 屬性綁定 30
2．4．3 表達(dá)式 32
2．4．4 方法 33
2．4．5 過(guò)濾器 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 數(shù)據(jù) 54
2．7．5 組件引用 56
2．8 雙向綁定 58
2．9 工程搭建 61
2．10 小結(jié) 66
第3章數(shù)據(jù)，組件的基石 68
3．1 響應(yīng)式原理 69
3．1．1 如何追蹤數(shù)據(jù)變化 69
3．1．2 主動(dòng)式數(shù)據(jù)變化追蹤 72
3．1．3 如何收集依賴 81
3．1．4 如何觸發(fā)視圖更新 86
3．2 視圖更新 87
3．2．1 視圖更新過(guò)程 87
3．2．2 ANode 91
3．2．3 基于ANode的預(yù)處理 92
3．2．4 節(jié)點(diǎn)遍歷中斷 99
3．3 數(shù)據(jù)及其更新 100
3．3．1 數(shù)據(jù)定義 101
3．3．2 數(shù)據(jù)校驗(yàn) 106
3．4 狀態(tài)管理 111
3．4．1 為什么要進(jìn)行狀態(tài)管理 111
3．4．2 基礎(chǔ)使用 113
3．4．3 san-store的實(shí)現(xiàn)原理 117
3．4．4 san-update庫(kù) 128
3．4．5 實(shí)例 135
3．5 小結(jié) 138
第4章組件進(jìn)階，構(gòu)造復(fù)雜的前端應(yīng)用 139
4．1 組件間通信 141
4．1．1 父子組件通信 142
4．1．2 更多組件通信方式 149
4．2 插槽 151
4．2．1 數(shù)據(jù)環(huán)境 152
4．2．2 命名 153
4．2．3 作用域插槽 155
4．3 路由 157
4．4 動(dòng)畫(huà)和過(guò)渡 160
4．4．1 s-transition 161
4．4．2 動(dòng)畫(huà)控制器 161
4．5 APack 163
4．6 小結(jié) 164
第5章服務(wù)端渲染 166
5．1 服務(wù)端渲染的用途 166
5．1．1 單頁(yè)應(yīng)用的問(wèn)題 166
5．1．2 引入服務(wù)端渲染 167
5．1．3 應(yīng)用場(chǎng)景評(píng)估 168
5．2 如何做服務(wù)端渲染 169
5．2．1 立即使用San SSR 170
5．2．2 開(kāi)發(fā)支持SSR的組件 172
5．2．3 編譯到其他語(yǔ)言和平臺(tái) 174
5．3 San SSR的工作原理 176
5．3．1 San服務(wù)端渲染過(guò)程 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 數(shù)據(jù)注釋 183
5．4．3 復(fù)合插值文本 184
5．4．4 調(diào)用組件反解 184
5．5 服務(wù)端渲染優(yōu)化 185
5．5．1 預(yù)渲染優(yōu)化 186
5．5．2 正確使用render 187
5．5．3 編譯到源碼 188
5．5．4 復(fù)用運(yùn)行時(shí)工具庫(kù) 189
5．6 小結(jié) 190
第6章 San命令行工具 192
6．1 為什么需要San CLI 192
6．2 命令行工具的實(shí)現(xiàn) 193
6．2．1 解析命令行參數(shù) 193
6．2．2 命令行工具的發(fā)布和調(diào)試 194
6．2．3 基于yargs的命令行模塊 195
6．2．4 命令行插件化的實(shí)現(xiàn) 197
6．3 打造San項(xiàng)目腳手架 198
6．3．1 實(shí)現(xiàn)簡(jiǎn)單的項(xiàng)目腳手架 199
6．3．2 實(shí)現(xiàn)可交互的項(xiàng)目腳手架 200
6．3．3 腳手架的完整實(shí)現(xiàn)邏輯 209
6．3．4 更好地組織代碼 210
6．4 San CLI的構(gòu)建方案 213
6．4．1 編譯與構(gòu)建 214
6．4．2 構(gòu)建方案的技術(shù)選型 217
6．4．3 San CLI的構(gòu)建方案 218
6．5 San CLI的整體架構(gòu) 231
6．6 開(kāi)箱即用的最佳實(shí)踐 233
6．6．1 語(yǔ)言層面的支持 233
6．6．2 開(kāi)發(fā)調(diào)試 235
6．6．3 面向項(xiàng)目部署 239
6．6．4 性能優(yōu)化 242
6．7 小結(jié) 248
第7章組件編譯和HMR 249
7．1 San單文件組件 249
7．1．1 一個(gè)簡(jiǎn)單的San單文件組件 249
7．1．2 單文件組件的特性 250
7．2 單文件組件編譯的配置 251
7．2．1 加載器和插件 251
7．2．2 San加載器簡(jiǎn)介 254
7．3 單文件組件編譯的原理 254
7．3．1 提取San文件中的模板、腳本和樣式 255
7．3．2 從單文件組件到San組件 259
7．3．3 San加載器的構(gòu)建流程 261
7．3．4 San加載器的整體運(yùn)行流程 270
7．4 實(shí)現(xiàn)組件的HMR 271
7．4．1 webpack HMR簡(jiǎn)介 271
7．4．2 HMR的工作原理 271
7．4．3 san-hot-loader簡(jiǎn)介 275
7．4．4 San組件的HMR的實(shí)現(xiàn) 276
7．5 利用APack實(shí)現(xiàn)組件的傳輸優(yōu)化 284
7．5．1 從模板到ANode 284
7．5．2 從ANode到APack 286
7．5．3 APack的實(shí)現(xiàn)原理 287
7．6 小結(jié) 296
第8章測(cè)試與調(diào)試 297
8．1 San DevTools簡(jiǎn)介 297
8．1．1 San DevTools的設(shè)計(jì)初衷 297
8．1．2 技術(shù)選型 298
8．2 San DevTools中的通信 299
8．2．1 工作原理 299
8．2．2 構(gòu)建WebSocket服務(wù) 300
8．2．3 構(gòu)建Bridge與協(xié)議解耦 301
8．2．4 構(gòu)建調(diào)試頁(yè)面與被調(diào)試頁(yè)面之間的通信信道 303
8．3 San DevTools中的數(shù)據(jù)收集和處理 307
8．3．1 收集頁(yè)面中的San數(shù)據(jù) 307
8．3．2 構(gòu)建Agent 309
8．3．3 構(gòu)建頁(yè)面組件樹(shù) 311
8．3．4 實(shí)時(shí)修改組件數(shù)據(jù) 315
8．3．5 組件性能數(shù)據(jù)的處理 317
8．3．6 事件與消息 324
8．3．7 san-store中的時(shí)間旅行 326
8．4 單元測(cè)試 332
8．4．1 DOM測(cè)試 332
8．4．2 快照測(cè)試 335
8．5 小結(jié) 336
第9章 San Native跨端融合 337
9．1 跨平臺(tái)開(kāi)發(fā) 337
9．1．1 JavaScript驅(qū)動(dòng)的NA原生渲染 338
9．1．2 跨端渲染方案的優(yōu)缺點(diǎn) 338
9．2 渲染引擎 342
9．2．1 供JavaScript調(diào)用的渲染API 342
9．2．2 宿主所使用的渲染引擎 342
9．2．3 實(shí)現(xiàn)JavaScript代碼 343
9．3 高性能的跨端技術(shù)方案 343
9．3．1 響應(yīng)式驅(qū)動(dòng)NA渲染 344
9．3．2 適配跨端渲染 345
9．3．3 視圖設(shè)計(jì) 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 共享機(jī)制和多bundle 365
9．6 小結(jié) 368
第 10章 San的未來(lái) 369