解密2010最漂亮的网站之Twitter改版技术
作者： 来源： 时间：2010-11-13 09:06:37 点击：
47 次
要说全球最漂亮的网页，可能谁也没办法来评测，但是如果有一天真要评，相信这鼎鼎大名的“推特”肯定在列之中，可能受某些原因，这个网站在某些环境下是无法打开的，但是总有解决办法（更多解决方案，谷歌搜索），呵呵！
看过Twitter官方发表的博文“The Tech Behind the New Twitter.com”后，总结了新版Twitter背后的技术，值得一读。（下面的内容不是翻译，是作者的理解）
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插件。这么做的好处是一方面可以将重心放在前端应用的创新上，另一方面对开源社区的发展也是一种推动。自己在项目中积累的一些技术也会开源。
我非常赞同这样，不要重复造轮子，尤其像浏览器级的基础功能库，jQuery，YUI已经做的很成熟了，需要做的应该是在没有或没有成熟的开源技术解决的领域上，通常更多在应用层面上需要建立适合自己产品的各种功能库和框架机制。
