讀前端架構設計——我眼中的前端架構

前言

這是活動【活動】徵集《前端架構設計》書評的第三篇讀後感，來自成都@合拾童鞋的分享。

正文從這開始

最近剛讀完《前端架構設計》這本書，收穫頗豐，談談幾點理解。

本書主要結合作者在參與RedHat項目的網站架構經歷，介紹了前端架構的原則和核心，並圍繞著前端架構的四個核心：代碼、流程、測試、文檔，針對每一部分進行了深入的探討並提出了相應的實踐方案。作為一個剛工作不久的前端新手，書中詳細地介紹了前端架構的職責和使命，其中介紹的一些工具和概念之前都未聽說過，讀完之後也增加了我的見識，對於自己的職業規劃也有了更加清晰的認識。

前端是近年來一個新興的職業，在Web開發的早期，前端一直被認為是低端的名詞，「切圖仔、美工、網頁設計師......」，從這些名詞中，你可以想像到早期的「前端」的工作內容。架構從何而來？後來，在前後端一體的時代，「前端」寫頁面模板，後端讀取模板，生成靜態頁面發送給瀏覽器渲染，那時的架構是後端架構，採用的是後端MVC模式，前端只是MVC的V層。隨著Web2.0時代的到來，前端開始從刀耕火種的蠻荒時代向現代的工程化方向演進，前後端分離，前端開始慢慢建立完善的流程和體系，前端架構開始出現。

架構的本質是什麼？有人說是管理，對機器和代碼的管理，那麼前端架構是管理什麼呢？ 讀完本書你就知道，前端架構是對代碼、流程、測試、文檔的管理，最終目的是實現高效、可持續的工作流。架構師的職責是遵循前端架構的原則，開發和完善各種開發工具、自動化工作流，設計項目架構，提高整個團隊的開發效率，讓團隊成員可以更好的協同工作。

代碼

從代碼的管理來說，前端代碼主要包括HTML、CSS、JavaScript，前端架構的職責是建立代碼規範、提高代碼質量，讓代碼更加健壯。下面列舉幾點我的理解：

1、HTML語義化

2、OOCSS、ACSS、BEM、SMACSS，WTFCSS？你值得擁有

3、採用LESS、SASS、PostCSS對CSS進行處理

4、使用ESLint進行代碼檢查，牆裂推薦

流程

從流程管理來講，前端架構的職責是明確前端開發的各個環節，從需求分析到原型設計，到具體的代碼提交和測試，再到最終的部署和維護。在自動化和工程化日益完善的前端領域，你可以採用更先進的方法。通過設計更加完善細緻的自動化流程，才能構建出更加高效、更加健壯和可擴展的應用。具體來說，包括工作流設計、團隊協作工具、構建工具、持續集成等等。下面是我的幾點理解：

1、需求面向整個項目參與者：設計、後端、前端

2、Git進行團隊協作

3、採用Grunt、Gulp、Webpack、NPM等自動化構建工具

4、使用Jenkins、Travis CI等服務進行持續集成

5、框架選型

自動化構建工具的出現有效地解決了前端開發中的效率問題，至於工具的選擇，前端架構需要調研每種工具的特點，評估其優點和缺點，根據項目的需求選擇更加適合的工具。同樣，框架選型也是如此，Angular、React、Vue等MVVM框架一時炙手可熱，在項目的技術選型時，必須對整個技術架構考慮周全，包括可擴展性、可測試性等等。所謂框架，只是幫助我們解決問題的工具，提高開發效率，我們需要的是學習框架的思想，不要過度依賴框架。框架的選擇要根據適當的業務場景，如果Jquery最適合當前的業務，那就是最好的選擇。前端架構師的工作就是不斷探索和評估新的技術、平台、方法和框架。

測試

從測試管理來講，前端架構師的職責是通過構建完整的測試來把控網站和設計系統的開發，測試避免了架構師對整個應用的代碼進行檢查，而是使用各種測試工具來驗證應用程序是否正常工作。前端測試一般包括單元測試、集成測試、視覺還原測試、E2E測試等等，其實很多公司的前端是不會寫測試用例的，或者很少，可能是繁忙的業務導致沒有時間寫測試，但是，事實證明，寫測試用例的時間是值得的，寫測試可以在提交代碼之前驗證你的代碼是否是符合預期的。與測試相關的另外一個概念是測試覆蓋率，測試覆蓋率反映本次測試的函數或語句被測試到的比例。通過寫測試還可以提高開發人員書寫函數的健壯性。下面是我的幾點理解：

1、編寫測試用例，進行自動化單元測試

2、從各方面進行性能優化

3、確認所需的測試覆蓋率

4、評估前端測試的標準

文檔

對於文檔管理，前端架構的職責是建立開發的文檔並在項目開發過程中進行輸出，所謂文檔，就像Github項目的README一樣，一個優秀的項目應該有完善的文檔說明。同樣，在團隊項目中，特別是人員流動較為頻繁的項目，更加應該建立完善的文檔說明。此外，文檔用來總結項目的踩坑經驗，避免產生重複的工作量有很大的作用。下面是我的幾點理解：

1、採用Hologram、SassDoc等自動化文檔生成工具

2、建立項目Wiki，記錄踩坑經驗

總結

如書中所言，「對於任何優秀的架構而言，只要未到最後一刻，你的工作就不會結束。」只要需求變化，項目變得複雜，那麼架構也會發生變化。一個優秀的架構師的工作就是搭建一個解決問題的框架，讓團隊成員能在框架下進行協同工作，完成項目開發需求。

在別處看到這樣一句話，與諸君共勉。「多年以後，你再也不是那個切圖仔，而前端也不再是簡單的拼頁面。從最初我們高舉規範化大旗，什麼語意化命名，統一規範。到今天，我們對工程化的信仰。每個前端團隊也都在為自己的業務不斷探索，追求更加完善的工程化解決方案。」

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！