探秘Twitter改版背后的技術(shù)
如果要評2010最漂亮的網(wǎng)站改版，除了豆瓣就是Twitter了。在看了新版Twitter的介紹視頻后，相當(dāng)興奮，那種感覺就像2004年看到Gmail一樣。面對未知的新時代，一部分人在暢想，一部分人在抵觸，只有小部分人在行動，Twitter很快交出了他們的答卷。
看過Twitter官方發(fā)表的博文“The Tech Behind the New Twitter.com”后，總結(jié)了新版Twitter背后的技術(shù)，值得一讀。（下面的內(nèi)容不是翻譯，是作者的理解）
API客戶端
新版背后的一個重要的架構(gòu)上的改變是像其它第三方客戶端一樣，Twitter自己也開始基于API開發(fā)，唯一不同是他們可以使用更多資源。同時對訪問API做了諸多優(yōu)化，原文提到的“highly optimized JSON fragment cache”。
這種方式是很多技術(shù)團隊都想實現(xiàn)的，但礙于原有架構(gòu)的歷史問題，下不了決心徹底改變它。但未來要滿足各種終端上各種形式應(yīng)用的開發(fā)需求，這種架構(gòu)是最靈活的。
The JavaScript API
對應(yīng)后端的API架構(gòu)，前端自然需要一個很給力的JavaScript庫實現(xiàn)和后端的數(shù)據(jù)交互。Twitter內(nèi)部用到一個庫叫@Anywhere，它提供的功能：
1. 負責(zé)和API交換數(shù)據(jù)。文檔里可以看到提供了豐富的接囗。
2. 提供一個客戶端的緩存策略（保存在本地的內(nèi)存和localStorage中）。
3. 提供一個事件通知機制，當(dāng)UI發(fā)生變化，相應(yīng)處理組件能夠立即響應(yīng)。
從中可以看到Twitter前端架構(gòu)的設(shè)計思路，跟后端充分對接，建立業(yè)務(wù)級的通用接囗層，提供通用處理機制解藕，保持代碼的模塊化。這個路子很對，很值得借鑒。
頁面管理
新版的一個項目目標(biāo)就是讓頁面導(dǎo)航更簡單更快。它是利用URL hash建立一套瀏覽器端的頁面路由系統(tǒng)。這個具體要等到用上新版后看一看。
像GMail那種，用URL hash做頁面切換，管理起來還是很復(fù)雜的。等用上新版后要好好分析一下代碼。
渲染堆棧(The Rendering Stack)
新版Twitter的頁面都是在前端渲染的，但在不支持JavaScript的情況下，后端也需要一個渲染系統(tǒng)。他們前后端用的模板系統(tǒng)都是Mustache，這樣前后端可以保持一致，利用Mustache將API對象轉(zhuǎn)成HTML代碼。另外，針對DOM操作還做了諸多優(yōu)化，如事件處理都是用事件代理機制實現(xiàn)，提高組件的重用性，盡可能減小repaint提高頁面渲染性能等。
Mustache是開源的模板系統(tǒng)，支持各種語言。我原來認為它有點重，并沒有在項目中用過它。但如果真要做一個所有頁面切換都是Ajax的應(yīng)用，Mustache是***。
內(nèi)聯(lián)媒體（Inline Media）
新版Twitter整合了很多第三方內(nèi)容，從URL中判斷如果是像kiva，vimeo這樣的合作方，會利用基于oEmbed標(biāo)準(zhǔn)的JSON-P方式，從合作方的接囗中抓取內(nèi)容。如果判斷是來自TwitPic的圖片或來自Youtube的視頻，就直接顯示出來。從視頻中可以看到，交互方式很酷。
開源
Twitter的前端開發(fā)大量用到開源技術(shù)，像jQuery, Mustache, LABjs, Modernizr和大量jQuery插件。這么做的好處是一方面可以將重心放在前端應(yīng)用的創(chuàng)新上，另一方面對開源社區(qū)的發(fā)展也是一種推動。自己在項目中積累的一些技術(shù)也會開源。
我非常贊同這樣，不要重復(fù)造輪子，尤其像瀏覽器級的基礎(chǔ)功能庫，jQuery，YUI已經(jīng)做的很成熟了，需要做的應(yīng)該是在沒有或沒有成熟的開源技術(shù)解決的領(lǐng)域上，通常更多在應(yīng)用層面上需要建立適合自己產(chǎn)品的各種功能庫和框架機制。
原文鏈接：http://hikejun.com/blog/?p=590
【編輯推薦】
