富Web应用的七项原则

毋庸置疑，JavaScript已经成为前端开发人员不可或缺的工具，其应用领域已经扩展到服务器和单片机，也有名牌大学将它选作介绍计算机科学基础的语言。但是，对于JavaScript的具体角色和在Web上的用法，人们还是有很多疑问。近日，文件分享服务Cloudup团队成员Guille根据他2014年8年在BrazilJS大会上的演讲归纳出富Web应用的七项原则。

1.服务器端页面渲染不可或缺

将页面上展示信息所需的往返次数最小化是应用程序具备良好体验和响应能力的基础。在大部分单页应用程序中，一次请求至少会产生三次往返，第一次返回一个空页面和<script>标签，第二次返回脚本内容，第三次返回需要渲染的数据。在这个过程中，脚本解析需要耗费时间，而且在脚本加载过程中，用户得不到任何反馈。此外，TCP协议本身以及大的脚本也会增加往返次数。

因此，要让服务器帮助提升内容展示速度。在有些情况下，页面的某些部分并不是用户希望查看的内容，所以最初响应时只提供他希望最先看到的内容，其它内容后续由客户端以并行方式获取。要做到这一点，就需要利用服务器所具有的关于会话、用户和URL的信息对脚本和样式做定性分析。比如，区分结构CSS和外观/主题CSS，前者可能是JavaScript代码需要的，而后者可以稍后异步加载。

一个足够灵活的系统要在浏览器渲染和服务器渲染之间取得平衡，并提供工具逐步加载脚本和样式。

2.立即响应用户输入

遵循该设计原则，就要去掉大部分的“正在加载”提示信息，利用JavaScript掩盖网络延迟，给用户一种速度很快的感觉。比如，在表单提交后，应用程序不等响应返回就做出动作，像谷歌搜索那样，按下一个键就跳到搜索结果页面。

另外，JavaScript极大地增强了文件输入。开发人员可以通过多种方式获取用户的上传意图：拖拽、粘贴、文件选择器。然后，借助新的HTML5 API展示内容，看上去文件已经上传完毕。

3.响应数据变化

有数据发生变化时，界面应该可以自行更新，而无需用户刷新页面，这在数据点（手表、手机、平板等设备）越来越多的情况下尤其重要。比如，用户可以随时向Facebook上传图片，而他的好友应该不用刷新就可以立即看到。另外，本规则并不局限于多用户应用，还适用于存在并行数据点的情况。如果用户同时在手机和平板打开着应用，那么他在手机上登录或退出时，平板上的应用会自动同步用户状态。

4.控制客户端与服务器端的数据交换

该规则与上一条规则有关。如果应用界面可以自动更新数据，那么就应该能够检测出是否已经与服务器断开连接，而遵循第4条规则意味着它要能够代替用户尝试重新连接。在超时和出现错误的情况下，一旦连接重新建立，它就尝试再次发送数据。感兴趣的读者可以了解下ServiceWorker，它使JavaScript Web应用可以在后台运行。此外，一些新的API，如XMLHttpRequest、WebSocket、EventSource等，使开发人员可以对数据流实现更细粒度的控制。

应用还要确保用户不会无意间中断数据流，这可以通过beforeunload处理程序进行阻止。另外，一些特定的错误需要谨慎处理。比如，对于403错误，可以将用户导向登录页面。

5.不要破坏而要强化历史记录

现代Web应用程序应该具备完整的前进/后退导航功能。应用要能够使用户立即回到他浏览过的页面，这也是规则2的要求。在回到目标页面后，应用还要能够自动将最新的数据展示给用户。要做到这一点，应用需要缓存用户的浏览历史用于快速前进/后退。关于这一点，感兴趣的读者可以阅读内容发布平台Medium工程师Daniel Pipius关于“快速后退”的论述。

6.推送代码更新

如果数据自动更新，那么代码也应该能够自动更新。之所以需要这样做，一个原因是，如果后台API进行了破坏性更新，那么客户端代码也应该更新，否则它可能无法识别服务器端的新数据。另一个原因是，如果数据自动更新，那么用户就无需刷新页面，所以代码也只能自行更新。

7.行为预见

富JavaScript应用已经有可以预测用户最终输入的机制。最常见的是提前获取数据。比如，鼠标悬停在超链接上时就开始获取数据，一旦用户点击就直接推送。另一种更高级的方法是监控鼠标移动，并自动选择鼠标移动方向上的动作控件。

感谢崔康对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。