淺談Web應用開(kāi)發(fā)的七大原則

　　對于Web開(kāi)發(fā)者而言，除了具擁有精湛的開(kāi)發(fā)技術(shù)外，還應具備一些軟技能。而針對富Web應用，開(kāi)發(fā)者應該注意哪些要點(diǎn)呢？小編認為如何讓用戶(hù)以最快的時(shí)間獲得想要的數據尤為重要，開(kāi)發(fā)者應注重以下七大原則。

　　網(wǎng)絡(luò )上有關(guān)Web開(kāi)發(fā)未來(lái)的熱門(mén)討論有很多，比如：JavaScript能否替代實(shí)現諸如歷史記錄、網(wǎng)頁(yè)瀏覽、頁(yè)面渲染等瀏覽器功能？開(kāi)發(fā)者應該放棄后端，直接進(jìn)行HTML渲染嗎？單頁(yè)面應用會(huì )流行起來(lái)嗎？

　　要解答上述問(wèn)題，我會(huì )嘗試以JavaScript為突破口，從用戶(hù)體驗方面進(jìn)行考慮;如何能讓用戶(hù)以最快的時(shí)間獲得想要的數據是我最為看重的。
 

 

　　1、服務(wù)器渲染是必須的

　　目前有個(gè)比較錯誤的分立觀(guān)點(diǎn)：“服務(wù)器渲染與單頁(yè)面應用的對立。”如果我們真的想最大程度地提升用戶(hù)體驗和性能，把這兩者區別對待、互為排斥都不是好的解決方法。

　　首先，當進(jìn)行頁(yè)面傳送時(shí)，互聯(lián)網(wǎng)連接本身有個(gè)理論速度限制。地理位置上兩點(diǎn)間的傳輸速度受到地域、帶寬、路由等因素影響;減少兩點(diǎn)之間往返的通訊次數顯得尤為關(guān)鍵。一個(gè)足夠靈活的系統應當能夠均衡好瀏覽器端和服務(wù)器端的代碼渲染工作，減少網(wǎng)站和網(wǎng)絡(luò )應用之間的差別。

　　2、即時(shí)響應用戶(hù)輸入

　　當用戶(hù)訪(fǎng)問(wèn)某個(gè)網(wǎng)站時(shí)，每個(gè)交互動(dòng)作都應該盡量做到少延遲、快響應。

　　在HTML中文檔的連接是透過(guò)超鏈或標簽完成的。當點(diǎn)擊這些鏈接時(shí)，瀏覽器會(huì )發(fā)送一個(gè)請求，這個(gè)請求被接收和響應前的用時(shí)是無(wú)法確定的。相反，JavaScript能夠針對用戶(hù)輸入做出即時(shí)的響應。例如谷歌或百度，現在我們在其首頁(yè)進(jìn)行輸入時(shí)，不用點(diǎn)擊搜索或確定，瀏覽器會(huì )自動(dòng)進(jìn)入搜索結果頁(yè)面;還有就是智能提醒，邊輸入邊提醒的功能也是非常人性化的。

　　3、響應數據/狀態(tài)變更

　　現在無(wú)論是采用傳統的頁(yè)面刷新還是AJAX交互來(lái)對靜態(tài)頁(yè)面執行更新都顯得稍稍落伍了。目前更好的做法是自行更新(self-updating)。

　　如果有款應用同時(shí)打開(kāi)了多個(gè)標簽/頁(yè)面，如果用戶(hù)進(jìn)行了登出操作，所有已打開(kāi)的標簽都應該能同時(shí)失效。要想做到類(lèi)似的自行更新，狀態(tài)協(xié)調(state reconciliation)是需要多加考慮的。在只是更新少量數據的參合，我們往往很容易忽略了長(cháng)時(shí)間連接中斷后該如何讓程序作出正確響應。比方說(shuō)休眠電腦數天后再打開(kāi)，我們的程序該如何對這個(gè)狀態(tài)(如機器狀態(tài)標識碼)進(jìn)行處理呢?如果我們想在初始頁(yè)面傳送數據，在客戶(hù)端腳本裝載前必須確保數據是可訪(fǎng)問(wèn)的。一旦發(fā)生連接中斷，腳本建立的初始連接必須能夠進(jìn)行會(huì )話(huà)恢復。
 

 

