本書從架構(gòu)的角度分析了一個完整Web項目在前端以及前后端協(xié)作層面需要考慮的各項技術(shù)要點和解決方案,在業(yè)務需求以及應用質(zhì)量得到保障的基礎之上,進一步從工程的角度分析選代流程中可能阻礙提高工作效率的關(guān)鍵環(huán)節(jié)和因素,并講解了如何通過技術(shù)手段提升團隊的規(guī)范性和生產(chǎn)效率。
1 本書是《前端工程化系列》叢書之一,主要從宏觀角度講解前端技術(shù)架構(gòu)和工程的各項關(guān)注點。
2 本書適合前端從業(yè)經(jīng)歷較豐富并且對前后端協(xié)作流程有深度體驗的讀者,以及對前端技術(shù)架構(gòu)和工程化感興趣的測試和運維人員閱讀使用。
《前端工程化系列》叢書簡介
本叢書包含兩本書:《前端工程化:體系設計與實踐》和《前端技術(shù)架構(gòu)與工程》。前者著重講述輔助性質(zhì)的工程體系設計和實踐過程,而后者則從宏觀角度講解前端技術(shù)架構(gòu)和工程的各項關(guān)注點。與前者不同的是,后者對于前端工程服務體系的講解側(cè)重方法論和指導思想,并未深入具體實現(xiàn)的每一行代碼。如果在將此部分理念應用于實踐的過程中遇到問題,或許同時參閱兩本書能夠獲取答案。
在工程化思維進入前端領(lǐng)域的幾年內(nèi),前端社區(qū)一直在試圖給前端工程化下一個精確的定義。人們喜歡從歷史講起,然后將視角延伸到時代背景下的宏觀技術(shù)理論,最后聚焦到自身業(yè)務的工程實踐。在這個過程中,從第一步過渡到第二步的歷程中能夠提取出具有普適性的指導思想,寬泛地講就是規(guī)范化、工具化、自動化;而發(fā)展到第三步的時候難免會帶入一些只適合自身業(yè)務特征的方法論和實踐模式。一部分聲音認為這些狹隘的理論屬于功能解決方案,脫離了前端工程化的范疇,但其實這恰恰是工程最基本且最核心的出發(fā)點:一切以業(yè)務為基準。
在對前端工程化進行討論和研究之前,一定要擺脫“前端工程化是一種新技術(shù)”的錯誤認識,前端是軟件開發(fā)的一個細化分支,前端工程化本質(zhì)上是軟件工程理論在前端范疇內(nèi)的具象實踐。方法、工具和過程是軟件工程也是前端工程化的三要素,方法面向編碼和功能解決方案;工具的根本目的是降低時間成本以提高效率;過程追求高效、有序的工作流程,它是一個抽象的概念,具體到實施中則是方法和工具的綜合體。一切編碼方案均是為了解決業(yè)務的功能需求,在此基礎之上以分治和聚合為基本原則設計合理的軟件架構(gòu),最后進一步規(guī)范工作流程和產(chǎn)品發(fā)布策略,這便是工程化的理論模型。總結(jié)為一句話:以業(yè)務為出發(fā)點,架構(gòu)聚焦于代碼,工程聚焦于流程。
內(nèi)容概覽
本書所有內(nèi)容遵循一個基本出發(fā)點:業(yè)務是架構(gòu)和工程的核心。
第1章圍繞上述基本出發(fā)點講解前端自誕生至今在不同時代背景下的意義以及業(yè)務特征,進而引申出架構(gòu)和工程的子集與超集的關(guān)系。然后在此基礎之上探討前端工程化在架構(gòu)以及架構(gòu)之外的困難之處和核心關(guān)注點。
第2章在前端單一的編程語言基礎上,從技術(shù)選型、輔助工具、實現(xiàn)方案以及架構(gòu)模式的角度思考和探索如何更合理地應用HTML、JavaScript、CSS。
第3章聚焦于編碼和架構(gòu)這些“硬實力”之外的“軟實力”—技術(shù)規(guī)范。除去所有編程領(lǐng)域的一些普適規(guī)則(比如技術(shù)選型、目錄規(guī)范和命名規(guī)范),由于前端的特殊性,有些技術(shù)規(guī)范并不僅僅是為了提高代碼的可維護性,它們還兼具了架構(gòu)層面上的設計考慮,比如JavaScript在性能與易讀性之間的抉擇、CSS的編程范式等。
第4章介紹實現(xiàn)前端組件化的Web Components技術(shù),以及通過開發(fā)合理的工具打造更友好的編碼方式。然后從生命周期和宿主環(huán)境兩個角度介紹前端組件設計模式。
第5章描述了兩種常見的前后端分離架構(gòu)模型:SPA和同構(gòu)編程。前者是最普遍、實施成本最低、最極端的分離模式,但對SEO的弱支持導致其并非適用于所有產(chǎn)品類型;而后者則與前者相反,對SEO的良好支持背后是昂貴的實施成本和學習成本,同時對技術(shù)選型有一定的限制。探討兩者的綜合優(yōu)劣性時必須結(jié)合具體的產(chǎn)品需求。
第6章以前端應用的性能評估模型為前提,剖析加載和執(zhí)行過程中影響性能的各項因素(包括網(wǎng)絡、渲染和內(nèi)存管理)以及對應的優(yōu)化策略。最后探索綜合運用Web Worker、WebAssembly甚至WebGPU,以發(fā)揮出瀏覽器的極限運算能力。
第7章將一個完整的迭代流程拆分為開發(fā)、測試、部署和發(fā)布,然后討論在傳統(tǒng)開發(fā)模式下前端如何從開發(fā)、測試和運維層面進行工程優(yōu)化,其中包含高效的工具、合理的規(guī)范以及嚴謹?shù)闹贫取?br />
第8章在第7章描述的前端工程服務體系的前提之下,探討在目前的技術(shù)背景下,前端工程化在本地化的基礎上進一步演進的方向(DevOps)以及目標(持續(xù)交付)。最后,在本書的末尾對繼AJAX和Node.js之后可能引起第三次前端革命的Serverless進行了展望。
讀者對象
本書內(nèi)容并非告訴讀者如何實現(xiàn)具體的業(yè)務需求,所舉示例也只是為了輔助理解相關(guān)內(nèi)容背后的思想和理念。換句話說,本書不是教讀者怎么編碼的,而是從宏觀角度講解了如何實現(xiàn)高可用、高性能、可擴展的軟件架構(gòu),以及高效、規(guī)范、有序的工作流程,所以本書的主要目標讀者是有多年一線編碼經(jīng)驗、充分理解Web整體架構(gòu)并且具有一定的團隊管理和多人協(xié)作經(jīng)驗的資深前端開發(fā)者和技術(shù)經(jīng)理。
資源鏈接
本書所有示例的源代碼均可以訪問http://www.broadview.com.cn/38061進行下載。書中提供的額外參考資料也可從上述網(wǎng)站下載,如正文中標有參見“鏈接1”“鏈接2”等字樣時,即可從上述網(wǎng)站下載的“參考資料.pdf”文件中進行查詢。
致謝
本書的寫作和出版得到了許多同事、朋友和家人的支持和幫助。本書中的很多技術(shù)細節(jié)得到了我的同事和領(lǐng)導的指正。感謝電子工業(yè)出版社的付睿編輯和審校人員對本書的策劃和編審,他們是本書出版背后的重要功臣。此外,本書的寫作占用了我很多業(yè)余時間,感謝我的妻子劉女士在此期間對我的理解、包容和支持。
謹以此書獻給我的妻子和父母。
《前端工程化系列》叢書
本書是《前端工程化系列》叢書之一,從宏觀角度講解前端技術(shù)架構(gòu)和工程的各項關(guān)注點。與本系列另一本圖書《前端工程化:體系設計與實踐》不同的是,本書對于前端工程服務體系的講解側(cè)重方法論和指導思想,并未深入具體實現(xiàn)的每一行代碼。如果在將此部分理念應用于實踐的過程中遇到問題,或許同時參閱兩本書能夠獲取更全面的答案。
周俊鵬,前端工程師,現(xiàn)就職于騰訊,曾就職于優(yōu)酷、搜狗等互聯(lián)網(wǎng)企業(yè)。擁有多年一線前端開發(fā)和架構(gòu)設計經(jīng)驗,做過大眾的Web網(wǎng)站,也做過小眾的SVG Charts;做過宏觀到跨棧的前端工程化,也做過微觀到像素的WebGL編程。目前專注于前端圖形編程、工程化和Web應用層架構(gòu)。
第1章 前端工程化 1
1.1 前端的時代意義 2
1.2 架構(gòu)與工程 9
1.3 零散的前端架構(gòu) 12
1.4 模糊的前端工程邊界 14
1.5 前端架構(gòu)師的職責 16
1.5.1 技術(shù)架構(gòu) 16
1.5.2 工程服務體系 20
1.6 總結(jié) 23
第2章 編程語言 24
2.1 HTML 25
2.1.1 SSR 26
2.1.2 CSR 28
2.2 CSS 34
2.2.1 從編程語言的角度思考CSS 37
2.2.2 LESS和PostCSS 40
2.2.3 CSS-in-JS 42
2.2.4 Houdini 45
2.3 JavaScript 46
2.3.1 靜態(tài)類型 48
2.3.2 不可變性 51
2.3.3 異步編程 53
2.4 總結(jié) 59
第3章 技術(shù)規(guī)范 61
3.1 技術(shù)選型 62
3.2 資源管理 65
3.2.1 目錄結(jié)構(gòu) 66
3.2.2 命名規(guī)范 70
3.3 編碼風格 73
3.3.1 JavaScript的高性能與易讀性 77
3.3.2 CSS編程范式與面向?qū)ο?79
3.4 總結(jié) 85
第4章 組件化 87
4.1 組件與模塊 88
4.2 Web Components 93
4.2.1 自定義元素 94
4.2.2 Shadow DOM 104
4.2.3 HTML template 109
4.3 更友好的編碼方式 115
4.3.1 多文件組件 116
4.3.2 單文件組件 120
4.4 設計模式 121
4.4.1 重新思考DOM 122
4.4.2 生命周期的設計藝術(shù) 123
4.5 總結(jié) 124
第5章 前后端分離 125
5.1 關(guān)注點分離 126
5.2 SPA與路由管理 129
5.2.1 Hash模式 130
5.2.2 History模式 136
5.3 Node.js中間層與同構(gòu)編程 138
5.3.1 同構(gòu)JavaScript 140
5.3.2 React同構(gòu)方案 141
5.4 總結(jié) 150
第6章 性能 151
6.1 性能評估模型 152
6.2 從URL到圖像 156
6.2.1 網(wǎng)絡 159
6.2.2 渲染 166
6.3 內(nèi)存管理 170
6.3.1 GC算法 171
6.3.2 內(nèi)存泄漏 177
6.4 極限運算性能 180
6.5 總結(jié) 184
第7章 工程思維與服務支撐 185
7.1 工程思維 186
7.2 開發(fā)支撐 189
7.2.1 腳手架 190
7.2.2 構(gòu)建 192
7.2.3 dev server 200
7.2.4 源碼管理 201
7.3 測試支撐 207
7.3.1 測試模型 208
7.3.2 依賴注入 213
7.3.3 前后端集成 214
7.4 運維支撐 215
7.4.1 一鍵部署 216
7.4.2 日志埋點 217
7.4.3 性能監(jiān)控 221
7.5 總結(jié) 222
第8章 DevOps與Serverless 223
8.1 DevOps與敏捷開發(fā) 224
8.1.1 敏捷開發(fā) 224
8.1.2 DevOps 228
8.2 持續(xù)交付 230
8.2.1 持續(xù)集成 230
8.2.2 低風險發(fā)布 234
8.3 Serverless與前端 236
8.3.1 BFF 236
8.3.2 Serverless 239
8.4 總結(jié) 242