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

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

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

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

　安全性

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

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

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

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

　工程：動(dòng)畫

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

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

　用戶體驗(yàn)

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

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

　電子郵件

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

　移動(dòng)端

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

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

　工程

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

　用戶界面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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