開發一個 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、或是那些已經著手在開發、或對前端設計優化技巧並不熟悉的朋友有幫助。如果你著手開發之後發現了一些其它被遺落的技術或技巧，請記下來並告訴我，我會考慮把它新增在這個列表中。

　　如果你也喜歡這篇文章，或覺得它對你有幫助，請分享到社群，讓更多的朋友受益於它吧！

　　由程式設計師的資料庫–小柯同學翻譯，有翻譯不正確的地方，請幫忙更正，謝謝支援。

　　英文原文： Things to Know When Making a Web Application in 2015 翻譯：codecloud.net