原文地址:”The Technology Behind the NYTimes.com Redesign”

紐約時(shí)報(bào)英文網(wǎng)站今年進(jìn)行了一次改版，這次改 版不僅僅是給一艘大船重新刷了遍油漆那么簡(jiǎn)單，除了外觀上的重新設(shè)計(jì)，我們也對(duì)代碼進(jìn)行了大量的重構(gòu)，采用了新的框架，讓網(wǎng)站更快，也為以后代碼的維護(hù)、升級(jí)便利性進(jìn)行了重新設(shè)計(jì)。Reed Emmons，是這次改版的負(fù)責(zé)人，在這篇文章將分享我們?nèi)绾巫尲~約時(shí)報(bào)這首老船更快更酷。

很少有機(jī)會(huì)能夠在像紐約時(shí)報(bào)這么老資格和規(guī)模的網(wǎng)站進(jìn)行一場(chǎng)「從頭來過」的重構(gòu)和設(shè)計(jì)工作，我這里說的從頭來過，不僅僅是視覺設(shè)計(jì)上的重新設(shè)計(jì)，更 是一個(gè)重新發(fā)明整個(gè)數(shù)碼傳媒平臺(tái)。紐約時(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 頁面，這些頁面儲(chǔ)存在我們數(shù)據(jù)中心的硬盤上。當(dāng)編輯發(fā)布一篇新的文章時(shí)，會(huì)生成和寫入一個(gè) html 文件。我們擁有自己的 html 模板，可以讓我們根據(jù)需求添加不同的插件。當(dāng)一篇文章要渲染的時(shí)候，引擎會(huì)自動(dòng)添加廣告和渲染。這套系統(tǒng)的速度和性能足以支持紐約時(shí)報(bào)網(wǎng)站的高流量，所以 到今天為止，也不是特別需要升級(jí)這套系統(tǒng)。

這套系統(tǒng)一個(gè)很大的不足就是缺乏動(dòng)態(tài)控制性。網(wǎng)頁的 html 是固定的，但是其中的腳本和樣式表是需要不斷改變的，我們的前端開發(fā)團(tuán)隊(duì)必須圍護(hù)歷史上創(chuàng)建的每一套模板。這也導(dǎo)致了為什么一個(gè)兩年前發(fā)布的新聞同上周發(fā) 布的文章，會(huì)存在一些不同。我們團(tuán)隊(duì)的一個(gè)前端架構(gòu)師Eitan Konigsburg，在去年的開放日活動(dòng)曾經(jīng)就我們的技術(shù)架構(gòu)歷史做過分享。

一個(gè)聰明的框架

為了適應(yīng)更高級(jí)和復(fù)雜的設(shè)計(jì)，我們構(gòu)建了自己的響應(yīng)式 JavaScript 引擎，可以讓我們根據(jù)自己的需求使用不用的media queries斷點(diǎn)，這個(gè)引擎可以通過直接在 html 中添加不同的 class 類命來實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。同時(shí)，我們使用了 LESS 預(yù)處理，使得css 更易圍護(hù)的同時(shí)也滿足了我們大部分用戶的瀏覽器兼容性需求。盡管對(duì)于用戶來說，網(wǎng)站的變化十分精細(xì)，但是一篇文章在不同的設(shè)備和瀏覽器，可以產(chǎn)生20種不 同的適應(yīng)變化。以下為我們使用 LESS 的一個(gè)例子。

.ribbon {
   ...
   // responsive
   // 1020
   .viewport-medium-50 & {
      .offset(0, 1, 0, left);
    }

   // 1200
   .viewport-large-20 & {
      .offset(0, 2, 0, left);
   }
}

根據(jù)不同的分辨率和設(shè)備方向，我們的框架可以自動(dòng)渲染出不同的界面，還可以根據(jù)需求添加不同類型的廣告，每篇文章對(duì)應(yīng)的網(wǎng)頁有超過100個(gè)可以自定義修改的地方。

模塊化 Javascript

這次重構(gòu)需要大量的 js 代碼重寫以支持大量的訂制功能。一個(gè)功能強(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)行測(cè)試。

除此之外，我們還使用了一些其他的新技術(shù)：

新的 PHP 渲染框架

切換到一個(gè)對(duì)動(dòng)態(tài)內(nèi)容要求更好的網(wǎng)站，我們需要使用一個(gè)新的渲染引擎，可以快速地利用于大量的有不同需求的文章�，F(xiàn)有的 PHP 框架提供了堅(jiān)實(shí)的基礎(chǔ)，但是我們?nèi)匀贿x擇重新構(gòu)建一個(gè)。為了滿足訂制服務(wù)不同的內(nèi)容需求，我們?cè)陂_發(fā)的時(shí)候使用考慮到增加靈活性的需求，我們的框架必須動(dòng) 態(tài)呈現(xiàn)不同的布局和配置在同一頁的能力。

