單頁面應用簡介

from URLs:

http://top.jobbole.com/10838/

http://segmentfault.com/a/1190000000607661

http://www.csdn.net/article/2012-12-10/2812658-Single-Page-Applications

http://www.oschina.net/translate/ux-single-page-websites

http://zhuanlan.zhihu.com/guozhimin/19833468

什麼是單頁應用？

單頁應用是指在浏覽器中運作的應用，它們在使用期間不會重新加載頁面。像所有的應用一樣，它旨在幫助使用者完成任務，比如“編寫文檔”或者“管理Web伺服器”。可以認為單頁應用是一種從Web伺服器加載的富用戶端。

單頁應用給傳統網站帶來的好處？

相對于傳統網站，我們認為單頁應用的主要好處是：

它提供了更加吸引人的使用者體驗。單頁應用可以做到一舉兩得：桌面應用的即時性和網站的可移植性和可通路性。

單頁應用可以和桌面應用一樣渲染—單頁應用隻需要重繪界面上需要變化的部分。相比之下的傳統網站，許多使用者操作都會重繪整張頁面，結果是當浏覽器從伺服器擷取資料時，頁面會假死并有“閃爍”現象，然後再重繪頁面上的所有東西。如果頁面很大，伺服器又繁忙，或者網絡連接配接很慢，這種“閃爍”現象會持續好幾秒鐘甚至是更長時間，使用者隻得猜測頁面什麼時候才可以再次使用。與單頁應用的快速渲染和即時回報相比，這是一種很恐怖的體驗。

單頁應用可以擁有和桌面應用一樣的響應速度—盡可能地把（臨時的）工作資料和處理過程從服務端轉移到浏覽器端，單頁應用由此把響應時間減至最小。單頁應用在本地擁有大多數需要決策判斷的資料和業務邏輯，是以是很快的。隻有資料驗證、授權和持久存儲必須要放在服務端，原因我們會在第6章到第8章中進行讨論。傳統網站的大多數應用邏輯在服務端，對大部分的使用者輸入的響應，他們必須等待一個“請求/響應/重繪”的循環周期。與接近即時響應的單頁應用相比，這需要花費幾秒鐘的時間。

單頁應用可以和桌面應用一樣，把它的狀态通知給使用者—當單頁應用确實必須等待伺服器的響應時，可以動态地顯示進度條或者繁忙訓示器，是以使用者不會因延時而困惑。相比傳統的網站，使用者實際上隻能猜測頁面何時加載完并可用。

單頁應用像網絡一樣，幾乎随處可以通路—不像大多數的桌面應用，使用者可以通過任務網絡連接配接和适當的浏覽器通路單頁應用。如今，這一名單包括智能手機、平闆電腦、電視、筆記本電腦和台式計算機。

單頁應用可以像網站一樣即時地更新和釋出—使用者不需要做任何事就能明白它的好處：他們隻要重新加載浏覽器就行了。維護軟體的多個并存版本的麻煩在很大程度上消除了。開發單頁應用的作者，在一天之内就能建構和更新很多次。桌面應用經常需要下載下傳并且安裝新版本需要管理通路權限，版本之間的間隔可能是很多個月或者很多年。

單頁應用和網站一樣，是跨平台的—和大多數的桌面應用不一樣，精心編寫的單頁應用可以在提供現代HTML5浏覽器的任意作業系統上運作。盡管這通常被認為是對開發人員的好處，但對很多同時使用多種裝置的使用者來說是非常有用的，比如工作時用Windows，在家用Mac，Linux伺服器，Android手機和Amazon平闆電腦。

所有這些好處意味着，你可能會想把下個應用做成單頁應用。每次點選後都會重新渲染整張頁面的笨拙網站，容易日益疏遠富有經驗的使用者。精心編寫的單頁應用具有互動和快速響應的界面，還伴有通路網絡的功能，這将幫助我們把客戶留在屬于他們的地方：使用我們的産品。

關于單頁Web應用

