新 twitter 特性

twitter 改版吸引了很多用户的眼球，最近他们也放出了所有用户的体验新版的通道。

twitter 完全以一个全新的面貌展示，完全放弃了IE6，IE7/8 的某些特效体验也放弃了，专注于更优秀体验，以及技术跟进最快的chrome firefox safari 等浏览器。另外其前端的 javascript 整体结构也几乎完全改变，完全基于API来实现。

这里结合twitter官方博客发表的博客大略的分析一下twitter的新特性和技术：

 

Top Navigation

始终居顶的导航条十分方便，涵盖了twitter所有的主要的入口,以及操作。

 

Timeline

信息的呈现有了很大的变化，页面也不再是单纯的无休止的timeline。

左侧的信息流每条都可以展开，展开后会显示和 此条tweet 有关的tweet ,包括retweet,reply,mention,tag。右边的信息栏体现出了自己最新的一条tweet，以及follower和follow的头像。

新版twitter 的页面跳转非常少，用户几乎只要留在首页就能得到他想取得的最大信息量。因为twitter充分利用了改版后固定的右边栏空间，所有交互产生的新内容都由一个位置相对浏览器窗口固定的层来展示。如：点击用户id,在右侧显示其miniprofile，并且显示该用户最近的3条tweets。

 

keyboard shortcuts

twitter的快捷键十分的丰富，在twitter里，你可以通过shift + ？来查看快捷键菜单

和google reader 一样

 

这些快捷键都是全局的，只要焦点不被 input 或是 textarea 上都可以使用。

另外对单条微博的快捷键操作需要展开当前微博。有所欠缺的是，在发单条tweet的时候，你并不能直接用 ctrl + enter发布新微博。但twitter 可以用 TAB 键来focus 发布按扭，再按 enter 键就能达到效果。所以几乎可以不用任何鼠标操作来使用twitter的大部分功能。

 

API

新改版的twitter是完全基于他自己的开发的API 搭建的,而各个平台的twitter 客户端，无论是andriod 还是 iphone 都是从同样终端获取数据。任何第三方应用的获取的数据也与此相同。

从初始化页面的请求到客户端的每个请求，获得的都将是经过优化过的json碎片缓存

javascript API

另外twitter 的javascirpt API 提供的 API 获取以及智能的客户端缓存(内存或是本地存储),使得他们大量的减少了服务器请求数。

举个例子来说：

timeline 的获取包含了每条tweet相关的用户信息,这使得用户信息被预先存储了。所以当点击用户名查看信息时，不必再去向服务器请求用户数据。

 

另外一个特点就是 javascript API 在每个API 被请求的前后都启用了事件通知机制。

这使得 组件在某个API请求后，可以得到消息 并且立即做出适当的UI变化。这就使得组件之间即便在依赖相同数据时相对独立。

 

page management

twitter 这一次的改版显然目的是使得页面间的跳转，更快更方便。为了达到这个目的，他们开发出了一套由URL hash来实现的路由系统在状态的页面之间切换。当用户要前往某个页面时，应用就会把用户访问过的页面缓存在内存中。虽然那个页面的内容数据在内存中是不会更新的，但是通过页面对 javascript APi 事件的通知机制，他们使得数据同步变的不那么复杂。

 

the render stack

twitter 是基于 Mustache 这个 模版引擎（前后端都是），并开发出了一个可以从API对象产生HTML碎片的系统。

twitter 在优化dom上下了很多功夫。例如：他们全面的实施了事件通知机制，这使得不用担心需要额外的事件绑定。

而twitter 的大多数UI都是可重用的组件，所以他们把一些集中的事件处理放到少数核心的节点上。

当然twitter也在建立起所有的HTML结构，绑定相应的数据之后才插入文档流，这样尽量减少了页面的重绘。

inline media

新的twitter 可以嵌入和twitter合作的第三方的视频和图片了。

这些嵌入基于oEmbed 标准，发起 json-p 的请求去和内容提供商，然后得到返回后嵌入返回的内容数据。

如果是youtube 或是 twitpic 这样的合作方，我们可以根据已知嵌入的内容推算出URL,并直接显示出来。这样就可以减少http请求，给用户一个更快的用户体验。

open source

twitter 使用了很多的开源库，jQuery、Mustache 、LABjs twitter，同时twitter在使用这些库的同时，也做很多大胆的创新，使得这些技术在twitter 的应用上，更加合理，推动了twitter 用户的体验的整体提升。