本篇出自於TechBridge 技術共筆部落格 - 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR；轉載於數位時代
我對於前端並不是很了解，這篇文章淺顯易懂，讓我了解前端的演變。
前端的演進過程大致如下。
一開始只有簡單的HTML，CSS，純JavaScript的靜態網站。
接著演變成動態網站，前端的內容開始從後端取得。HTML，JavaScript，CSS和後端程式碼混雜在一起。此時頁面是由後端渲染。以Java來說就是在jsp技術，並在jsp裡面寫scriptlets後端的程式碼。例如下面<% ... %>包夾的部分即為scriptlets。
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
但業務邏輯和畫面渲染的程式碼全混雜在一起，非常難以理解和維護，所以開始前後端分離，也就是把畫面和業務邏輯的程式碼分開的MVC(Model-View-Controller)架構。Model負責處理業務邏輯，View負責畫面渲染與呈現，Controller負責View與Model的溝通。
<html>
<head>
<title>Display Page</title>
</head>
<body>
Student name is ${param.studentName} <br>
Student No is ${param.studentNo}
</body>
</html>
原本每一次更新頁面的內容都是由後端重新渲染並切換整個頁面，但為了提高使用者體驗，開始使用JavaScript與Ajax非同步技術，來達到更新頁面中部分區塊的資料，而非重新整個頁面切換一次。
因為非同步的使用者體驗很好，所以原本僅小部分頁面使用Ajax，進化到所有的頁面內容都不用刷新頁面，全部皆由Ajax來完成，這樣的網站又稱為SPA(Single Page Application)，單一頁面網路應用程式。
此時會發現若全部畫面都是由前端利用JavaScript動態產生的話，那後端的View要幹嘛? 因此後來演變成不再由後端渲染畫面（也就是越來越少用jsp了），前後端開始完全分離，前端就是單純的HTML，CSS，Javascript(jQuery)，後端變成提供資料的RESTful API。前後端以Ajax溝通。
但因為非同步呼叫後端API與畫面資料的渲染有時間差的問題，僅使用JavaScript或jQuery會在狀態管理上非常麻煩，所以有了Angular，React，Vue等前端框架來處理這些問題。
為了SEO讓搜尋引擎爬蟲可以找到網站內容，則一開始進入網頁的內容應該先由後端渲染一次，這樣才可以讓搜尋引擎容易找到，後續的資料更新才由前端以Ajax處理，這就是SSR(Server Side Rendering)
隨著手機流量漸漸超越桌機，前端的目標就邁向「可以逼近 Native App」的體驗，於是開始提倡PWA(Progressive Web App)。讓Web用起來像個App，看起來也像個 App。
以上就是前端發展的脈絡，原來如此！
沒有留言:
張貼留言