富Web應用開發的七大原則
英文原文：7 Principles of Rich Web Applications
對于 Web 開發者而言，除了具擁有精湛的開發技術外，還應具備一些軟技能。而針對富 Web 應用，開發者應該注意哪些要點呢？原文作者 Guille 認為如何讓用戶以最快的時間獲得想要的數據尤為重要，開發者應注重以下七大原則。
譯文如下：
網絡上有關 Web 開發未來的熱門討論有很多，比如：JavaScript 能否替代實現諸如歷史記錄、網頁瀏覽、頁面渲染等瀏覽器功能？開發者應該放棄后端，直接進行 HTML 渲染嗎？單頁面應用會流行起來嗎？
要解答上述問題，我會嘗試以 JavaScript 為突破口，從用戶體驗方面進行考慮；如何能讓用戶以最快的時間獲得想要的數據是我最為看重的。
1. 服務器渲染是必須的
目前有個比較錯誤的分立觀點：“服務器渲染與單頁面應用的對立。”如果我們真的想最大程度地提升用戶體驗和性能，把這兩者區別對待、互為排斥都不是好的解決方法。
首先，當進行頁面傳送時，互聯網連接本身有個理論速度限制。地理位置上兩點間的傳輸速度受到地域、帶寬、路由等因素影響；減少兩點之間往返的通訊次數顯得尤為關鍵。一個足夠靈活的系統應當能夠均衡好瀏覽器端和服務器端的代碼渲染工作，減少網站和網絡應用之間的差別。
2. 即時響應用戶輸入
當用戶訪問某個網站時，每個交互動作都應該盡量做到少延遲、快響應。
在 HTML 中文檔的連接是透過超鏈或標簽完成的。當點擊這些鏈接時，瀏覽器會發送一個請求，這個請求被接收和響應前的用時是無法確定的。相 反，JavaScript 能夠針對用戶輸入做出即時的響應。例如谷歌或百度，現在我們在其首頁進行輸入時，不用點擊搜索或確定，瀏覽器會自動進入搜索結果頁面；還有就是智能提醒， 邊輸入邊提醒的功能也是非常人性化的。
只要在 Google 搜索欄敲任何一個鍵，都會直接跳入搜索結果頁面
3. 響應數據/狀態變更
現在無論是采用傳統的頁面刷新還是 AJAX 交互來對靜態頁面執行更新都顯得稍稍落伍了。目前更好的做法是自行更新(self-updating)。
如果有款應用同時打開了多個標簽/頁面，如果用戶進行了登出操作，所有已打開的標簽都應該能同時失效。要想做到類似的自行更新，狀態協調 (state reconciliation)是需要多加考慮的。在只是更新少量數據的參合，我們往往很容易忽略了長時間連接中斷后該如何讓程序作出正確響應。比方說休 眠電腦數天后再打開，我們的程序該如何對這個狀態(如機器狀態標識碼)進行處理呢？如果我們想在初始頁面傳送數據，在客戶端腳本裝載前必須確保數據是可訪 問的。一旦發生連接中斷，腳本建立的初始連接必須能夠進行會話恢復。
每個頁面都指向了同一個會話和登入狀態
4. 控制與服務器的數據交換
在萬維網中，客戶端和服務器端的數據交換一般限于已下幾種形式：
- 點擊連接，GET 獲取了新的頁面，然后渲染這個頁面；
- 通過 POST 或 GET 提交表單，然后渲染新頁面；
- 異步裝入一個圖像或對象，然后渲染它。
其中，上述第二種方式最容易出問題。從性能角度來看，不斷觸發新頁面來發送數據是個效率極差的做法。例如下面這個曾經令人抓狂的錯誤：
現在網絡上有豐富的 APIs (如 XMLHttpRequest,EventSource)不但能幫助我們很好地控制數據流向，同時能幫助增強用戶體驗，如表單的填寫、發送。
如前述的狀態協調，如果程序檢測到連接中斷后，把數據暫存起來將能幫助日后的會話恢復。服務工作器(Serviceworker)的引入在這時 就變得非常重要了。它能夠讓 JavaScript Web 應用在后臺運行。即使程序沒有開啟，我們仍然能夠在后臺同步用戶數據。
5. 增強歷史記錄處理
一般來說，頁面狀態的過渡依賴于 URL 的變更；這給我們帶來了增強歷史記錄管控的機會。
當瀏覽歷史頁面時，評論的折疊狀態應該得到保留
例如，我們通過手機應用查看商品時，發現了心儀物品，一般情況下如果這時候進行購物車操作都會中止當前界面的訪問；購物完畢后點擊返回，如果先 前已經翻看了很多頁并滾動到某個位置，如果這時能根據歷史記錄準確地返回之前的位置，用戶會對此非常贊賞的。再譬如，我們填寫了某個表單，如果發送失敗， 點擊返回后能自動幫助用戶把已經填好的數據進行恢復，這也是能極大增強用戶體驗的。
6. 推進代碼變更
如果程序的代碼發生變更，采用什么方法來使客戶端對此做出正確響應是很重要的。
一個好的代碼更新推送機制是如果發現有新的版本，能夠及時提醒客戶端對此進行選擇處理。又或者是在 HTTP 請求的頭部信息中附加版本號信息，讓服務器針對版本號作出正確處理。
更好的一個處理方法是進行熱代碼重載(hot code reloading)。它的意思是不需要對整個頁面進行刷新，而只是對變更關聯部分或模塊進行在線更新。這需要對全局影響進行全面評估，防止部分模塊更新后出現其它異常。
7. 預先感知
一個豐富的 JavaScript 應用能夠有效識別用戶輸入并做出預感反饋。
典型的例子是當鼠標懸停在某個鏈接時，服務器已經開始著手準備數據，這將極大地減少渲染新頁面用時。還有就是能針對鼠標動作做出交互反饋，如移動，碰撞，移出/入等。
這是一個用 jQuery 實現的感知鼠標動作的例子
寫在最后：
Web 仍然是當前信息傳播的最重要媒介之一。當我們不斷為頁面添加動態交互的同時，我們必須確保新技術能很好地做好承上啟下的角色。JavaScript 是開拓新局面的當頭先鋒，隨著其使用得更為廣泛更為深入，用戶體驗也會邁進新的臺階。
</a> <span id="shareA4" class="fl">
</span><a> </a>