2013-02-25

SPA - Single Page Application

SPA ( Single Page Application、Single Page Apps 或 Single Page Web Apps ) 的概念並不算新,就 Wikipedia 上面的說明來看,似乎是早在 2003 年就已經有在討論這個概念了,不過,「Single Page Application」這個詞是到了 2005 年才有人提出使用,而阿舍則是最近才有特別的注意到哩!SPA 的概念就和它的名字一樣顯顥易懂,就是,整個網站不像傳統的 HTML 網頁一樣,需要每做一個動作就更新一次網頁,而是像傳統的電腦軟體一樣,只變更顯示的內容而不需變更網頁哩 ! 概念很簡單,但是,實務上卻有不少的問題要考慮哩 !

SPA 示意圖
(Credit blog.nodejitsu.com)


看完阿舍上面提到的 SPA 概念後,應該也有不少人和阿舍一樣,在心中慢慢的浮出一個小小的問題,那就是,這不就是用 Ajax 就可以解決了嗎 ? 現在不是很多網站和網頁程式都有在用了嗎?這樣說似乎好像也沒有錯,不過,還是有差別,SPA 的網站或網頁程式並不只是用 Ajax 來讀取資料而已,重要的是,SPA 網頁真的只會有一個網頁,而這個網頁的設計方式要能夠回應使用者所使用的各種裝置並且複製使用者在電腦上使用軟體的經驗,讓使用者可以更容易和有效率的使用網站或網頁程式哩 !

隨著 HTML5 和 CSS 3 在各大瀏覽獲得普遍的支援以及陸續有不少以 JavaScript 開發的好用 UI Framework 出現 (如 Backbone.jsSammy.jsKnockout ....  等)後,從去年開始,SPA 的應用就變的更熱門了,而今年也人預估 SPA 會更加的熱門,但是,並不是所有開發者都支援網頁程式要以 SPA 的方式來開發,因為,有部份的人認為以 SPA 方式開發的網站不容易管理也不夠安全,而且,因為沒有了一頁一頁的網頁給搜尋引擎的爬蟲來爬,所以,在搜尋引擎最佳化 (SEO) 的工作上,需要花費額外的功夫才行,同時,因為沒有換頁,因此,需要自定狀態來取代傳統網頁程式以網址來做判斷的方式哩 !

阿舍是還沒有開始寫 SPA 的網頁程式,不過,就阿舍的認知來看,SPA 的需求應該是一直都有存在的,像網頁遊戲的網頁就是一個明顯的 SPA 的例子,只不過,在這之前,要寫出 SPA 這樣的網頁的話,都是需要透過瀏覽器安裝 Flash 或 Silverlight 之類的外掛 (Plugin)來達成 (這類採用外掛寫成的網頁程式有另一個名稱,叫做「RIA,Rich Internet Application),不過,近來拜 HTML5 + CSS3 + Javascript UI Framework 之賜,只要使用支援 HTML5 和 CSS3 的瀏覽器就可以執行複雜的 SPA 程式,因此,開發人員不必為了撰寫 SPA 網站而特別學習另一種開發方式,而使用者也不用額外安裝軟體,所以,讓開發 SPA 網頁程式的入門和使用門檻降低不少哩 !

不過,雖然 SPA 的開發和使用變的容易,但是,阿舍和大部份的人有一樣的想法,就是覺得,在現階段來說,並不是所有的網站和網頁程式都適合採用 SPA 的方式來開發,而是像遊戲和需要較多使用者操作的網頁程式應該會比較合適,還有,就是需要被使用在不同裝置的網頁程式會比較有需要,而如果是一般的網頁網站或單純的內容網站的話,阿舍就覺得會不太適合,因為花費時間來將這類型的網站轉換成 SPA 網站的話,並不一定會有比較好的效果和反應哩 !


參考資料:
http://en.wikipedia.org/wiki/Single-page_application
http://en.wikipedia.org/wiki/Rich_Internet_application
http://backbonetutorials.com/seo-for-single-page-apps/
http://readwrite.com/2013/02/22/html5-10-provocative-predictions-for-the-future
http://pandodaily.com/2012/12/06/html-javascript-and-the-app-ification-of-the-web/
http://blog.programmableweb.com/2012/12/13/single-page-web-applications-javascript-and-the-proliferation-of-apis/

推薦閱讀


有疑問? 問題還是沒解決嗎? 歡迎下方留言提問和討論 😁

1 則留言 :

凍仁翔 提到...

又上了一課啊!

張貼留言

歡迎留言提問和討論 .... 😁