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

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

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

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

　安全性

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

　　身份管理：在存儲密碼時，先用廣泛使用的加密庫將密碼加密。如果你能不管理密碼，那么身份管理轉(zhuǎn)由Facebook/Github/Twitter來管理，只要使用一個認(rèn)證接口。

　　加密:對Web的所有證書問題，沒有比SSL更好的技術(shù)了，使用它吧，或者使用 HSTS 也可以。

　　證書：永遠(yuǎn)不要Check任何形式的服務(wù)器證書（API密鑰、數(shù)據(jù)塊密碼）到源碼控制庫中。

　工程：動畫

　　對于這一切是圣潔的愛，別將你的app上所有的元素都做成動畫，因?yàn)榇蟛糠諧SS動畫都會觸發(fā)布局重繪。你最好限制一下，盡可能用變換和 opacity。

　　避免懶過渡計(jì)算，如果你一定要使用它，必須確保使用特定的屬性（如:”transition: opacity 250ms ease-in” 而不是 “transition: all 250ms ease-in”）。

　用戶體驗(yàn)

　　表單：當(dāng)提交表單時，用戶應(yīng)該得到一些有關(guān)提交的反饋信息。如果提交后頁面沒跳轉(zhuǎn)到其它頁面，那么就應(yīng)該有一個彈出類型的提醒來讓用戶知道他們是提交成功了還是失敗了。

　　登陸重定向：如果一個用戶正想訪問你網(wǎng)址上的某個頁面，但是他并未登陸，那么用戶應(yīng)該首先被導(dǎo)向登陸頁面，用戶登陸之后又會跳轉(zhuǎn)到他之前試著去訪問的頁面。 如果他們在登陸時輸入了錯誤的密碼，應(yīng)該給以提示，提示他們?nèi)绻浢艽a了可以選擇重新設(shè)置新密。

　電子郵件

　　訂閱設(shè)置：你發(fā)送給每個用戶的郵件，至少要包含一個鏈接到你的應(yīng)用的一個頁面，在這個頁面上用戶可以修改他們的郵箱設(shè)置；還應(yīng)有一個單獨(dú)鏈接供用戶來取消訂閱。 別讓他們發(fā)郵件給你來取消訂閱。

　移動端

　　你并不一定要為你的應(yīng)用開發(fā)移動客戶端。但是，開發(fā)或不開發(fā)，你必須了解它是一個非常重要的決定。因?yàn)檫@將對開發(fā)你的應(yīng)用的設(shè)計(jì)師和工程師產(chǎn)生重大影響。

　　以下假定你已經(jīng)選擇某特定移動端作為您的平臺之一。我碰巧使用了Grunt來作為我的構(gòu)建工具，所以，我已經(jīng)擁有一些有關(guān)Grunt的插件可以用。但是，可能存在一些與你正在使用的JavaScript工具類似的東西。

　工程

　　單頁面應(yīng)用：最近單頁面應(yīng)用（SPA）是主流，它的主要優(yōu)勢：SPA只需要更少的加載，只需要加載你所需要的資源，而且不需要重復(fù)一遍又一遍的加載。如果你正好準(zhǔn)備做一個新的web應(yīng)用，你應(yīng)該選用SPA。

　用戶界面

　　分辨率：在你開發(fā)你的MVP時，你可能不需要確保你的UI能夠在所有設(shè)備上優(yōu)雅地工作，但是，但你應(yīng)該確保它能適用于手機(jī)和平板電腦分辨率的基本范圍。

　用戶體驗(yàn)：帶寬

　　移動端的帶寬比臺式電腦的帶寬更加寶貴，這也是移動應(yīng)用的一大話題。因此，你應(yīng)該尋找一切機(jī)會來減少請求的數(shù)量，盡可能使用異步，減小被請求資源的大小。

　　JS與CSS:你應(yīng)該講應(yīng)用上特定的JavaScript和CSS集中放到一個文件中（一個存JS、一個存CSS），并盡量減小它們的大小。你的朋友在這里 Grunt-contrib-concat , Grunt-contrib-cssmin 和  Grunt-contrib-uglify 。

　　為所有資源–使用CDN:使用CDN主要有兩個好處。第一個適用于所有托管的資源即是定位，CDN可以確保你的資源在某個區(qū)域，然后用戶訪問的時候可以就近訪問資源，這樣減少了資源加載時間。

　　第二個是應(yīng)用于你的Web應(yīng)用的依賴文件（比如：非特定于應(yīng)用的樣式和JS代碼）。對web應(yīng)用所依賴的文件使用CDN，可通過用戶的緩存來極大地減小加載時間。舉個例子，很多網(wǎng)站都依賴Angular.js，使用CDN來鏈接到核心角代碼將會觸發(fā)一個緩存命中，移動設(shè)備用戶將會從緩存中接收它，而不是發(fā)起另一個HTTP請求。

　　CSS-減小腳本大小：大部分開發(fā)者剛開始的時候可能會使用某種UI框架（如Bootstrap、Foundation等）。這些框架可能非常大，通常在大部分CDN上都可用它們的精簡版樣式，你也不可能需要使用它們所包含的全部樣式。通常，像類似 uncss 的工具(通常與類似 processhtml 的工具搭配）在幫你移除那些用不著的樣式有難以置信的意義。

　　需要重視的是，uncss解析器無法辨析動態(tài)樣式。所以你在檢測的時候，必須謹(jǐn)慎，確保別刪錯了那些實(shí)際上被使用在你的應(yīng)用中的樣式。

　　CSS-將關(guān)鍵的代碼放置到head:在應(yīng)用加載完之前，關(guān)鍵樣式應(yīng)該已經(jīng)可用，它們應(yīng)該放到Head中。次要的樣式可用稍后再加載。

　　JS-減小腳本大小:由于在你的產(chǎn)品中JavaScript代碼不需要任何內(nèi)部變量對人們易理解，將變量user.email重命名為u.e可能會有助于減小你的腳本文件。幸運(yùn)的是，有個工具可以幫你做這個工作-前面提到的 uglify ，它可以將你的JS代碼變得難以讀懂，但是JS文件會更小。

　用戶體驗(yàn)：表單

　　確保你的表單和工作流程簡單，總體上而言這是一個很好的建議。如果你還選擇了針對移動端進(jìn)行部署，那么這一點(diǎn)尤其重要，沒有人愿意在他們的手機(jī)上填寫具有5個頁面的表單。

　　我希望這個列表能夠?qū)δ切┱郎?zhǔn)備開發(fā)你的第一個web app、或是那些已經(jīng)著手在開發(fā)、或?qū)η岸嗽O(shè)計(jì)優(yōu)化技巧并不熟悉的朋友有幫助。如果你著手開發(fā)之后發(fā)現(xiàn)了一些其它被遺落的技術(shù)或技巧，請記下來并告訴我，我會考慮把它添加在這個列表中。

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

　　由程序員的資料庫–小柯同學(xué)翻譯，有翻譯不正確的地方，請幫忙更正，謝謝支持。

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

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。