在傳統的網頁設計中，我們更換頁面時會替換 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(Model-View-Controller)架構

MVC三個英文字母所代表的意思：

• 模型(Model)：程式的功能模組等，接手控制器(Controller)的工作進行處理．
• 介面(View)：使用者可以看到的畫面，也就是我們所謂的DOM（Document Object Model）
• 控制器(Controller)：負責轉發請求、控制流程等，並且針對各項請求進行處理．

簡單來說，MVC是將專案的各個部分功能進行抽象化，使其相互存在關聯性同時保有獨立性，好處是無論你再修改哪一端的程式時，都能確保另外兩端部用做任何修改，後端人員就能專注於模型(Model)的設計，功能的製作與演算邏輯等等就好，而介面(View)就直接交由介面設計師處理，最後再利用控制器(Controller)串接整個專案．

MVC架構示意圖架構

• Route（網頁連結等）：以網頁來說若沒有連結則出現404，成功便會對Controller發出請求
• Controller ：控制器會去與Model和View發送請求與接收資訊，為雙方溝通的橋樑
• Model：負責演算資料與DB取得資料等事宜，再將處理好的資料給Controller傳回給View
• View：負責在接受資料來呈現畫面等，也就是user interface
• User：使用者介面，會將資料丟回Controller並傳回給Model等
• DB:資料庫，負責存儲資料

MVVM(Model-View-ViewModel)

MVVM架構示意圖架構

• Route（網頁連結等）：以網頁來說若沒有連結則出現404，成功便會對Controller發出請求
• ViewModel ：控制器會去與Model和View發送請求與接收資訊，為雙方溝通的橋樑
• Model：負責演算資料與DB取得資料等事宜，再將處理好的資料給Controller傳回給View
• View：負責在接受資料來呈現畫面等，也就是user interface
• User：使用者介面，會將藉由操作 View 觸發 ViewModel
• DB:資料庫，負責存儲資料

MVVM是MVC架構的延伸版本，其設計概念是將UI端從Server端抽離(前後端分離)，而在架構的設計上，則是將MVC中的控制器(Controller)轉換成了ViewModel，最大的區別在使用者在使用軟體時，是直接與介面(View)互動，當介面或模型(Model)產生變動時ViewModel會自動反應，並將結果同步在界面或模組上，因此它比較容易採用雙向資料流(data-binding)的概念，而MVC則偏向單向資料流的設計．

前端熱門框架介紹

• Angula(angularjs.org) - 適合後端工程師學習
• Vue(vuejs.org) - 零基礎可學習
• React(reactjs.com) - 需盡可能有 JavaScript 開發經驗或基礎