#BackboneConf2012 Y.App: Coordinating URL Navigation, Routing, and Managing Views by Eric Ferraiuolo

Backbone Conf 2012

有幸去美国波士顿参加了2012年的 Backbone.js Conference,见到了coffeescriptunderscore.js 还有 backbone.js 的作者 Jeremy Ashkenas。会议内容围绕前端MVWTF和社区进行了很多有趣的讨论,有很多有价值的观点。我希望在这里面与大家分享我从里面学到的东西。

这系列博客其实是我整理的会议笔记的汇总,是我对每个话题中比较有印象或者比较重要的内容的摘抄,这些观点几乎都不是我的,我仅作为一个传声者。我是希望把所有的Credit交给演讲者自己,我最多只是一个翻译者,碰巧幸运的在现场。Backbone.js Conference和O’Reilly的Fluent Conference 碰巧同时进行,#BackboneConf 更加草根,但是也更有观点。

Y.App: Coordinating URL Navigation, Routing, and Managing Views by Eric Ferraiuolo

Eric Ferraiuolo

Links

Notes

这个哥们是YUI团队的,推荐大家 Follow (@ericf),非常有见解。

他整个话题的核心问题是URLs,是很讲究的地方:

  • http://example.com/foo/
  • http://example.com/#/foo/
  • http://example.com/#!/foo/

这是个争论的地方,也就是著名的 hash bang (ref Backbone.js: From Hashbangs to HTML5 PushState)。很多人都表示 #! 是很讨厌的东西,它让妨碍了对于数据(视图)的直接访问。因为 hash 的语义不是 path。

但是很多人会提出一个真正的问题,如果只做了一个 single-paged app,但是如果你部署在一个 Dumb server(只能服务静态文件的服务器)怎么办?这种情况下你只能使用 hash url 了。

Hash Bang 问题的另外一个核心是初始状态的问题,也就是第一次 http 传输给用户的内容。传统的 hash bang 只返回静态页面,ajax call 再去取 hash 对应的 data 进行渲染。也就是说初始化的数据是不完备的,需要更多的 http 请求才给用户传输了真正有意义的内容。

所以,最好预先把数据在服务器端渲染好,直接传输给用户。减少 http 请求对于 mobile 用户就更加重要了,因为 Radio (手机无线数据连接) 的省电算法,还有无线数据传输通道建立的延迟达到数秒,http 传输的额外开销(延迟)非常恐怖。这就显得更加重要。这也就是为什么最近 Twitter 写了一个博客说他们已经改为预先在服务器端渲染好 Twitter 而不使用客户端模板引擎去渲染了。Twitter 放弃 hash bang 以后第一次数据载入的快了5倍

而且,用渐进增强的思路,使用传统的页面预先渲染(URL 转换页面)的模型很容易使用 pjax+pushState 增强。比如 github 就是用这种方式实现的,它结合了 ajax 的保持当前页面状态(减少 parse 和初始化事件,不需要重新载入整个页面)、局部更新等很多好处,给用户的感觉就是快。而且 URL 上面它保留了每个页面 path 的可访问性。

pjax就是截获了 <a> 元素的点击事件,这是完全渐进增强的。

还有一个好处就是你可以控制页面 cache,页面局部缓存,返回可以变得很快(没有 http 请求)。

但是,这里还有一个分裂:

/foo//#/foo/

如何统一两种风格呢?(这样无论是否是 dumb server 都可以让你的 app 正常运行,在可以不用hash的场合使用更好的 path 取代 hash)

你需要一个更强的客户端 Route Handler,作者的 Y.App(包括 Y.PjaxBase、Y.Router、Y.View)是个例子……余下就是 Y.app 的一段 demo,也算广告。

这个话题非常好,因为它解决了 Hash bang 的争论,我们是应该让 Web 的最基本的 hypelink 不被破坏,应该正确的使用 URL 的语义。但是我们也应该用渐进增强的思想利用我们强大的前端的状态管理功能,让 Router 来处理初始状态的导航和组装。

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.