網頁

2018/12/11

前端演變的小歷史

本篇出自於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。

以上就是前端發展的脈絡,原來如此!

沒有留言:

張貼留言