原文地址:"The Technology Behind the NYTimes.com Redesign"
紐約時(shí)報(bào)英文網(wǎng)站今年進(jìn)行了一次改版锐峭，這次改版不僅僅是給一艘大船重新刷了遍油漆那么簡單翅帜，除了外觀上的重新設(shè)計(jì)，我們也對代碼進(jìn)行了大量的重構(gòu)顷窒，采用了新的框架熄诡，讓網(wǎng)站更快笨忌，也為以后代碼的維護(hù)橱乱、升級便利性進(jìn)行了重新設(shè)計(jì)。Reed Emmons赦政，是這次改版的負(fù)責(zé)人胜宇，在這篇文章將分享我們?nèi)绾巫尲~約時(shí)報(bào)這首老船更快更酷。
很少有機(jī)會能夠在像紐約時(shí)報(bào)這么老資格和規(guī)模的網(wǎng)站進(jìn)行一場「從頭來過」的重構(gòu)和設(shè)計(jì)工作恢着，我這里說的從頭來過桐愉，不僅僅是視覺設(shè)計(jì)上的重新設(shè)計(jì)，更是一個重新發(fā)明整個數(shù)碼傳媒平臺然评。紐約時(shí)報(bào)的上次一次視覺改版是在2006年仅财，但是我們得回溯到2000千禧年才有如此規(guī)模的從底層的重構(gòu)和改版狈究。我們決定重構(gòu)用戶端和服務(wù)端以支持我們新的服務(wù)碗淌、設(shè)計(jì)和新聞報(bào)道，比如說更佳的網(wǎng)站性能抖锥、響應(yīng)式布局等等亿眠。盡管有些舊有的代碼依舊保留或者進(jìn)行了深度重構(gòu)，大部分老的代碼都被刪除或者僅僅是用來做參考磅废。
靜態(tài)頁面發(fā)布:歷史的教訓(xùn)
直到今天為止纳像，紐約時(shí)報(bào)的大部分網(wǎng)頁內(nèi)容還是靜態(tài) html 頁面，這些頁面儲存在我們數(shù)據(jù)中心的硬盤上拯勉。當(dāng)編輯發(fā)布一篇新的文章時(shí)竟趾，會生成和寫入一個 html 文件。我們擁有自己的 html 模板宫峦，可以讓我們根據(jù)需求添加不同的插件岔帽。當(dāng)一篇文章要渲染的時(shí)候，引擎會自動添加廣告和渲染导绷。這套系統(tǒng)的速度和性能足以支持紐約時(shí)報(bào)網(wǎng)站的高流量犀勒，所以到今天為止，也不是特別需要升級這套系統(tǒng)。
這套系統(tǒng)一個很大的不足就是缺乏動態(tài)控制性贾费。網(wǎng)頁的 html 是固定的钦购，但是其中的腳本和樣式表是需要不斷改變的，我們的前端開發(fā)團(tuán)隊(duì)必須圍護(hù)歷史上創(chuàng)建的每一套模板褂萧。這也導(dǎo)致了為什么一個兩年前發(fā)布的新聞同上周發(fā)布的文章押桃，會存在一些不同。我們團(tuán)隊(duì)的一個前端架構(gòu)師Eitan Konigsburg导犹，在去年的開放日活動曾經(jīng)就我們的技術(shù)架構(gòu)歷史做過分享怨规。
一個聰明的框架
為了適應(yīng)更高級和復(fù)雜的設(shè)計(jì)，我們構(gòu)建了自己的響應(yīng)式 JavaScript 引擎锡足，可以讓我們根據(jù)自己的需求使用不用的media queries斷點(diǎn)波丰，這個引擎可以通過直接在 html 中添加不同的 class 類命來實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。同時(shí)舶得，我們使用了 LESS 預(yù)處理掰烟，使得css 更易圍護(hù)的同時(shí)也滿足了我們大部分用戶的瀏覽器兼容性需求。盡管對于用戶來說沐批，網(wǎng)站的變化十分精細(xì)纫骑，但是一篇文章在不同的設(shè)備和瀏覽器，可以產(chǎn)生20種不同的適應(yīng)變化九孩。以下為我們使用 LESS 的一個例子先馆。
.ribbon {
...
// responsive
// 1020
.viewport-medium-50 & {
.offset(0, 1, 0, left);
}
// 1200
.viewport-large-20 & {
.offset(0, 2, 0, left);
}
}
根據(jù)不同的分辨率和設(shè)備方向，我們的框架可以自動渲染出不同的界面躺彬，還可以根據(jù)需求添加不同類型的廣告煤墙，每篇文章對應(yīng)的網(wǎng)頁有超過100個可以自定義修改的地方。
模塊化 Javascript
這次重構(gòu)需要大量的 js 代碼重寫以支持大量的訂制功能宪拥。一個功能強(qiáng)大的前端框架是十分有必要的仿野，這可以讓我們使用不同的 js 模塊并且能良好兼容共存。Backgon.js 和 RequireJs 給我們提供了一套框架和標(biāo)準(zhǔn)code她君。我們選擇 Backbon 因?yàn)橄啾?RequireJS它提供了令人滿意的靈活性和自定義性脚作。Jquery,Modernize,SockJS,Underscore.js 和 Hammer.js 是我們使用的一些庫，我們同樣使用了諸如 Mocha 和 Chai 來進(jìn)行測試缔刹。
除此之外球涛，我們還使用了一些其他的新技術(shù)：
新的 PHP 渲染框架
切換到一個對動態(tài)內(nèi)容要求更好的網(wǎng)站，我們需要使用一個新的渲染引擎校镐，可以快速地利用于大量的有不同需求的文章∫诒猓現(xiàn)有的 PHP 框架提供了堅(jiān)實(shí)的基礎(chǔ)，但是我們?nèi)匀贿x擇重新構(gòu)建一個灭翔。為了滿足訂制服務(wù)不同的內(nèi)容需求魏烫，我們在開發(fā)的時(shí)候使用考慮到增加靈活性的需求辣苏，我們的框架必須動態(tài)呈現(xiàn)不同的布局和配置在同一頁的能力。
新架構(gòu)簡化了開發(fā)的哄褒，還讓我們可以僅用幾行代碼就能創(chuàng)建強(qiáng)大的應(yīng)用程序∠◇現(xiàn)在開發(fā)一個應(yīng)用可以使用已有的組件，顯著地減少了開發(fā)時(shí)間呐赡。此外退客，可用模塊的復(fù)用節(jié)省了我們的大量的時(shí)間。
提高服務(wù)器端緩存速度
有如此多的動態(tài)頁面链嘀，我們的平臺需要一個強(qiáng)大的反向代理來保證 PHP 后臺不會崩潰萌狂。去年五月紐約時(shí)代的移動站的Varnish 系統(tǒng)成功給了我們信心，我們相信 Varnish 也是這次我們的最佳選擇怀泊。Varnish 是高度可配置茫藏，從服務(wù)器緩存中讀取速度極大地加快了。它使得那些經(jīng)常變化的界面能被緩存更短時(shí)間霹琼。
前端優(yōu)化：
利用 Grunt务傲，我們優(yōu)化了我們的代碼，減少了 http 請求枣申，現(xiàn)在我們的文章頁包含被同步下載的三個壓縮了的 css 和 js 文件售葡，相比以前的80多個沒精簡的文件，這是一個顯著的改善忠藤。在網(wǎng)頁的底部挟伙，我們使用 RequireJS 異步加載多個文件進(jìn)行前端渲染。無 Cookie 的 CDN 和緩存HEAD 的設(shè)置使得我們的讀者將下載更少字節(jié)的代碼模孩。配合 Varnish 系統(tǒng)尖阔，如今我們打開一篇文章能控制在500-1000毫秒之內(nèi)。
所有的js 都可能造成阻塞瓜贾，所以最大的性能改進(jìn)來自于廣告的異步加載诺祸。廣告是令人頭疼的携悯，我們不能簡單地直接將代碼添加到 DOM 之中祭芦，而不擔(dān)心頁面的內(nèi)容被覆蓋。相反憔鬼，所有的廣告必須在 iframe和 Content 載入完畢后才進(jìn)行加載龟劲，以避免導(dǎo)致頁面渲染的潛在問題。
開發(fā)的過程中我們還使用了圖片 sprites轴或，我們所有的圖片都存在一個叫 sprite-me 的文件夾中昌跌，配合 grunt 和 less 我們可以很方便地生成和使用不同的圖標(biāo)和圖片，確定圖像的 postion 位置照雁。最后蚕愤，我們使用 Underscore 編譯的 HTML 模板，所以他們可以容易地”required”，并迅速地渲染出來萍诱。
總結(jié)：
如今我們的新平臺包含了更強(qiáng)大的發(fā)布和互動功能悬嗓，我們還在不斷地改進(jìn)這個平臺，不斷地迭代裕坊。這個新平臺也讓我們的團(tuán)隊(duì)能更加敏捷地進(jìn)行新的學(xué)習(xí)和開發(fā)包竹。盡管我們還有很多遺留技術(shù)問題，但是我們已經(jīng)建立了一個值得依賴的技術(shù)團(tuán)隊(duì)籍凝，相信以后大家能更好地開發(fā)解決問題周瞎。
下一次，我們的團(tuán)隊(duì)的其他開發(fā)者將深入介紹這次重構(gòu)使用的這些技術(shù)饵蒂，從 Websockets 到 php 框架声诸，盡請期待。
譯者@羅羅磊磊
本譯文在 Google doc 上公開退盯，如果您發(fā)現(xiàn)某些翻譯的錯誤双絮、不妥，或?qū)δ承┱Z句有更好的翻譯得问，歡迎修改和潤色囤攀。
https://docs.google.com/document/d/1kEGcSm6AiUBgsPKDiHo0FJYGhEtNElA5Iagizy2vA1Q/edit?usp=sharing
