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

Jollen's Blog 使用 Github issues 與讀者交流討論。請點擊上方的文章專屬 issue,或 open a new issue

您可透過電子郵件 jollen@jollen.org,或是 Linkedin 與我連絡。更歡迎使用微信,請搜尋 WeChat ID:jollentw