歡迎光臨
每天分享高質量文章

做 Web 應用要知道的那些事

英文: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),他們不僅審閱本文的草稿,而且添加了建議。

赞(0)

分享創造快樂