　　4、控制與服務(wù)器的數據交換

　　在萬(wàn)維網(wǎng)中，客戶(hù)端和服務(wù)器端的數據交換一般限于已下幾種形式：

　　點(diǎn)擊連接，GET獲取了新的頁(yè)面，然后渲染這個(gè)頁(yè)面；

　　通過(guò)POST或GET提交表單，然后渲染新頁(yè)面；

　　異步裝入一個(gè)圖像或對象，然后渲染它。

　　其中，上述第二種方式最容易出問(wèn)題。從性能角度來(lái)看，不斷觸發(fā)新頁(yè)面來(lái)發(fā)送數據是個(gè)效率極差的做法。

　　現在網(wǎng)絡(luò )上有豐富的APIs(如XMLHttpRequest,EventSource)不但能幫助我們很好地控制數據流向，同時(shí)能幫助增強用戶(hù)體驗，如表單的填寫(xiě)、發(fā)送。

　　如前述的狀態(tài)協(xié)調，如果程序檢測到連接中斷后，把數據暫存起來(lái)將能幫助日后的會(huì )話(huà)恢復。服務(wù)工作器(Serviceworker)的引入在這時(shí)就變得非常重要了。它能夠讓JavaScript Web應用在后臺運行。即使程序沒(méi)有開(kāi)啟，我們仍然能夠在后臺同步用戶(hù)數據。

　　5、增強歷史記錄處理

　　一般來(lái)說(shuō)，頁(yè)面狀態(tài)的過(guò)渡依賴(lài)于URL的變更;這給我們帶來(lái)了增強歷史記錄管控的機會(huì )。

　　例如，我們通過(guò)手機應用查看商品時(shí)，發(fā)現了心儀物品，一般情況下如果這時(shí)候進(jìn)行購物車(chē)操作都會(huì )中止當前界面的訪(fǎng)問(wèn);購物完畢后點(diǎn)擊返回，如果先前已經(jīng)翻看了很多頁(yè)并滾動(dòng)到某個(gè)位置，如果這時(shí)能根據歷史記錄準確地返回之前的位置，用戶(hù)會(huì )對此非常贊賞的。再譬如，我們填寫(xiě)了某個(gè)表單，如果發(fā)送失敗，點(diǎn)擊返回后能自動(dòng)幫助用戶(hù)把已經(jīng)填好的數據進(jìn)行恢復，這也是能極大增強用戶(hù)體驗的。

　　6、推進(jìn)代碼變更

　　如果程序的代碼發(fā)生變更，采用什么方法來(lái)使客戶(hù)端對此做出正確響應是很重要的。

　　一個(gè)好的代碼更新推送機制是如果發(fā)現有新的版本，能夠及時(shí)提醒客戶(hù)端對此進(jìn)行選擇處理。又或者是在HTTP請求的頭部信息中附加版本號信息，讓服務(wù)器針對版本號作出正確處理。

　　更好的一個(gè)處理方法是進(jìn)行熱代碼重載(hot code reloading)。它的意思是不需要對整個(gè)頁(yè)面進(jìn)行刷新，而只是對變更關(guān)聯(lián)部分或模塊進(jìn)行在線(xiàn)更新。這需要對全局影響進(jìn)行全面評估，防止部分模塊更新后出現其它異常。

　　7、預先感知

　　一個(gè)豐富的JavaScript應用能夠有效識別用戶(hù)輸入并做出預感反饋。

　　典型的例子是當鼠標懸停在某個(gè)鏈接時(shí)，服務(wù)器已經(jīng)開(kāi)始著(zhù)手準備數據，這將極大地減少渲染新頁(yè)面用時(shí)。還有就是能針對鼠標動(dòng)作做出交互反饋，如移動(dòng)，碰撞，移出/入等。