新架構(gòu)簡(jiǎn)化了開發(fā)的，還讓我們可以僅用幾行代碼就能創(chuàng)建強(qiáng)大的應(yīng)用程序�，F(xiàn)在開發(fā)一個(gè)應(yīng)用可以使用已有的組件，顯著地減少了開發(fā)時(shí)間。此外，可用模塊的復(fù)用節(jié)省了我們的大量的時(shí)間。

提高服務(wù)器端緩存速度

有如此多的動(dòng)態(tài)頁面，我們的平臺(tái)需要一個(gè)強(qiáng)大的反向代理來保證 PHP 后臺(tái)不會(huì)崩潰。去年五月紐約時(shí)代的移動(dòng)端的Varnish 系統(tǒng)成功給了我們信心，我們相信 Varnish 也是這次我們的最佳選擇。Varnish 是高度可配置，從服務(wù)器緩存中讀取速度極大地加快了。它使得那些經(jīng)常變化的界面能被緩存更短時(shí)間。

前端優(yōu)化：

利用 Grunt，我們優(yōu)化了我們的代碼，減少了 http 請(qǐng)求，現(xiàn)在我們的文章頁包含被同步下載的三個(gè)壓縮了的 css 和 js 文件，相比以前的80多個(gè)沒精簡(jiǎn)的文件，這是一個(gè)顯著的改善。在網(wǎng)頁的底部，我們使用 RequireJS 異步加載多個(gè)文件進(jìn)行前端渲染。無 Cookie 的 CDN 和緩存HEAD 的設(shè)置使得我們的讀者將下載更少字節(jié)的代碼。配合 Varnish 系統(tǒng)，如今我們打開一篇文章能控制在500-1000毫秒之內(nèi)。

所有的js 都可能造成阻塞，所以最大的性能改進(jìn)來自于廣告的異步加載。廣告是令人頭疼的，我們不能簡(jiǎn)單地直接將代碼添加到 DOM 之中，而不擔(dān)心頁面的內(nèi)容被覆蓋。相反，所有的廣告必須在 iframe和 Content 載入完畢后才進(jìn)行加載，以避免導(dǎo)致頁面渲染的潛在問題。

開發(fā)的過程中我們還使用了圖片 sprites，我們所有的圖片都存在一個(gè)叫 sprite-me 的文件夾中，配合 grunt 和 less 我們可以很方便地生成和使用不同的圖標(biāo)和圖片，確定圖像的 postion 位置。最后，我們使用 Underscore 編譯的 HTML 模板，所以他們可以容易地”required”，并迅速地渲染出來。

總結(jié)：

如今我們的新平臺(tái)包含了更強(qiáng)大的發(fā)布和互動(dòng)功能，我們還在不斷地改進(jìn)這個(gè)平臺(tái)，不斷地迭代。這個(gè)新平臺(tái)也讓我們的團(tuán)隊(duì)能更加敏捷地進(jìn)行新的學(xué)習(xí)和開發(fā)。盡管我們還有很多遺留技術(shù)問題，但是我們已經(jīng)建立了一個(gè)值得依賴的技術(shù)團(tuán)隊(duì)，相信以后大家能更好地開發(fā)解決問題。

下一次，我們的團(tuán)隊(duì)的其他開發(fā)者將深入介紹這次重構(gòu)使用的這些技術(shù)，從 Websockets 到 php 框架，盡請(qǐng)期待。

本譯文在 Google doc 上公開，如果您發(fā)現(xiàn)某些翻譯的錯(cuò)誤、不妥，或?qū)δ承┱Z句有更好的翻譯，歡迎修改和潤色。

https://docs.google.com/document/d/1kEGcSm6AiUBgsPKDiHo0FJYGhEtNElA5Iagizy2vA1Q/edit?usp=sharing