在2015年 開發一個 Web App 必須瞭解的那些事

在過去的一年裏，我在從頭開始開發個人第一個重要的Web應用。經驗教會了不少之前不知道的東西，特別是在安全性和用戶體驗方面。

值得一提的是，我上一次嘗試構建的任何合理複雜性是在2005年。因此，在安全防護方面，我還有不少東西須要去補充。

即便在那些我已經知道或已經遇到過的東西以外，下面這個清單的細節在開發Web應用時也很是容易忘記，尤爲是你纔剛剛起步的時候。

這個清單可能在某些方面不盡詳細，若是你是一位經驗豐富的開發者，我懷疑這裏將不會有什麼東西會讓你感到驚奇。可是，我但願它對那些可能遺落了一些東西的人有幫助。

安全性

確認電子郵件：當用戶註冊時，你應該發一個帶有確認連接的電子郵寄給他們，而後用戶必須點擊連接來確認。若是用戶在某個時候改變他們的電子郵箱地址，應該觸發一樣的操做流程。

身份管理：在存儲密碼時，先用普遍使用的加密庫將密碼加密。若是你能無論理密碼，那麼身份管理轉由Facebook/Github/Twitter來管理，只要使用一個認證接口。

加密:對Web的全部證書問題，沒有比SSL更好的技術了，使用它吧，或者使用 HSTS也能夠。

證書：永遠不要Check任何形式的服務器證書（API密鑰、數據塊密碼）到源碼控制庫中。

工程：動畫

對於這一切是聖潔的愛，別將你的app上全部的元素都作成動畫，由於大部分CSS動畫都會觸發佈局重繪。你最好限制一下，儘量用變換和 opacity。

避免懶過渡計算，若是你必定要使用它，必須確保使用特定的屬性（如:」transition: opacity 250ms ease-in」 而不是 「transition: all 250ms ease-in」）。

用戶體驗

表單：當提交表單時，用戶應該獲得一些有關提交的反饋信息。若是提交後頁面沒跳轉到其它頁面，那麼就應該有一個彈出類型的提醒來讓用戶知道他們是提交成功了仍是失敗了。

登錄重定向：若是一個用戶正想訪問你網址上的某個頁面，可是他並未登錄，那麼用戶應該首先被導向登錄頁面，用戶登錄以後又會跳轉到他以前試着去訪問的頁面。 若是他們在登錄時輸入了錯誤的密碼，應該給以提示，提示他們若是忘記密碼了能夠選擇從新設置新密。

電子郵件

訂閱設置：你發送給每一個用戶的郵件，至少要包含一個連接到你的應用的一個頁面，在這個頁面上用戶能夠修改他們的郵箱設置；還應有一個單獨連接供用戶來取消訂閱。 別讓他們發郵件給你來取消訂閱。

移動端

你並不必定要爲你的應用開發移動客戶端。可是，開發或不開發，你必須瞭解它是一個很是重要的決定。由於這將對開發你的應用的設計師和工程師產生重大影響。

如下假定你已經選擇某特定移動端做爲您的平臺之一。我碰巧使用了Grunt來做爲個人構建工具，因此，我已經擁有一些有關Grunt的插件能夠用。可是，可能存在一些與你正在使用的JavaScript工具相似的東西。

工程

單頁面應用：最近單頁面應用（SPA）是主流，它的主要優點：SPA只須要更少的加載，只須要加載你所須要的資源，並且不須要重複一遍又一遍的加載。若是你正好準備作一個新的web應用，你應該選用SPA。

用戶界面

分辨率：在你開發你的MVP時，你可能不須要確保你的UI可以在全部設備上優雅地工做，可是，但你應該確保它能適用於手機和平板電腦分辨率的基本範圍。

用戶體驗：帶寬

移動端的帶寬比臺式電腦的帶寬更加寶貴，這也是移動應用的一大話題。所以，你應該尋找一切機會來減小請求的數量，儘量使用異步，減少被請求資源的大小。

JS與CSS:你應該講應用上特定的JavaScript和CSS集中放到一個文件中（一個存JS、一個存CSS），並儘可能減少它們的大小。你的朋友在這裏 Grunt-contrib-concat, Grunt-contrib-cssmin 和 Grunt-contrib-uglify 。

爲全部資源–使用CDN:使用CDN主要有兩個好處。第一個適用於全部託管的資源便是定位，CDN能夠確保你的資源在某個區域，而後用戶訪問的時候能夠就近訪問資源，這樣減小了資源加載時間。

第二個是應用於你的Web應用的依賴文件（好比：非特定於應用的樣式和JS代碼）。對web應用所依賴的文件使用CDN，可經過用戶的緩存來極大地減少加載時間。舉個例子，不少網站都依賴Angular.js，使用CDN來連接到核心角代碼將會觸發一個緩存命中，移動設備用戶將會從緩存中接收它，而不是發起另外一個HTTP請求。

CSS-減少腳本大小：大部分開發者剛開始的時候可能會使用某種UI框架（如Bootstrap、Foundation等）。這些框架可能很是大，一般在大部分CDN上均可用它們的精簡版樣式，你也不可能須要使用它們所包含的所有樣式。一般，像相似uncss的工具(一般與相似 processhtml 的工具搭配）在幫你移除那些用不着的樣式有難以置信的意義。

須要重視的是，uncss解析器沒法辨析動態樣式。因此你在檢測的時候，必須謹慎，確保別刪錯了那些實際上被使用在你的應用中的樣式。

CSS-將關鍵的代碼放置到head:在應用加載完以前，關鍵樣式應該已經可用，它們應該放到Head中。次要的樣式可用稍後再加載。

JS-減少腳本大小:因爲在你的產品中JavaScript代碼不須要任何內部變量對人們易理解，將變量user.email重命名爲u.e可能會有助於減少你的腳本文件。幸運的是，有個工具能夠幫你作這個工做-前面提到的 uglify，它能夠將你的JS代碼變得難以讀懂，可是JS文件會更小。

用戶體驗：表單

確保你的表單和工做流程簡單，整體上而言這是一個很好的建議。若是你還選擇了針對移動端進行部署，那麼這一點尤爲重要，沒有人願意在他們的手機上填寫具備5個頁面的表單。

我但願這個列表可以對那些正準備開發你的第一個web app、或是那些已經着手在開發、或對前端設計優化技巧並不熟悉的朋友有幫助。若是你着手開發以後發現了一些其它被遺落的技術或技巧，請記下來並告訴我，我會考慮把它添加在這個列表中。

原文地址：http://codecloud.net/2015-web-app-4932.html

原文地址（英文）：http://blog.venanti.us/web-app-2015/