新版twitter背后的技术

　　如果要评2010最牛逼的网站改版，除了豆瓣就是Twitter了（开个玩笑）。那天看了新版twitter的介绍视频，相当兴奋，那种感觉就像04年看到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 (http://platform.twitter.com/js-api.html)，它提供的功能:
　　1.负责和API交换数据。文档里可以看到提供了丰富的接囗。
　　2.提供一个客户端的缓存策略（保存在本地的内存和localStorage中）。@ded不久前写的“JavaScript Cache Provider”其实透露了一些细节。
　　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插件。这么做的好处是一方面可以将重心放在前端应用的创新上，另一方面对开源社区的发展也是一种推动。自己在项目中积累的一些技术也会开源。

　　评论：我非常赞同这样。不要重复造轮子，尤其像浏览器级的基础功能库，jQuery，YUI已经做的很成熟了，需要做的应该是在没有或没有成熟的开源技术解决的领域上，通常更多在应用层面上需要建立适合自己产品的各种功能库和框架机制。

Twitter前端团队成员，可以关注一下：

Ben Cherry
@bcherry

http://www.adequatelygood.com/

Marcus Phillips
@mracus

http://marcusphillips.com/

Dustin Diaz
@ded

http://www.dustindiaz.com/