讀《前端架構設計》 兼談架構與框架

架構？框架？傻傻分不清楚

在中文裡面，“架構”和“框架”只有一字之差，你要問個普通人“架構”和“框架”有什麼區別，可能十有八九是說不清楚的。那麼在IT圈裡，這個問題的答案就很清楚嗎？搜一搜“架構 框架”關鍵字，排在前面的搜尋結果幾乎都是“架構和框架的區別”，可見在中文世界裡面這個問題是有很多人有疑惑的，否則也沒必要寫文章來澄清概念。

那麼Architecture（架構）和 Framework （框架）在英文世界裡面意思就很清楚嗎？搜尋 Framework vs Architecture ，會發現也有大量 What is the difference between framework and architecture? 這類的話題，可見 Architecture 與 Framework 的區別在英文世界裡也是一個 confusion 。

所以在讀《前端架構設計》這本書的時候，我發現還真有必要把“架構”和“框架”的概念和區別搞搞清楚。

---

什麼是架構？

前端架構是一系列工具和流程的集合，旨在提升前端程式碼的質量，並實現高效、 可持續的工作流。

上面這段是在本書第一章的第一句話，不知道你能否從這句話裡看出“架構”是個什麼意思？反正我看過這句後依然是很懵懂的。

當思考前端架構師的角色時，我總會聯想到傳統的建築設計師。

接下來的這句話，把架構師和建築設計師聯絡起來，有那麼點意思了，架構師是做設計，建築設計師也是做設計，有點相通。再來看一看原文是怎麼寫的 ——

When I think about the role of a frontend architect, I always think about the characteristics that it shares with that of a traditional architect.

對比“前端架構師”（frontend architect）和“傳統的建築設計師”（traditional architect）的英文原文，我們會立即豁然開朗 —— 原來“架構師”（architect）就是 “建築設計師”（architect）嘛！既然“架構師”就是“建築設計師”，那麼架構（architecture）和建築學（architecture）也就可以對應起來了！

我們看看維基百科是怎麼給建築學做定義的 ——

The style of design and method of construction of buildings and other physical structures.

翻譯過來：建築學是建築物或其他具體構造物的設計風格與建造方式。

再看看計算機領域裡的架構是怎麼定義的 ——

Computer architecture is a set of rules and methods that describe the functionality, organization, and implementation of computer systems.

翻譯過來：計算機架構是描述計算機系統的功能，組織和實現的一套規則和方法。

簡而言之，計算機世界裡的架構就是現實世界裡的建築學，都是規則和方法論以及具體的實現藍圖。

---

前端架構師的職責

有了前面的概念鋪墊，接下來的東西就好理解了

在建設過程中，建築設計師需要設計和規劃方案，並且跟進施工過程。這與前端架構師的工作有著異曲同工之妙，不同的是後者建造的是網站，而不是建築物。比起澆築混凝土， 建築設計師會在設計工程構圖的工作上傾注更多的精力。同理，相比編寫具體的程式碼，前端架構師更專注於開發工具和優化流程。

歸納起來，前端架構師的職責就是：（1）體系設計，建立系統設計的規範，清晰描繪產品和程式碼的最終形態 ；（2）工作規劃，設計出能流暢運轉的系統，制定完整開發工作流；（3）監督跟進，能夠持續地優化工作流程，保證專案高效率完成。

那麼前端架構師是不是隻要做好管理工作，不再需要寫程式碼呢？作者的答案是否定的 —— 前端架構師不僅要寫更多程式碼，更要會用多種程式語言，還要使用大量的工具。程式碼量並未減少，只是程式碼的讀者發生了改變。前端開發人員面向終端使用者寫程式碼，而前端架構師面向的則是團隊裡的開發人員。

---

架構與框架

前面寫了一堆，為的是搞清楚什麼是架構（architecture）和架構師（architect），現在再釐清什麼是框架（framework）就容易多了。

我們先看看建築學（architecture）裡的“框架”是什麼意思 —— 框架指建築工程中，由樑、柱等聯結而成的結構。

比如，建築師（architect）設計好了雷峰塔的外觀

看上去像是中國古代建築裡典型的磚木結構，但具體怎麼建就是涉及選框架（framework）的問題了。其實最後重建的雷峰塔並沒有採用傳統的磚木結構框架，而是用的鋼筋混凝土框架，甚至裡面還有電梯！

回到本書的內容裡，前端架構師除了要設計網站的外觀（HTML、CSS），還要負責Javascript的框架（framework）選型，你可以根據需要去選 Angular、React、Vue…… 當然，沒有哪個JavaScript框架是完美的，隨著技術的發展，任何框架（framework）也都會有過時的一天！

---

總結

《前端架構設計》一書讓我們瞭解什麼是前端架構，而前端架構師的工作又是什麼，也讓我們能夠釐清前端架構和前端框架之間的關係。

如果這是你第一次制定架構計劃，請記住你將要迭代很多次!不要把你所有的希望 寄託於一個單獨的解決方案、框架或者平臺，除非它一次又一次地被證明是有效的。