知識星球英文：blog.venanti.us
譯者：伯樂線上 – 劉健超-J.c
網址：http://web.jobbole.com/82778/
點選“閱讀原文”可檢視本文網頁版
在過去一年裡，我從零開始開發一直在我的首個重要的 Web 應用程式。這次經歷教會了我許多之前不知道的東西，特別在安全和使用者體驗方面。
我最後一次嘗試開發足夠複雜的應用是在 2005 年，所以就我的立場來說，有很多東西需要補充。
除了我所知所見外，要記住本文清單裡的內容。因為在開發 Web 應用時，尤其是剛開始做的時候，容易忘記一些重要的事情。
這個檢查清單並不是面面俱到，如果你是一個經驗豐富的開發者，這裡可能沒有讓你感到驚喜的東西，但我希望能證明它是有助於讓你回憶起一些錯過的東西。
安全性
確認郵件：當使用者註冊時，應向他們傳送帶有點選確認郵箱的連結的郵件。如果使用者更新他們的郵箱地址，則要再次重覆這個工作流程。
身份管理：當儲存密碼時，首先對它們進行加鹽和雜湊操作，然後再用現在廣泛使用的 crypto 庫。如果你不這樣做的話，把身份管理轉由給 Facebook / GitHub / Twitter / 等，用 OAuth 就能做到。
加密：所有證書問題，還有什麼比 SSL 更好。使用它吧。還可以使用 HSTS。
憑證：不要把伺服器身份資訊(API 金鑰、資料庫密碼等)放到版本控制裡，否則就洩密了。
工程：動畫
所有的愛，都是神聖的。但別為應用裡的所有元素新增動畫。因為大多數 CSS 動畫都會觸釋出局重繪；最好盡可能地限制自己使用 transform 和 opacity。
避免進行緩慢的過渡運算，如果非要使用，那麼確保它是針對某個屬性的（如，”transition: opacity 250ms ease-in” ，而不是 ”transition: all 250ms ease-in”）。
使用者體驗（UX）
表單：當提交一個表單後，使用者應收到提交後的反饋。如果提交後不向使用者傳送一個不同的頁面，那麼就應該有彈框或 alert 一些資訊，以便讓使用者知道這次提交是否成功。
登入重定向：如果使用者打算在你的網站開啟一個頁面，但並沒有登入，那麼他們應該首先接收到一個能登入的頁面，併在登入後重定向到一個他們原本想開啟的一個頁面（當然，前提是已得到授權）。
如果他們嘗試登入，但提供了一個錯誤的密碼，這時，使用者有可能是忘記了密碼，那我們就應該提供一個視覺線索來提醒他們，要有一個重置密碼的選項。
電子郵件
訂閱設定：任何傳送到使用者的 email ，都應該至少包含一個連結，能連結到修改他們的郵箱設定的應用程式頁面，並且最好每個郵件都有一個單獨的連結，能取消訂閱。
千萬別讓使用者為了取消訂閱而向你傳送郵件。
移動端
雖然你不必開發移動端…但不管你是否做，你都應該確保這是一個積極的決定，因為這會對你的應用程式設計和工程有實質性影響。
下麵的註意事項是假設你已選擇移動端作為你的平臺之一。我碰巧選用 Grunt 作為我的構建工具，所以我得使用一些 Grunt-specific 外掛，但你可能使用類似的 JavaScript 構建工具。
工程
單頁面應用：現今單頁面（SPA）是王道。它的主要優勢是很少載入整個頁面 – 只需載入所需資源，並且無須反覆多載相同的資源。如果你才剛剛開始開發一個新的 web 應用，那它很可能是 SPA。
使用者介面（UI）
解析度：當你開發 MVP （Minimum Viable Product –最簡化可實行產品）時，不用先急著相容各種尺寸的 UI ，那是等你的產品一下子火了之後才需要去做的事情，但要確保支援主流裝置（尺寸）。
UX：頻寬
相對於桌面端，移動端的一個大主題是頻寬，它是非常珍貴的資源。因此，不應該放過任何能減少請求的機會，讓它們盡可能地採用非同步請求，並減少請求資源的大小。
JS & CSS – 合併與壓縮：把面向具體應用的 JavaScript 和 CSS 合併到單獨檔案裡（一個 JS，一個 CSS），併進行壓縮。Grunt-contrib-concat、Grunt-contrib-cssmin 和 Grunt-contrib-uglify 都是你的好朋友。
所有資源 – 使用 CDN：它有兩個主要的優勢。第一個是適用託管所有資源，並本地化。CDN 確保資源服務都位於一個區域，而該區域在地理位置上是靠近使用者請求資源的位置，從而減少載入時間。
第二個優勢是更適用於你的依賴檔案（比如，非面向特定應用的樣式和 JS 程式碼）。為你所依賴的檔案使用 CDN 能極大地減少載入時間。比如，很多網站依賴 Angular.js，使用 CDN 連結 Angular 程式碼會觸發快取命中，那麼移動裝置會從裝置快取裡檢索，而不是額外新建一個 HTTP 請求。
CSS – 減少佔用空間：大多數開發者在初始時階段，很可能使用某些 UI 框架（如 Bootstrap、Foundation 等）。這些框架可以很大，其壓縮版通常可以常用的 CDN 上獲得，但你不太可能使用它包含的所有樣式。因此，類似 uncss 工具（一般配對的有 processhtml）能令你難以置信地移除最終未被使用的樣式。
註意這點很重要：uncss 解析器不能提取動態樣式（即透過 JavaScript 事件新增的樣式），所以你必須在瀏覽器進行嚴格的測試，以確保不會去除應用程式實際用到的樣式。
CSS – 將關鍵的檔案放在頭部：因為樣式需要在應用完成載入前看到；次要的樣式能在載入完後提供。
JS – 減少佔用空間：因為應用一旦上線，程式員就不需要考慮 JavaScript 程式碼裡內部變數的可讀性，因此可以將所有如 user.name 變數重新命名為 u.e，從而減少檔案大小。因此，有一個工具為此而生 – 上面提及到的 uglify，雖然它會使 JS 程式碼完全看不懂，但極大地減小檔案大小。
使用者體驗：表單
這是一個很好的建議：保持表單和工作流程的簡易性，當你針對移動裝置作為部署平臺時，這點尤其重要。因為沒有人願意在手機上填滿 5 頁的表單。
我希望這串列對於剛開始開發第一款 Web 應用的你有所幫助，甚至對那些之前不熟悉前端的一些最佳化技巧的後端或設計師。如果你有其它建議或記起某些東西，那麼請讓我知道，我會考慮將它新增到該串列。
感謝 Chris Dean (@ctdean)，Danny King (@dannykingme) 和 Allen Rohner (@arohner)，他們不僅審閱本文的草稿，而且添加了建議。