開發一個 Web App 必須了解的那些事

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

值得一提的是，我上一次嘗試構建的任何合理復雜性是在2005年。所以，在安全防御方面，我還有很多東西需要去補充。

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

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

安全性

確認電子郵件：當用戶注冊時，你應該發一個帶有確認鏈接的電子郵寄給他們，然后用戶必須點擊鏈接來確認。如果用戶在某個時候改變他們的電子郵箱地址，應該觸發同樣的操作流程。

身份管理：在存儲密碼時，先用廣泛使用的加密庫將密碼加密。如果你能不管理密碼，那么身份管理轉由非死book/Github/推ter來管理，只要使用一個認證接口。

加密:對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