前端架構是一繫列工具和流程的集合，旨在提升前端代碼質量，並實現高效、可持續的工作流。對於大型Web項目，前端架構師和軟件架構師同樣不可或缺。
本書作者通過Red Hat公司真實案例分析以及以往經驗積累的實用技巧，繫統總結了前端架構的四個核心，詳細展示了新的前端開發準則，將Web開發提升到了一個新高度。
前端架構四個核心：
● 代碼——如何實現繫統架構中的HTML、CSS和JavaScript
● 流程——構建高效並且防止出錯的工作流所需要的工具和流程
● 測試——為網站搭建穩固基礎
● 文檔——規劃好繫統設計藍圖

前端架構師職責：

● 體繫設計——清晰描繪產品和代碼的最終形態
● 工作規劃——制定完整開發工作流
● 監督跟進——保證項目高效率完成

本書展示了一名成熟的前端架構師對前端開發全面而深刻的理解。作者結合自己在Red Hat公司的項目實戰經歷，探討了前端架構原則和前端架構的核心內容，包括工作流程、測試流程和文檔記錄，以及作為前端架構師所要承擔的具體開發工作，包括HTML、JavaScript和CSS等。

【作者介紹】

Micah Godbolt，前端架構師，作家，播客播主，世界ji開源大會的培訓師和演講師。他在個人博客（https://micahgodbolt.com）中經常大力推廣前端架構、Sass、視覺還原測試和基於模式的設計方法。他出生於太平洋西北地區，目前和妻子以及兩個孩子定居於波特蘭的郊區。

【譯者介紹】

潘泰燊

畢業於廣東外語外貿大學，曾就職於騰訊、百度等互聯網公司，參與過騰訊QQ空間、百度地圖等海量數據業務的Web開發工作，現就職於富途網絡。

張鵬
碩士畢業於中山大學，曾就職於百度、騰訊等知名互聯網公司，參與過基於LNMP架構的億級別互聯網應用的設計與實現，目前從事NodeJS與前端開發。

許金泉
畢業於深圳大學，畢業後加入百度FEX，曾主導UEditor、百度國際化瀏覽器等前端開發工作，現就職於騰訊雲。

【審校介紹】

李弦
華為2012實驗室UCD交互設計師，Monash University交互設計碩士，前新東方英語教師，廣東外語外貿大學英語專業八級。

前言 xi
第一部分引言
第1 章 前端架構原則7
第2 章 Alpha 項目11
2．1慢而有力的開端11
2．2全副武裝12
第3 章 前端架構的核心15
3．1圍繞四個核心工作15
3．2四個核心的含義16
第二部分代碼核心
第4 章 HTML19
4．1過去處理標記的方法19
4．1．1程序式標記：自動化程度 100%，可控程度 0%19
4．1．2靜態標記：自動化程度 0%，可控程度 100%20
4．2平衡可控性和自動化21
4．3這一切背後的設計繫統22
4．4模塊化 CSS 理論的多面性22
4．4．1OOCSS 方法23
4．4．2SMACSS 方法23
4．4．3BEM 方法24
4．5選擇適合的方案25
第5 章 CSS27
5．1特性之爭與繼承之痛28
5．2一種現代的、模塊化的方法30
5．3其他有助益的原則32
5．3．1單一職責原則32
5．3．2單一樣式來源33
5．3．3組件修飾符34
5．4小結35
第6 章 JavaScript37
6．1選擇框架37
6．2維護整潔的 JavaScript 代碼38
6．2．1保持代碼整潔38
6．2．2創造可復用的函數38
6．3小結40
第7 章 Red Hat 代碼41
7．1過多的依賴41
7．2嚴重的位置依賴問題42
7．3設計分解42
7．4組件分類43
7．5BB 鳥規則44
7．6編寫你自己的規則44
7．7每個標簽指定唯一的選擇器46
7．7．1單一責任原則46
7．7．2樣式隻有單一的來源47
7．7．3可選的修飾符47
7．7．4可選的上下文50
7．8語義化的網格53
第三部分流程核心
第8 章 工作流57
8．1過去的開發工作流57
8．2現代的開發工作流58
8．2．1需求58
8．2．2原型設計58
8．2．3程序開發58
8．3前端工作流59
8．3．1必要的工具59
8．3．2本地部署59
8．3．3編寫用戶故事60
8．4開發61
8．5發布62
8．6提交編譯後的資源62
8．7持續集成的服務器63
8．7．1標簽分支64
8．7．2究竟為什麼要這麼做64
8．8發布渠道64
第9 章 任務處理器67
9．1在任務處理器中完成一切68
9．2在項目中使用任務處理器69
9．3有明顯的優勝者嗎71
第10 章 Red Hat 流程73
10．1征服最後一英裡73
10．2模式驅動的設計繫統75
第四部分測試核心
第11 測試87
11．87
11．1．1更多重用88
11．1．2更好的測試88
11．2測試驅動的開發88
11．3一個測試驅動的例子89
11．4測試覆蓋率要多大纔足夠90
11．4．1解決分歧點90
11．4．2從測試覆蓋率開始90
第12 章 性能測試91
12．1制定性能預算91
12．1．1競爭基線92
12．1．2平均基準92
12．2原始指標93
12．2．1頁面大小93
12．2．2HTTP 請求次數94
12．3計時度量94
12．4混合度量標準95
12．4．1PageSpeed 分數95
12．4．2Speed Index 指標95
12．5設置性能測試95
12．5．1Grunt PageSpeed 插件96
12．5．2Grunt Perfbuget 插件96
12．6小結97
第13 章 視覺還原測試99
13．1常見的質疑99
13．1．1不了解情況的開發者100
13．1．2不一致的設計100
13．1．3舉棋不定的決策者100
13．2一個經過測試的解決方案101
13．3視覺還原測試的多面性101
第14 章 Red Hat 測試方法103
14．1實踐視覺還原測試103
14．1．1測試工具集103
14．1．2設置 Grunt104
14．1．3測試文件104
14．1．4對比105
14．1．5運行全部測試用例106
14．1．6如何應對測試失敗107
14．1．7從失敗到成功107
14．1．8修改代碼以適應需求108
14．1．9將基準圖片放在組件目錄裡108
14．1．10獨立運行每個組件的測試集109
14．1．11測試的可擴展性110
14．2小結111
第五部分文檔核心
第15 章 樣式文檔117
15．1配置 Hologram117
15．1．1Hologram 的文檔注釋塊119
15．1．2Hologram 編譯流程120
15．1．3Hologram 小結121
15．2SassDoc121
15．2．1安裝 SassDoc121
15．2．2使用 SassDoc122
15．2．3探索 SassDoc123
15．2．4深入了解 SassDoc124
15．2．5內部依賴125
15．3小結127
第16 章 圖形庫129
16．1何為 Pattern Lab129
16．2運行 Pattern Lab131
16．3首頁模板133
16．4首變量134
16．5原子135
16．6發揮原子的作用135
第17 章 Red Hat 文檔137
17．1階段 1：靜態的樣式文檔137
17．2階段 2：重寫 Pattern Lab139
17．3階段 3：分拆模式庫和樣式文檔142
17．4階段 4：創建統一的渲染引擎143
17．5階段 5：自動創建新模式144
第18 章 總結147
作者介紹149
封面介紹149