單頁Web應用（single page web application，SPA）無疑是目前網站開發技術的弄潮兒，很多傳統網站都在或者已經轉型為單頁Web應用，新的單頁Web應用網站（包括移動平台上的）也如雨後春筍般湧現在人們的面前，如Gmail、Evernote、Trello等。如果你是一名Web開發人員，卻還沒開發過或者甚至是沒有聽說過單頁應用，那你已經Out很久了。

單頁Web應用和前端工程師們息息相關，因為主要的變革發生在浏覽器端，用到的技術其實還是HTML+CSS+JavaScript，所有的浏覽器都原生支援，當然有的浏覽器因為具備一些進階特性，進而使得單頁Web應用的使用者體驗更上一層樓。關于單頁應用的優點和缺點，網上講解的文章有很多，這裡就不展開論述了。 單頁Web應用，顧名思義，就是隻有一張Web頁面的應用。浏覽器一開始會加載必需的HTML、CSS和JavaScript，之後所有的操作都在這張頁面上完成，這一切都由JavaScript來控制。是以，單頁Web應用會包含大量的JavaScript代碼，複雜度可想而知，子產品化開發和設計的重要性不言而喻。

随着單頁Web應用的崛起，各種架構也不斷湧現，如Backbone.js、Ember.js、Angular.js等，還有RequireJS等子產品化加載庫。但是，本書沒有講解這些架構和子產品化加載庫，這也正是我最喜歡這本書的原因。作者坦言自己很少使用架構，認為架構的限制過多，一旦不符合架構本身的設計哲學，結果可能适得其反。在翻譯的過程中，曾多次想給作者鼓掌，因為我一直以來的觀點和想法多次和作者的不謀而合。當然我和作者一樣，也并不反對使用架構。不管是按照書中的方法來開發，還是決定使用其他可用的架構庫，書中的思想都是适用的。

本書作者主要是介紹他們多年來開發單頁Web應用網站的經驗，他們已經從中提煉出單頁Web應用的架構設計，這些架構設計思想是本書的精華所在，是本書最有價值且最值得回味和學習的東西。我特别欣賞作者那種毫無保留的分享精神和對技術認真嚴肅的态度，講解的過程中一直擔心遺漏了什麼，結果使得本書的“篇幅”大大超出了他們最初的計劃。

關于封面插圖

本書封面上的圖檔的标題是“Gobenador de la Abisinia”，或曰阿比西尼亞州長，今天叫做埃塞俄比亞。這幅插圖取自首次于1799年出版的“西班牙地區服飾習俗概略”。

本文摘自即将上市的《單頁Web應用：JavaScript從前端到後端》

單頁Web應用或引領下一代Web新趨勢？

摘要：一門新的技術誕生總會引來一番争議，單頁Web應用程式也不例外，其最大的優勢在于使用者體驗，對于内容的改動不需要加載整個頁面；對伺服器壓力很小，消耗更少的帶寬，與面向服務的架構更好地結合。使用HTML+CSS+JavaScript編寫應用程式，能使更多的開發者都加入到程式開發的行列。

作者Steven Willmott是3scale網站的CEO，3scale為超過100家網絡提供API服務，其中包括Skype等，也擁有超過60000名開發者為其程式設計；此外，他還為programmableweb和Gluecon社群做貢獻。本文Steven為我們解讀了利用HTML+JavaScript編寫應用程式将引領下一代Web新趨勢。

在舊金山創業公司3scale網站上經常有人會問道：“究竟什麼樣類型的Web架構會成為最終的赢家？是HTML5還是App+API？”我們的答案非常簡單：“将兩者集合。” 來自Alexander Aghassipour和Shajith Chacko發表的這篇文章講述了單頁應用程式是如何建立而來的。文章講述了Web應用設計趨勢——利用JavaScript并通路核心API将多頁的Web應用轉換成單頁的應用。開發單頁Web應用利器新的前端架構包括Backbone.js，Ember.js，Angular.js以及Meteor；使用Gmail和Google Docs對于單頁模式來說早已不是稀奇之事，Trello正是使用單頁面程式元素（比如infinite scrolling/loading，in-line content無限滾動/加載，内鍊内容）；此外，像Twitter、Facebook、Pintrest這些大型的社交網站都使用了單頁面程式設計元素。

