探秘Twitter改版背后的技术

如果要评2010最漂亮的网站改版，除了豆瓣就是Twitter了。在看了新版Twitter的介绍视频后，相当兴奋，那种感觉就像2004年看到Gmail一样。面对未知的新时代，一部分人在畅想，一部分人在抵触，只有小部分人在行动，Twitter很快交出了他们的答卷。

看过Twitter官方发表的博文“The Tech Behind the New Twitter.com”后，总结了新版Twitter背后的技术，值得一读。（下面的内容不是翻译，是作者的理解）

API客户端

新版背后的一个重要的架构上的改变是像其它第三方客户端一样，Twitter自己也开始基于API开发，唯一不同是他们可以使用更多资源。同时对访问API做了诸多优化，原文提到的“highly optimized JSON fragment cache”。

这种方式是很多技术团队都想实现的，但碍于原有架构的历史问题，下不了决心彻底改变它。但未来要满足各种终端上各种形式应用的开发需求，这种架构是最灵活的。

The JavaScript API

对应后端的API架构，前端自然需要一个很给力的JavaScript库实现和后端的数据交互。Twitter内部用到一个库叫@Anywhere，它提供的功能：

1. 负责和API交换数据。文档里可以看到提供了丰富的接囗。

2. 提供一个客户端的缓存策略（保存在本地的内存和localStorage中）。

3. 提供一个事件通知机制，当UI发生变化，相应处理组件能够立即响应。

从中可以看到Twitter前端架构的设计思路，跟后端充分对接，建立业务级的通用接囗层，提供通用处理机制解藕，保持代码的模块化。这个路子很对，很值得借鉴。

页面管理

新版的一个项目目标就是让页面导航更简单更快。它是利用URL hash建立一套浏览器端的页面路由系统。这个具体要等到用上新版后看一看。

像GMail那种，用URL hash做页面切换，管理起来还是很复杂的。等用上新版后要好好分析一下代码。

渲染堆栈(The Rendering Stack)

新版Twitter的页面都是在前端渲染的，但在不支持JavaScript的情况下，后端也需要一个渲染系统。他们前后端用的模板系统都是Mustache，这样前后端可以保持一致，利用Mustache将API对象转成HTML代码。另外，针对DOM操作还做了诸多优化，如事件处理都是用事件代理机制实现，提高组件的重用性，尽可能减小repaint提高页面渲染性能等。

Mustache是开源的模板系统，支持各种语言。我原来认为它有点重，并没有在项目中用过它。但如果真要做一个所有页面切换都是Ajax的应用，Mustache是首选。

内联媒体（Inline Media）

新版Twitter整合了很多第三方内容，从URL中判断如果是像kiva，vimeo这样的合作方，会利用基于oEmbed标准的JSON-P方式，从合作方的接囗中抓取内容。如果判断是来自TwitPic的图片或来自Youtube的视频，就直接显示出来。从视频中可以看到，交互方式很酷。

开源

Twitter的前端开发大量用到开源技术，像jQuery, Mustache, LABjs, Modernizr和大量jQuery插件。这么做的好处是一方面可以将重心放在前端应用的创新上，另一方面对开源社区的发展也是一种推动。自己在项目中积累的一些技术也会开源。