前端架構發展史

最初，前端是沒有架構的，因為功能簡單的代碼毫無架構可言。通過一個簡單的jQuery庫操作DOM就能完成的工作，無需複雜的設計模式和代碼管理機制，也就不需要架構來支持起應用。

前端開發的發展歷史分為以下幾個階段：

• 古典時代：由後端渲染出前端HTML，用Table布局，用CSS進行簡單的輔助
• 動效時代：前端開始編寫一些簡單的JavaScript腳本來做動畫效果，如輪播廣告
• Ajax異步通信時代：2005年，Google在諸多Web應用中使用了異步通信技術如 Google地圖，開啟了Web前端的一個新時代

一旦前端應用需要從後端獲取數據，就意味著前端應用在運行時是動態地渲染內容的，這便是Model（模型）UI層解耦。jQuery能夠提供DOM操作方法和模型引擎等。這時的開發人員需要做下面兩件事：

• 動態生成HTML。由後端返回前端所需要的HTML，再動態替換頁面的DOM頁面。早期的典型架構如jQuery Mobile，事先在前端寫好模板與渲染邏輯，用戶的行為觸發後臺並返回對應的數據來渲染文件
• 模板分離。由後端用API返回前端所需要的JSON數據，再由前端來計算生成這些HTML。前端的模板再使用HTML，而是使用諸如 Mustache 這樣的模板引擎來渲染HTML

由於HTML的動態生成、模板的獨立與分離，前端應用開始變得複雜。後端的MVC架構進一步影響了前端開發，便誕生了一系列操起的MVC框架，如Backbone、Knockout等。與此同時，在 Ryan Lienhart Dahl等人開發了Node.js之後，前端的軟體功能便不斷地改善：

• 更好的構建工具。誕生了諸如 Grant 和 Gulp 等構建工具
• 包管理。產生了用於前端的包管理工具 Bower 和 Npm
• 模塊管理。也出現了AMD、Common.js 等不同的模塊管理方案

隨著單頁面應用的流行，前後端分離框架也成為行業內的標準實踐。由此，前端進入了一個新的時代，要考慮的內容也越來越多：

• API 管理，採用了諸如 Swagger 的 API 管理工具，各式的 Mock Server 也成為標準實踐。
• 大前端，由前端來開發跨平臺移動應用框架，採用諸如 Ionic、React Native、Flutter 等框架。
• 組件化，前端應用從此由一個個細小的組件結合而成，而不再是一個大的頁面組件。

系統變得越來越複雜，架構在前端的作用也變得越來越重要。MVC 滿足不了開發人員的需求，於是採用了組件化架構。而組件化 + MV 也無法應對大型的前端應用，微前端便又出現在我們的面前，它解決了以下問題：

• 跨框架。在一個頁面上運行，可以同時使用多個前端框架。
• 應用拆分。將一個複雜的應用拆解為多個微小的應用，類似於微服務。
• 遺留系統遷移。讓舊的前端框架，可以直接嵌入現有的應用運行。

複雜的前端應用發展了這麼久，也出現了一系列需要演進的應用：考慮重寫、遷移、重構，等等。