探秘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插件。這么做的好處是一方面可以將重心放在前端應用的創新上，另一方面對開源社區的發展也是一種推動。自己在項目中積累的一些技術也會開源。
我非常贊同這樣，不要重復造輪子，尤其像瀏覽器級的基礎功能庫，jQuery，YUI已經做的很成熟了，需要做的應該是在沒有或沒有成熟的開源技術解決的領域上，通常更多在應用層面上需要建立適合自己產品的各種功能庫和框架機制。
原文鏈接：http://hikejun.com/blog/?p=590
【編輯推薦】
