最初，前端是沒(méi)有架構(gòu)的响牛，因?yàn)楣δ芎?jiǎn)單的代碼毫無(wú)架構(gòu)可言玷禽。通過(guò)一個(gè)簡(jiǎn)單的jQuery庫(kù)操作DOM就能完成的工作，無(wú)需復(fù)雜的設(shè)計(jì)模式和代碼管理機(jī)制呀打，也就不需要架構(gòu)來(lái)支持起應(yīng)用矢赁。
前端開(kāi)發(fā)的發(fā)展歷史分為以下幾個(gè)階段：
- 古典時(shí)代：由后端渲染出前端HTML，用Table布局贬丛，用CSS進(jìn)行簡(jiǎn)單的輔助
- 動(dòng)效時(shí)代：前端開(kāi)始編寫(xiě)一些簡(jiǎn)單的JavaScript腳本來(lái)做動(dòng)畫(huà)效果坯台，如輪播廣告
- Ajax異步通信時(shí)代：2005年，Google在諸多Web應(yīng)用中使用了異步通信技術(shù)如 Google地圖瘫寝，開(kāi)啟了Web前端的一個(gè)新時(shí)代
一旦前端應(yīng)用需要從后端獲取數(shù)據(jù)蜒蕾，就意味著前端應(yīng)用在運(yùn)行時(shí)是動(dòng)態(tài)地渲染內(nèi)容的，這便是Model（模型）UI層解耦焕阿。jQuery能夠提供DOM操作方法和模型引擎等咪啡。這時(shí)的開(kāi)發(fā)人員需要做下面兩件事：
- 動(dòng)態(tài)生成HTML。由后端返回前端所需要的HTML暮屡，再動(dòng)態(tài)替換頁(yè)面的DOM頁(yè)面撤摸。早期的典型架構(gòu)如jQuery Mobile，事先在前端寫(xiě)好模板與渲染邏輯，用戶的行為觸發(fā)后臺(tái)并返回對(duì)應(yīng)的數(shù)據(jù)來(lái)渲染文件
- 模板分離准夷。由后端用API返回前端所需要的JSON數(shù)據(jù)钥飞，再由前端來(lái)計(jì)算生成這些HTML。前端的模板再使用HTML衫嵌，而是使用諸如 Mustache 這樣的模板引擎來(lái)渲染HTML
由于HTML的動(dòng)態(tài)生成读宙、模板的獨(dú)立與分離，前端應(yīng)用開(kāi)始變得復(fù)雜楔绞。后端的MVC架構(gòu)進(jìn)一步影響了前端開(kāi)發(fā)结闸，便誕生了一系列操起的MVC框架，如Backbone酒朵、Knockout等桦锄。與此同時(shí)，在 Ryan Lienhart Dahl等人開(kāi)發(fā)了Node.js之后蔫耽，前端的軟件功能便不斷地改善：
- 更好的構(gòu)建工具结耀。誕生了諸如 Grant 和 Gulp 等構(gòu)建工具
- 包管理。產(chǎn)生了用于前端的包管理工具 Bower 和 Npm
- 模塊管理匙铡。也出現(xiàn)了AMD图甜、Common.js 等不同的模塊管理方案
隨著單頁(yè)面應(yīng)用的流行，前后端分離框架也成為行業(yè)內(nèi)的標(biāo)準(zhǔn)實(shí)踐慰枕。由此具则，前端進(jìn)入了一個(gè)新的時(shí)代即纲，要考慮的內(nèi)容也越來(lái)越多：
- API 管理具帮，采用了諸如 Swagger 的 API 管理工具，各式的 Mock Server 也成為標(biāo)準(zhǔn)實(shí)踐低斋。
- 大前端蜂厅，由前端來(lái)開(kāi)發(fā)跨平臺(tái)移動(dòng)應(yīng)用框架，采用諸如 Ionic膊畴、React Native掘猿、Flutter 等框架。
- 組件化唇跨，前端應(yīng)用從此由一個(gè)個(gè)細(xì)小的組件結(jié)合而成稠通，而不再是一個(gè)大的頁(yè)面組件。
系統(tǒng)變得越來(lái)越復(fù)雜买猖，架構(gòu)在前端的作用也變得越來(lái)越重要改橘。MVC 滿足不了開(kāi)發(fā)人員的需求，于是采用了組件化架構(gòu)玉控。而組件化 + MV 也無(wú)法應(yīng)對(duì)大型的前端應(yīng)用飞主，微前端便又出現(xiàn)在我們的面前，它解決了以下問(wèn)題：
- 跨框架。在一個(gè)頁(yè)面上運(yùn)行碌识，可以同時(shí)使用多個(gè)前端框架碾篡。
- 應(yīng)用拆分。將一個(gè)復(fù)雜的應(yīng)用拆解為多個(gè)微小的應(yīng)用筏餐，類(lèi)似于微服務(wù)开泽。
- 遺留系統(tǒng)遷移。讓舊的前端框架胖烛，可以直接嵌入現(xiàn)有的應(yīng)用運(yùn)行眼姐。
復(fù)雜的前端應(yīng)用發(fā)展了這么久，也出現(xiàn)了一系列需要演進(jìn)的應(yīng)用：考慮重寫(xiě)佩番、遷移众旗、重構(gòu)，等等趟畏。
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布贡歧！