單頁面應用是指使用者通過浏覽器加載獨立的HTML頁面并且無需離開此導航頁面，這也是其獨特的優勢所在。對使用者操作來說，一旦加載和執行單個頁面應用程式通常會有更多的響應，這就需要傳回到後端Web伺服器，而單頁面應用為使用者提供了更接近一個本地移動或桌面應用程式的體驗。

單頁Web應用程式的優點：

首先，最大的好處是使用者體驗，對于内容的改動不需要加載整個頁面。這樣做好處頗多，因為資料層和UI的分離，可以重新編寫一個原生的移動裝置應用程式而不用（對原有資料服務部分）大動幹戈。

單頁面Web應用層程式最根本的優點是高效。它對伺服器壓力很小，消耗更少的帶寬，能夠與面向服務的架構更好地結合。

單頁Web應用程式的缺點：

雖然還有一些曆史遺留問題（大部分是針對HTML5的改進）以及SEO。如果你看中SEO，那就不應該在頁面上使用JavaScript，你應該使用網站而不是Web應用。目前該技術還存在一些争議，但這并不是重點，因為這種類型的體系架構為SAAS Web Apps提供了一個極大的可用性。

單頁Web應用程式的結構很簡單：首先傳遞HTML文檔架構；然後使用JavaScript修改頁面；緊接着再從伺服器傳遞更多資料然後再修改頁面，如此循環。從性能的角度看，在現代浏覽器中單頁面Web App已經能夠和普通應用程式相媲美，而且幾乎所有的作業系統都支援現代的浏覽器。使用HTML+CSS+Javascript編寫應用程式，能使更多的人們都加入到程式開發的行列。

這足以說明，在Web設計過程中标志着Web将呈現一種新的趨勢，它将一個分離的功能層作為API并将表示層用APP的形式展現出來 (HTML5或Native)：

單頁面+API模式比基于應用程式的HTML多重頁面更加靈活，因為底層API可用于多種不同的上下文、形式因素和裝置類型。一旦網頁内置了API，能夠滿足客戶不同需求（比如合作夥伴vs最終使用者）。

該模式意味着本地Web應用能夠為使用者無論是基于什麼平台提供更接近一個本地移動或桌面應用程式的體驗。服務平台的移動後端比如Stackmob、Parse、Appcelerator、Kinvey以及Kii借助一些标準的API後端元素可提供跨平台使用者體驗。

協定（如openAuth (oAuth) 成為作為使用者授權的黃金标準已被廣泛采用，提供了一個共同的模式。從應用程式和内容中将單獨登入/授權問題分離出來。也就是說使用者的身份可以從内容、功能和使用者體驗中清晰地分離出。

一個單頁面Web應用程式就是一個Web應用程式，但結構不同。其中最重要的是：在第一次請求的時候，所有的标記語言（HTML）就已經傳輸到用戶端，其餘的請求都通過REST API擷取JSON資料，資料的傳輸通過Web Socket API或遠端過程調用。單頁面應用程式可以說是分拆Web技術的最後一步——通過分離(css)内容，改進架構（XML和 XSLT）上的靈活性，調用伺服器（AJAX）再到解壓應用程式的導航頁面結構。是以，這在Web發展中是個曆史性的轉折點。

目前這隻是單頁面Web應用開發的初期，但可以看出将單頁面應用、APIs以及JavaScript結合在一起将成為許多流行應用的規範。

是以，當被問到“HTML5是App+API？”，我們會說，“兩者皆是——将兩者結合在一起要比以往快很多。”單頁面應用是一個塊非常大的拼圖。當然，導航、曆史性和SEO等問題也成為單頁面Web應用的诟病。

那麼，綜上所述，您怎麼看呢？

相對于傳統網站，單頁Web應用的優勢在哪裡？

一種SPA（單頁面應用）架構（算了，不讓轉載，再聯系嫌麻煩）