前端架構設計 (Front-End Architecture: A Modern Blueprint for Scalable and Sustainable Design Systems) 前端架构设计

本書展示了一名成熟的前端架構師對前端開發全面而深刻的理解。

作者結合自己在Red Hat公司的項目實戰經歷，探討了前端架構原則和前端架構的核心內容，包括工作流程、測試流程和文檔記錄，以及作為前端架構師所要承擔的具體開發工作，包括HTML、JavaScript和CSS等。

Micah Godbolt，前端架構師，作家，播客播主，世界ji開源大會的培訓師和演講師。

他在個人博客（https://micahgodbolt.com）中經常大力推廣前端架構、Sass、視覺還原測試和基於模式的設計方法。他出生於太平洋西北地區，目前和妻子以及兩個孩子定居於波特蘭的郊區。

【譯者介紹】

潘泰燊
騰訊高級前端工程師，AlloyTeam團隊成員，曾任百度國際化應用商店前端組長、騰訊QQ空間UI開發工程師，擅長Hybrid App的開發調試，關注Web全棧與性能優化。

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

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

前言

第一部分引言

第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章RedHat代碼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章RedHat流程73 
10.1征服最後一英里73 
10.2模式驅動的設計系統75 

第四部分測試核心

第11章單元測試87 
11.1單元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.2SpeedIndex指標95 
12.5設置性能測試95 
12.5.1GruntPageSpeed插件96 
12.5.2GruntPerfbuget插件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章RedHat測試方法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深入了解Sass Doc124 
15.2.5內部依賴125 
15.3小結127 

第16章圖形庫129 
16.1何為PatternLab129 
16.2運行PatternLab131 
16.3首頁模板133 
16.4首變量134 
16.5原子135 
16.6發揮原子的作用135 

第17章RedHat文檔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