前端，源自人機互操作。

前端架構需要定義機器互動介面設計滿足人類操控的體驗需求。

首要條件就是對前端架構基本模型元素有清晰定義：

⑤互動體驗場景

②互動行為

④互動規則

①互動需求

然後應用資料，資訊，知識所以表達的互動場景下的前端內容進行場景設計，實現一系列的人機互動行為組成的互動場景下的流程。

架構可以從內容開始形成內容序列，也可以從行為開始形成行為系列，最後以內容結束。

我理解的前端架構，是針對某個專案，整體技術選型和結構的一個模式。譬如：前端流行的框架react vue angular，針對你的專案大小和使用形式選擇某個框架，然後該框架配合哪些第三方外掛的使用等。只有先把整個架構搭建起來，才能讓整個團隊統一一種架構模式開發

好問題。

所謂架構，意味著你如何用程式碼組織自己的應用，想搞清楚架構就必須搞清楚前端應用由哪幾部分組成。

先說一個應用，無論是前端還是後端：

業務程式碼

log和監控

flighting：用來控制釋出覆蓋到的人群

自動化測試

部署

我們一個一個來說，這些大塊的分類在前端方面：

1. 業務程式碼：這裡就是大家常說的前端程式碼，常見框架如react，vue，angular都可以幫你規範程式碼的書寫和應用的資料模型。除此之外，你可能還需要考慮瀏覽器上的能力給你的應用帶來的提升，封裝他們以讓普通的開發者更方便呼叫。這裡同時也包括對於特定領域模型的建模，例如金融類和電商類，你可能考慮以不同的方式組織程式碼。這裡會用到非常多的庫，比如網路相關的bluebird，比如資料流相關的redux，flux，redux-saga之類的。總之這一層要從業務出發，制定合適的模型和架構。

2. log和監控。前端應用質量如何，速度怎樣，使用者如何使用，都需要藉助監控和log把他們記下來然後後面分析。這裡常見的如百度和google analysis，引用一個普通庫就可以。對於更精確的比如每一個請求如何，使用者的每一次點選如何，則需要自己設計和封裝。

4. 自動化測試。包含單元測試和端到端測試，一般沒精力做端到端就做單元測試。前端比較特殊在於使用者介面十分難測，因此就算不測介面，也要測核心邏輯，資料層邏輯，以及底層程式碼，來保證質量。這方面根據你選擇的庫，往往他們都會提供對應的單元測試解決方案，比如react的jest。

5.部署。現代應用都會以CI的形式配置應用部署，需要你配置webpack，然後選擇程式語言無論是ES6還是typescript，都可以。部署一般都是部署到CDN的服務上，自動編譯，自動測試，然後部署到CDN上，以及自定義的功能，比如是不是要先上測試環境，使用一段時間沒問題再上線上，或者預設先開百分之多少的流量切入之類的。

以上就是完整的前端架構，當然隨著應用階段和規模的不同，有一些也可以省去，比如flighting在使用者數量不大的時候就沒必要。CDN在應用初期也不需要開很多地區。自動化測試可能根據團隊狀況不同也有所取捨。log和監控也是一樣。

首先我們先來分開了解下前端和架構。前端指網站前臺部分，通俗來說就是執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。而架構是一個演變的過程。它指的不是隨著歷史的演變，而是隨著專案演變。我們通常說的架構，指的是架構模式，自創的架構很少。結合起來，前端架構包含以下幾個過程：

1、專案資訊收集。在所有的專案開始之前，首先要對即將要做的專案有針對性的進行有效資訊收集。

2、技術預研及選型。在充分掌握了專案資訊之後，我們需要選擇合適的前端框架來實現我們的專案。

3、目錄結構。清晰的目錄結構，會讓整個專案顯得有邏輯性，便於管理原始碼。

4、自動化構建。這個過程對整個團隊的開發效率以及專案的整理質量有很大關係，只需要關心開發過程中的業務邏輯。

5、基礎元件。在引入一些成熟的UI框架後，專案的基礎元件很大一部分都得到了解決。

6、通用解決方案。提供通用的解決辦法供所有開發者呼叫，避免多次重複解決。

瞭解架構模式，才能心有餘力的應對專案的發展。

在Web前端技術變化日新月異的今天，Web前端專案變的越來越複雜。前端架構也會隨著我們現在千變萬化的迭代需求，架構技術的演化，不僅是架構師也是我們每個開發人員都必須去關注的問題。下面，給大家詳細說一說前端構架！

