开发一个 Web App 必须了解的那些事

　　在过去的一年里，我在从头开始开发个人第一个重要的Web应用。经验教会了不少之前不知道的东西，特别是在安全性和用户体验方面。

　　值得一提的是，我上一次尝试构建的任何合理复杂性是在2005年。因此，在安全防护方面，我还有不少东西须要去补充。

　　即便在那些我已经知道或已经遇到过的东西以外，下面这个清单的细节在开发Web应用时也很是容易忘记，尤为是你才刚刚起步的时候。

　　这个清单可能在某些方面不尽详细，若是你是一位经验丰富的开发者，我怀疑这里将不会有什么东西会让你感到惊奇。可是，我但愿它对那些可能遗落了一些东西的人有帮助。

　安全性

　　确认电子邮件：当用户注册时，你应该发一个带有确认连接的电子邮寄给他们，而后用户必须点击连接来确认。若是用户在某个时候改变他们的电子邮箱地址，应该触发一样的操做流程。

　　身份管理：在存储密码时，先用普遍使用的加密库将密码加密。若是你能无论理密码，那么身份管理转由Facebook/Github/Twitter来管理，只要使用一个认证接口。

　　加密:对Web的全部证书问题，没有比SSL更好的技术了，使用它吧，或者使用 HSTS 也能够。

　　证书：永远不要Check任何形式的服务器证书（API密钥、数据块密码）到源码控制库中。

　工程：动画

　　对于这一切是圣洁的爱，别将你的app上全部的元素都作成动画，由于大部分CSS动画都会触发布局重绘。你最好限制一下，尽量用变换和 opacity。

　　避免懒过渡计算，若是你必定要使用它，必须确保使用特定的属性（如:”transition: opacity 250ms ease-in” 而不是 “transition: all 250ms ease-in”）。

　用户体验

　　表单：当提交表单时，用户应该获得一些有关提交的反馈信息。若是提交后页面没跳转到其它页面，那么就应该有一个弹出类型的提醒来让用户知道他们是提交成功了仍是失败了。

　　登录重定向：若是一个用户正想访问你网址上的某个页面，可是他并未登录，那么用户应该首先被导向登录页面，用户登录以后又会跳转到他以前试着去访问的页面。 若是他们在登录时输入了错误的密码，应该给以提示，提示他们若是忘记密码了能够选择从新设置新密。

　电子邮件

　　订阅设置：你发送给每一个用户的邮件，至少要包含一个连接到你的应用的一个页面，在这个页面上用户能够修改他们的邮箱设置；还应有一个单独连接供用户来取消订阅。 别让他们发邮件给你来取消订阅。

　移动端

　　你并不必定要为你的应用开发移动客户端。可是，开发或不开发，你必须了解它是一个很是重要的决定。由于这将对开发你的应用的设计师和工程师产生重大影响。

　　如下假定你已经选择某特定移动端做为您的平台之一。我碰巧使用了Grunt来做为个人构建工具，因此，我已经拥有一些有关Grunt的插件能够用。可是，可能存在一些与你正在使用的JavaScript工具相似的东西。

　工程

　　单页面应用：最近单页面应用（SPA）是主流，它的主要优点：SPA只须要更少的加载，只须要加载你所须要的资源，并且不须要重复一遍又一遍的加载。若是你正好准备作一个新的web应用，你应该选用SPA。

　用户界面

　　分辨率：在你开发你的MVP时，你可能不须要确保你的UI可以在全部设备上优雅地工做，可是，但你应该确保它能适用于手机和平板电脑分辨率的基本范围。

　用户体验：带宽

　　移动端的带宽比台式电脑的带宽更加宝贵，这也是移动应用的一大话题。所以，你应该寻找一切机会来减小请求的数量，尽量使用异步，减少被请求资源的大小。

　　JS与CSS:你应该讲应用上特定的JavaScript和CSS集中放到一个文件中（一个存JS、一个存CSS），并尽可能减少它们的大小。你的朋友在这里 Grunt-contrib-concat , Grunt-contrib-cssmin 和  Grunt-contrib-uglify 。

　　为全部资源–使用CDN:使用CDN主要有两个好处。第一个适用于全部托管的资源便是定位，CDN能够确保你的资源在某个区域，而后用户访问的时候能够就近访问资源，这样减小了资源加载时间。

　　第二个是应用于你的Web应用的依赖文件（好比：非特定于应用的样式和JS代码）。对web应用所依赖的文件使用CDN，可经过用户的缓存来极大地减少加载时间。举个例子，不少网站都依赖Angular.js，使用CDN来连接到核心角代码将会触发一个缓存命中，移动设备用户将会从缓存中接收它，而不是发起另外一个HTTP请求。

　　CSS-减少脚本大小：大部分开发者刚开始的时候可能会使用某种UI框架（如Bootstrap、Foundation等）。这些框架可能很是大，一般在大部分CDN上均可用它们的精简版样式，你也不可能须要使用它们所包含的所有样式。一般，像相似 uncss 的工具(一般与相似 processhtml 的工具搭配）在帮你移除那些用不着的样式有难以置信的意义。

　　须要重视的是，uncss解析器没法辨析动态样式。因此你在检测的时候，必须谨慎，确保别删错了那些实际上被使用在你的应用中的样式。

　　CSS-将关键的代码放置到head:在应用加载完以前，关键样式应该已经可用，它们应该放到Head中。次要的样式可用稍后再加载。

　　JS-减少脚本大小:因为在你的产品中JavaScript代码不须要任何内部变量对人们易理解，将变量user.email重命名为u.e可能会有助于减少你的脚本文件。幸运的是，有个工具能够帮你作这个工做-前面提到的 uglify ，它能够将你的JS代码变得难以读懂，可是JS文件会更小。

　用户体验：表单

　　确保你的表单和工做流程简单，整体上而言这是一个很好的建议。若是你还选择了针对移动端进行部署，那么这一点尤为重要，没有人愿意在他们的手机上填写具备5个页面的表单。

　　我但愿这个列表可以对那些正准备开发你的第一个web app、或是那些已经着手在开发、或对前端设计优化技巧并不熟悉的朋友有帮助。若是你着手开发以后发现了一些其它被遗落的技术或技巧，请记下来并告诉我，我会考虑把它添加在这个列表中。

　　若是你也喜欢这篇文章，或以为它对你有帮助，请分享到社区，让更多的朋友受益于它吧！

　　由程序员的资料库–小柯同窗翻译，有翻译不正确的地方，请帮忙更正，谢谢支持。

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