[译]2015年web开发需要注意的事

原文链接：Things to Know When Making a Web Application in 2015

译者：杰微刊--刘祥明

去年，我从零开始搭建了我的第一个正式的web应用。并从中学到了很多以前所不知的经验，尤其是在安全和用户体验方面。

顺便一提，我最近一次尝试构建具有相当复杂度的东西是在2005年， 所以—我得为自己辩护一下——有很多方面我也需要充电。

不管是在我所知之外还是亲眼所见，在开发web应用时，过于琐碎的任务清单反而让我们很容易忘记重要的事情——如果你是新进入web开发领域的话这一点尤为明显。

这里所列的checklist并不是详尽无遗的。如果你是一个有经验的开发者，我想这些东西都不会让你感到新奇，但是我希望它们能对一些人有用，如果不阅读这篇文章，他们可能会因此错过一些好东西。

安全 Security

确认email（Confirm emails）: 用户注册时，系统应该给他发送包含一个链接地址的email，用户则需要打开该链接以确认他们的email。如果用户中途需要更新他们的email, 应该重新发起该流程。

身份管理（Identity Management）：当需要存储密码时， 首先应该使用现有被广泛使用的加密库对它们进行盐值化和哈希加密。如果你碰巧不用考虑身份管理，可以把它外发给Facebook/GitHub/Twitter/等。而仅在自己的应用中使用OAuth认证流程。

加密（Encryption）：权衡各种证书使用过程中所遇到的问题，还没有哪一种方案优于SSL。所以直接使用它就可以了。同时， 请使用HSTS来保障应用的安全。

凭证（Credentials）：不要把任何服务器凭证（API keys， 数据库密码，等等）提交到源码控制系统中。

工程：动画 Eng:Animations

好钢用在刀刃上，所以不要把应用中所有东西都变成动画。大部分CSS动画都会触发布局重绘；在transform和opacity属性的使用上最好保持克制。

避免因使用transition属性而引发惰性计算，如果你必须使用它们，请确保尽量使用更加明确的属性（例如，使用"transition: opacity 250ms ease-in"而不是"transition: all 250ms ease-in"）

用户体验 UX

表单（Forms）：提交表单时，应该给用户一个反馈。如果提交动作不需要把用户引导到另一个页面，应该弹框并给用户一些提示信息，让他们知道本次提交是成功还是失败。

登录重定向（Login redirects）：如果用户尚未登录就访问网站的某一个页面，应该将其重定向到登录页面，登录成功后再将其重定向回原先的页面（当然，这里假设他们已经获得相应的权限）。

如果用户登录时输入了错误的密码，应为其提供明显的线索，提醒他如果忘记密码可以进行密码重置。

Email

订阅设置（Subscription settings）：向用户发送任何邮件都应该至少包含一个用于修改邮件设置的页面链接，最好再包含一个链接以便用户可以取消邮件订阅。

不要让用户通过给你发邮件的方式来取消邮件订阅。

移动设备 Mobile

也许你并不需要针对移动设备进行开发，但是不管怎么样，都应该确保你所做的决定是主动的。因为它对应用的设计和工程方面都会产生实质性的影响。

以下所列事项假定你选择了移动设备作为应用的其中一个目标平台。因为我恰巧使用了Grunt作为我的构建工具，所以我囊括了一些我所使用的Grunt特有的插件，但是很可能类似的插件也存在于你所使用的JavaScript构建工具中。

工程 Engineering

单页面应用（Single Page Apps）：如今单页面应用（SPA）才是王道。SPA最大的优势是更少的全页面加载—只在需要的时候加载资源，而无需不断地重复加载相同的资源。如果你新启动一个web应用项目，那它就该是一个SPA。

用户界面 UI

分辨率（Resolutions）：如果你只是在发展自己的MVP用户，不需要保证你的用户界面能够正常展现在所有的移动设备上。但是，应该确保它们在常见手机和平板设备的分辨率下能正常显示。待你的应用成为一个成熟的产品再考虑所有类型的设备—我们要适应市场需求。

用户体验：带宽 UX： Bandwidth

移动设备最大的主题之一就是带宽相对于桌面应用来说是更宝贵的资源。因此， 应该抓住每个机会减少请求的数量，如果情况允许，将它们变成异步请求，并尽可能减少每次所请求资源的大小。

JS & CSS—合并及最小化（JS & CSS - Concat and minify）：应该将应用相关的JavaScript 和 CSS 文件合并到单独的文件中（JS合并到一个文件中，CSS合并到另一个文件中 ）并将它们进行最小化处理。Grunt-contrib-concat, Grunt-contrib-cssmin 和 Grunt-contrib-uglify是这方面的好帮手。

所有资产—使用CDN（All assets - Use a CDN）：使用CDN能在两个方面带来很大的好处。第一个好处对所有的资产都适用，它就是本地化—CDN可以保证它所承载的资源在地理位置上离用户更近，从而减少加载时间。

第二个好处更适用于应用的依赖（例如， 非应用相关的样式和JS代码）。在这里，使用CDN可以使得用户设备能够从其缓存中加载资源从而大大减少加载时间。例如，很多网站都依赖Angular.js， 使用CDN链接到Angular核心代码会触发缓存命中， 此时用户设备将从其缓存中将它读取出来使用，而不是通过发起一个额外的HTTP请求将它从服务器上获取下来。

CSS—尽量减少脚印（CSS - Reduce your footprint）：大部分开发者在开发他们的应用时，很有可能会使用一些UI框架（例如，Bootstrap， Foundation， 等等）。这些框架往往都很大，虽然可以从CDN上得到它们的最小化版本，但是不可能保证所有被包含进来的样式都会被使用。因此，使用一些类似uncss（通常和processhtml一起配套使用）的工具移除那些没有被使用到的样式对我们来说显然非常有价值。

但是请注意uncss解析器不能识别动态样式（那些只对JavaScript事件起作用的样式），因此需要在浏览器中进行严格的测试以确保它不会误删有用的样式。

CSS—把重要的东西放在头部（CSS - Put crucial things in the head）：把那些在应用完成加载前就需要用到的样式放到头部；那些没那么重要的样式可以稍后再加载。

JS—尽量减少脚印（JS - Reduce your footprint）：一旦你的应用进入到产品阶段， JavaScript代码内部的变量对最终用户来说是毫无意义的，因此， 把变量user.email换成u.e可以在很大程度上减少文件大小。很庆幸，有一个工具可以为我们完成这项任务—前面提到的uglify，它将JS代码打乱成人无法理解的形式，但是却极大地减小了代码的尺寸。

用户体验：表单 UX：Forms

尽量让表单和工作流程保持简单，如果你把移动设备作为目标平台的话这点尤为重要。没有人愿意在他们的iPhone上填写一份长达5页的表单。
完整内容点此查看