iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
2
Modern Web

Angular 深入淺出三十天系列 第 2

[Angular 深入淺出三十天] Day 01 - MPA 與 SPA

在一個風雨交加、打雷閃電的夜晚,我正坐在電腦前專注地看著螢幕中的文章並喃喃自語著。

「哇賽!才幾年沒碰 Web Front-End,怎麼前端世界變了這麼多阿?!」
「什麼 MPA、SPA 的,真是天上一天、人間一年阿!!」

拿起一旁已放涼的咖啡一口氣喝下後,便繼續埋首於「書海」中...。


什麼是 MPA?

MPA (Multi-Page Application) 指的是一般傳統 Web Front-End 開發方式。一個畫面,一個 HTML 檔案。舉例來說:

<ul>
  <li><a href="index.html">首頁</a></li>
  <li><a href="pages/about.html">關於我們</a></li>
  <li><a href="pages/news.html">最新消息</a></li>
  <li><a href="pages/products.html">所有產品</a></li>
  <li><a href="pages/contact.html">聯絡我們</a></li>
</ul>

假設使用者點擊「首頁」這個連結時,瀏覽器會發出一個需求到伺服器說:我需要 index.html 這個檔案的資料,然後伺服器再把 index.html 這個檔案的資料回傳給瀏覽器顯示。

或者像是使用者填完表單按下送出,瀏覽器將資料送伺服器處理完後,伺服器再把接下來要呈現的 HTML 檔案回傳給瀏覽器。像是:

Imgur

上述看似再正常不過的流程,其實有個缺點:頁面重整

因為每個頁面都不是只有單純的 HTML 而已,還有其所需要的 CSS 與 JavaScript 檔,這些檔案都會在頁面重整的時候需要多花不少時間去下載,造成比較差的使用者體驗


什麼是SPA?

SPA (Single-Page Application) 顧名思義,就是整個網站實際上其實只有一個頁面。

為了解決上述提到的頁面重整的問題,我們可以使用 AJAX (Asynchronous JavaScript And XML,非同步的 JavaScript 與 XML) 的技術來處理,令其在送出資料且收到伺服器的回覆後,只針對需要更新的頁面元素來更新。如下圖所示:

Imgur

除了透過 AJAX 的方式來解決頁面重整的問題外,SPA 也有令前後端分離、提供使用者更偏向 Desktop/Mobile App 的使用者體驗等好處。

不過如果 SPA 這麼好?那大家為什麼都不用 SPA 的方式來開發就好?


MPA vs SPA

黃金無足色,白璧有微瑕。求人不求備,妾願老君家。 ─ 宋‧戴復古《寄興》

世界上沒有什麼事情是完美無缺的,SPA 亦然之。所以,我們來比較一下 MPA 與 SPA:

MPA 優點:

  1. SEO 較好
  2. 支援 no-script 模式

MPA 缺點:

  1. 使用者體驗較差
  2. 前後端相依性較高

SPA 優點:

  1. 前後端分離
  2. 使用者體驗較佳

SPA 缺點:

  1. 初次進入頁面時所需時間較久
  2. SEO 較差
  3. 不支援 no-script 模式

考慮到以上優缺點, MPA 跟 SPA 都有其各自較適合使用的情境。

舉例來說:比較偏向行銷類的網站如官網、活動網站等,或許會比較推薦使用傳統 MPA 的開發方式;比較偏向內部使用的系統如出勤系統、管理系統等,或許就會比較推薦使用 SPA 的開發方式。

當然也可以行銷類網站用 SPA,內部系統用 MPA,一切都看客戶、團隊或是公司怎麼選擇而已。

另外,除了上述這些之外,其實也還有其他層面的優缺點,不過在此我只列出上述這幾項來比較,其他就不再贅述。


參考資料


圖片來源


上一篇
[Angular 深入淺出三十天] Day 00 - 前言
下一篇
[Angular 深入淺出三十天] Day 02 - 為什麼是 Angular?
系列文
Angular 深入淺出三十天33

尚未有邦友留言

立即登入留言