Frontend Engineering－認識 Single Page Application（SPA）

jollen 發表於 September 19, 2014 1:06 AM

想開始學網站製作嗎？先看看這篇文章，認識「網站製作」：不只是寫寫 HTML 文件。

關於 Single Page Application（SPA）的討論，較早的學術文章，可以追溯到由 Delft University of Technology 的 Software Engineering Research Group，所發表的一份技術報告：Migrating Multi-page Web Applications to Single-page Ajax Interfaces[1]。Ali Mesbah 與 Arie van Deursen 在這份 2006 年的技術報告裡，提出一個很重要的問題：

"web applications have suffered from poor interactivity and responsiveness towards end users"

這個問題來自傳統的 Web Site 設計模式：「Multi-page」。為解決「poor interactivity and responsiveness」的問題，Single Page Application（以下簡稱 SPA）的設計模式（model）就被提出。從軟體工程（Software Engineering）的角度來看，SPA 必須有一個軟體框架，讓開發者以這個框架為基礎，來進行 Web Site 的開發；從這裡，可以很容易歸納出 2 個結論：

1. 傳統的 Web Site 採取多頁式（Multi-page）做法

2. 現在的 Web Site 開始轉移到 SPA 的觀念，採單頁式（Single-page）做法

從 Multi-page 到 Single-page，不只是將多個頁面，拼成一個頁面而已，而是提供 User 更偏向 Desktop application 的使用經驗[2]。實際上，將 Single-page 看做「把多個頁面組成一頁就好」是錯誤的觀念。怎麼讓 Single-page 的使用經驗，更像是 Desktop application 呢？第一個步驟，就是要把 UI 從 Server-side 移到 Client-side；第二個步驟，在 Client-side 實作 Application Logic。

這二個步驟就是學習 SPA 的第一課。學習 SPA 最好的方式，就是選擇一套適合自已的 SPA 框架，經由學習這個框架的過程，來理解上述這二個步驟的意義。SPA 觀念的提出，源自 AJAX 技術的流行；這麼多年來，有非常多能幫助我們實作 Single-page 的技術，甚致只用 jQuery AJAX 也可以做出 SPA。使用 jQuery AJAX 是一個做法，而且不需要學習像是 Backbone.js 或 AngularJS 的框架，但前提是，你要能接受不斷長高的 Callback Hell。當然，也有人把 Callback Hell 當做一個藝術，而樂此不彼。

無論如何，選擇一套 SPA 框架是比較建議的做法。好消息是，現在有許多優雅好用的方案，上述提及的 Backbone.js 與 AngularJS 是當中最知名的框架。

如果你不想殺雞用牛刀，也喜歡 Callback Hell 的自然美，其實可以在 Backbone.js（或其它框架）或 AJAX 之間做選擇。但差別在哪裡呢？以 Backbone.js 為例，它提供一些重要的機制：

1. Client-side URL Routing

2. Data Model

3. Model State

4. 整合 REST API

5. etc.

現在 Frontend 都要整合 REST API，所以使用 Backbone.js 會讓開發工作更便利、也更簡省時間。

O'Reilly 不久前出版了一本書，書名為：Developing Backbone.js Applications－Building Better JavaScript Applications[3]，更是直接了當地介紹，如何使用 Backbone.js 來製作 Single-page Application (SPA) Model 的 Web Frontend。

另外，只有平面設計的技能，現在並不足以幫助我們製作 SPA；換個角度來說，Frontend 製作，並不是用 Photoshop 等平面設計的工具，將設計好的 UI 製作成 HTML 文件。Frontend 與 Art Design 工作內容不同。比如說，Frontend 需要以 JavaScript 來撰寫 Application Logic，或是呼叫 REST API；正因為 Frontend 開發需要整合 REST API，所以最好能懂一點 Backend 的知識。這就是為什麼近年來，Full Stack 開發受到重視的原因。Art design 的工作可能只涉及美術設計。

最後，Frontend 的製作，並不是規定一定要使用 Single-page 的模式，但是從 User Experience 的角度來看，讓 Frontend 的操作就像是 Desktop Application，似乎是一個很棒的選擇。如果 Frontend 的 User Experience 就像是 Desktop Application，更可以使用打包工具，將 Web Frontend 打包成手機 App，還可以上架到商店。網站製作，已經不是以前的網站製作觀念了。所以，想要學習網站製作嗎？不如直接以 SPA 模式，開始你的第一個 Web Site 吧。

參考資源

[1]: Migrating Multi-page Web Applications to Single-page Ajax Interfaces, http://arxiv.org/pdf/cs/0610094v2.pdf

[2]: Single-page application, http://en.wikipedia.org/wiki/Single-page_application

[3]: Developing Backbone.js Applications, http://shop.oreilly.com/product/0636920025344.do

主選單

近期文章

我的工作

Frontend Engineering－認識 Single Page Application（SPA）

參考資源