2014年10月13日CSS開發者大會上，在新奧爾良會議中心一個擁擠的房間裡“舉起前端架構的旗幟”成了在一線奮鬥著的開發者們共同的訴求。在那之後，那些想要弄清楚自身定位以及在公司中所扮演的角色的開發者們發現，其實他們一直扮演著前端架構師的角色， 卻從來沒有擁有過這個頭銜，或者沒有足夠的信心去爭取這個職位所應具有的權力。

在大會召幾周之後，很多人把他們在Twitter上的個人簡介改成了“前端架構師”。

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

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

前端設計架構不是一勞永逸的工作，沒有任何設計在一開始就是完美的，也沒有任何計劃可以一步到位。

1. 體系設計

試想一下，如果一棟建築沒有明確的構造設計，所有的重要事項都由建築工人直接決定，那麼就可能會出現這樣的情景:第一面牆用石頭壘，第二面牆用磚頭砌，第三面牆用木頭搭，第四面牆因為追求時髦而留空。

雖然網站的整體外觀和風格基調完全由經驗豐富的視覺設計師決定，但前端架構師掌控 著背後的前端開發方法和系統設計哲學。透過設計所有前端開發人員都要遵循的系統規範，前端架構師清晰描繪了產品和程式碼的最終形態。

一旦前端架構師建立起了系統設計的規範，專案就擁有了可以衡量程式碼質量的標準，否 則我們如何判斷程式碼是否達標呢？一個精心設計的系統，應當具備完善的檢驗機制，並做出適當的取捨，以保證系統中的程式碼有實質的價值，而不是簡單的堆砌。

2. 工作規劃

有了清晰的結構設計之後，就需要制定開發工作流了。開發人員寫一行程式碼並且提交到線上需要經過什麼步驟？舉一個最簡單的例子，這個過程包括使用 FTP 登入伺服器，修改一個檔案並儲存。然而，對於大多數專案而言，完整的工作流可能會用到多種工具，如版本控制器、任務排程器、CSS 處理器、文件工具、測試元件和伺服器自動化工具等。

前端架構師的目標是設計出能流暢運轉的系統。這個系統不僅能高效快速地啟動，還可以透過語言分析、測試用例、文件記錄等方法持續地提供有效的反饋，並且大幅減少由於重複操作而產生的人為錯誤。

3. 監督跟進

前端架構設計絕不是一勞永逸的工作。沒有任何設計在一開始就是完美的，也沒有任何計劃可以一步到位。客戶和開發人員的需求會隨著時間改變。在某個階段執行得很好的開發流程，隨後也可能需要重新調整，以便提高效率、減少錯誤。

前端架構師的一個非常重要的能力，就是能夠持續地最佳化工作流程。如今各種各樣的構 建工具可以讓我們很方便地改變工作方式，並通知到每一位開發人員。

有些人問前端架構師是否等同於管理角色，不再需要寫業務程式碼。前端架構師不僅要寫更多程式碼，更要會用多種程式語言，還要使用大量的工具。程式碼量並未減少，只是程式碼的讀者發生了改變。前端開發人員面向終端使用者寫程式碼，而前端架構師面向的則是團隊裡的開發人員。

1. 程式碼

歸根結底，所有的網站都是由一堆文字檔案和資原始檔組成HTML、CSS、JavaScript的。當我們面對製作網站所產生的大量程式碼時，就會發現為程式碼和資源設定一個期望是多麼重要。

2. 流程

怎麼用工具和流程構建一個高效且避免出錯的工作流是一個重要的思考。工作流變得越來越複雜，那些用於構建它們的工具也同樣如此。這些工具在提高生產力、加快效率和保持程式碼一致性上帶來了驚人的效果，但也伴隨著過度工程化和抽象化的風險。

3. 測試

要構建一個可擴充套件和可持續最佳化的系統，必須保證新程式碼與老程式碼能夠很好地相容，我們的程式碼不會孤立存在，它們都是大型系統中的一部分，建立覆蓋面廣泛的測試方案，能確保老程式碼還能正常執行。

4. 文件

設計文件是你同他人交流的工具，來闡述你的設計決策是什麼，來闡明你的設計決策是什麼以及為什麼你的決策是好的。如果不是團隊中的重要成員要離開，幾乎都不會意識到文件的重要性。