最初，前端是沒有架構的，由於功能簡單的代碼毫無架構可言。經過一個簡單的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 也沒法應對大型的前端應用，微前端便又出如今咱們的面前，它解決了如下問題：框架
- 跨框架。在一個頁面上運行，能夠同時使用多個前端框架。
- 應用拆分。將一個複雜的應用拆解爲多個微小的應用，相似於微服務。
- 遺留系統遷移。讓舊的前端框架，能夠直接嵌入現有的應用運行。
複雜的前端應用發展了這麼久，也出現了一系列須要演進的應用：考慮重寫、遷移、重構，等等。前後端分離
本文由博客一文多發平臺 OpenWrite 發佈！異步