在傳統的網頁設計中，我們更換頁面時會替換 HTML 頁面，這邊可以把網頁想像成一本書，而每翻一頁的行為就是替換一個 HTML Page，另外網頁的操作通常會希望具有同一的風格設計，如導覽列、頁首、頁尾等區塊會盡可能符合整體的設計指南(UI Guide)，而不同的網頁也會因需求呈現不同的結構，以求達到其所追求的目的與呈現。
更換頁面的設計其實在實務上並沒有太大的缺點，但那是在小規模的專案上，實際上當每個頁面都分別獨立時，便會導致個別頁面需要單獨維護，雖然內容頁本該如此，但當要修改的是導覽列上的 LOGO 時，這將會是一個艱鉅挑戰，實際上就像是有一本書上每一頁都寫著書本名稱，而寫書的人要去修改這個名稱一樣，或許在十幾頁內都還是可容許範圍，但當頁面上百上千時，人工就不是個好選擇了。
如本範例右邊的 Aside 均不作變更
SPA(single-page application)的中文是單頁式網頁應用，他的運作原理很單純，就是當我們在切換頁面時，他並不會切換整個 HTML PAGE，而是藉由負責動態操作的 JavaScript，來將想要變更的內容動態替換掉，這樣做的好處是我們不用再為了翻頁的行為而發愁，可以更有規範的進行頁面的管理，但同時想當然而頁面的複雜度就會直接拉升，最直觀的就是我們需要開始撰寫 JavaScript 來應對複雜的流程，也就是需要撰寫更多的程式碼才能實現操作。
SPA 雖然有他的複雜度，但他帶來的便利性確實無庸置疑，如 Google、Meta 等等大廠的應用，目前也多以 SPA 為主要開發選擇。
早期的網頁前端與後端沒有明確得分工，因為當時沒有行動裝置的出現，而現今為了應對RWD(Responsive Web Design)網頁設計，也就是所謂的響應式網頁(依據使用裝置而變換顯示樣式，如手機版本等)，專案的架構複雜度越來越龐大，因此前後端的分工才逐漸受到重視，前端工程師的工作就像是橋樑，需要跟UI、UX設計師與後端工程師進行緊密的搭配．
MVC三個英文字母所代表的意思：
簡單來說，MVC是將專案的各個部分功能進行抽象化，使其相互存在關聯性同時保有獨立性，好處是無論你再修改哪一端的程式時，都能確保另外兩端部用做任何修改，後端人員就能專注於模型(Model)的設計，功能的製作與演算邏輯等等就好，而介面(View)就直接交由介面設計師處理，最後再利用控制器(Controller)串接整個專案．
MVVM是MVC架構的延伸版本，其設計概念是將UI端從Server端抽離(前後端分離)，而在架構的設計上，則是將MVC中的控制器(Controller)轉換成了ViewModel，最大的區別在使用者在使用軟體時，是直接與介面(View)互動，當介面或模型(Model)產生變動時ViewModel會自動反應，並將結果同步在界面或模組上，因此它比較容易採用雙向資料流(data-binding)的概念，而MVC則偏向單向資料流的設計．
看影片追技術