推 mgrn:推！ 02/18 18:42
推 naruto861214: 支持這個詞真的很微妙 11/20 22:52
譯文出處：http://luolei.org/2014/02/
the-technology-behind-the-nytimes-com-redesign-chinese/
本文為簡體中文版重新潤飾為繁體中文版。
除了譯文中整段漏譯的部份之外，其餘盡量遵循譯文的譯法，
只修改繁體中文慣用詞彙、以及我個人習慣不翻譯的名詞。
______________________________________________________________________
原文網址：[The Technology Behind the NYTimes.com Redesign][Origin]
[Origin]: http://open.blogs.nytimes.com/
2014/01/08/the-technology-behind-the-nytimes-com-redesign
紐約時報英文網站今年進行了一次改版，
這次改版不僅僅是給一艘大船重新刷了遍油漆那麼簡單，
除了外觀上的重新設計，我們也對程式碼進行了大量的重構，
採用了新的框架，讓網站更快，
也為以後程式碼的維護、升級便利性進行了重新設計。
Reed Emmons，是這次改版的負責人，
在這篇文章將分享我們如何讓紐約時報這首老船更快更酷。
很少有機會能夠在像紐約時報這麼老資格和規模的網站
進行一場「從頭來過」的重構和設計工作，
我這裡說的從頭來過，不僅僅是視覺設計上的重新設計，
更是一個重新發明整個數位傳媒平台。
紐約時報的上次一次視覺改版是在 2006 年，
但是我們得回溯到 2000 千禧年才有如此規模的從底層的重構和改版。
我們決定重構用戶端和服務端以支持我們新的服務、設計和新聞報導，
比如說更佳的網站性能、 responsive layout 等等。
儘管有些舊有的程式碼依舊保留或者進行了深度重構，
大部分老的程式碼都被刪除或者僅僅是用來做參考。
靜態頁面發布：歷史的教訓
------------------------
直到今天為止，紐約時報的大部分網頁內容還是靜態 html 頁面，
這些頁面儲存在我們數據中心的硬碟上。
當編輯發布一篇新的文章時，會生成和寫入一個 html 文件。
我們擁有自己的 html 模板，可以讓我們根據需求添加不同的插件。
當一篇文章要 render 的時候，引擎會自動添加廣告並 render。
這套系統的速度和性能足以支持紐約時報網站的高流量，
所以到今天為止，也不是特別需要升級這套系統。
這套系統一個很大的不足就是缺乏動態控制性。
網頁的 html 是固定的，但是其中的 script 和 stylesheet 是需要不斷改變的，
我們的前端開發團隊必須維護歷史上創建的每一套模板。
這也導致了為什麼一個兩年前發布的新聞跟上週發布的文章，會存在一些不同。
我們團隊的一個前端架構師 Eitan Konigsburg，
在去年的開放日活動曾經就我們的技術架構歷史做過分享。
一個更聰明的 layout
--------------------
為了適應更高級和複雜的設計，
我們構建了自己的 responsive JavaScript 引擎，
可以讓我們根據自己的需求使用不同的 media queries 斷點，
這個引擎可以通過直接在 html 中添加不同的 class
來實現 responsive 設計。同時，我們使用了 LESS 預處理，
使得 css 更易維護的同時也滿足了我們大部分用戶的瀏覽器兼容性需求。
儘管對於用戶來說，網站的變化十分精細，
但是一篇文章在不同的設備和瀏覽器，可以產生 20 種不同的 responsive 變化。
以下為我們使用LESS 的一個例子。
.ribbon {
...
// responsive
// 1020
.viewport-medium-50 & {
.offset(0, 1, 0, left);
}
// 1200
.viewport-large-20 & {
.offset(0, 2, 0, left);
}
}
根據不同的分辨率和設備方向，我們的框架可以自動渲染出不同的界面，
還可以根據需求添加不同類型的廣告，
每篇文章對應的網頁有超過 100 個可以自定義修改的地方。
結構化 JavaScript
-----------------
這次重構需要大量的 JS 程式碼重寫以支持大量的訂製功能。
一個功能強大的前端框架是十分有必要的，
這可以讓我們使用不同的 JS 結構並且能良好兼容共存。
Backbone.js 和 RequireJs 給我們提供了一套框架和標準。
我們選擇 Backbone 因為它提供了令人滿意的靈活性和自定義性。
jQuery、Modernizr、SockJS、Underscore.js 和 Hammer.js
是我們使用的一些 library，
我們同樣使用了如 Mocha 和 Chai 來進行測試。
除此之外，我們還使用了一些其他的新技術：
* 使用 Backbone mixins 來減少重複的程式碼
* 從基本的 view 拓展所有 Backbone view（以及 model）
* Throttling / debouncing expensive events like scroll and resize
新的 PHP rendering framework
-----------------------------
切換到一個對動態內容要求更好的網站，我們需要使用一個新的渲染引擎，
可以快速地服務大量不同需求的文章。
現有的 PHP framework 提供了堅實的基礎，但是我們仍然選擇重新構建一個。
為了滿足訂製服務不同的內容需求，
我們在開發的時候使用考慮到增加靈活性的需求，
我們的 framework 必須動態呈現不同的 layout 和設定在同一頁的能力。
新 framework 簡化了開發，
還讓我們可以僅用幾行程式碼就能創建強大的應用程式。
現在開發一個應用可以使用已有的組件，顯著地減少了開發時間。
此外，可用 module 的重複使用，節省了我們的大量的時間。
提高服務器端快取速度
--------------------
有如此多的動態頁面，
我們的平台需要一個強大的 reverse proxy 來保證 PHP 後台不會崩潰。
去年五月紐約時代的行動網站的 Varnish 系統成功給了我們信心，
我們相信 Varnish 也是這次我們的最佳選擇。
Varnish 是高度可設定，從服務器快取中讀取速度極大地加快了。
它使得那些經常變化的界面能被快取更短時間。
前端優化
--------
利用 Grunt，我們優化了我們的代碼，減少了 HTTP 請求，
現在我們的文章頁包含被同步下載的三個壓縮 CSS 和 JS 檔，
相比以前的 80 多個沒精簡過的檔案，這是一個顯著的改善。
在網頁的底部，我們使用 RequireJS 非同步步加載多個文件進行前端 render。
無 Cookie 的 CDN 和快取 HEAD 的設置使得我們的讀者將下載更少的程式碼。
配合 Varnish 系統，如今我們打開一篇文章能控制在 500～1000 毫秒之內。
所有的 JS 都可能造成阻塞，所以最大的性能改進來自於廣告的非同步載入。
廣告是令人頭疼的，我們不能簡單地直接將代碼添加到 DOM 之中，
而不擔心頁面的內容被覆蓋。
相反，所有的廣告必須在 iFrame 和 DOMContentLoaded 載入完畢後才進行載入，
以避免導致頁面 render 的潛在問題。
開發的過程中我們還使用了圖片 sprites，
我們所有的圖片都存在一個叫 sprite-me 的目錄下，
配合 Grunt 和 LESS 我們可以很方便地生成和使用不同的 icon 和圖片，
確定圖像的 postion 位置。
最後，我們使用 Underscore 編譯的 HTML 模板，
所以他們可以容易地 ”required”，並迅速地 render。
總結
----
如今我們的新平台包含了更強大的發布和互動功能，
我們還在不斷地改進這個平台，不斷地迭代。
這個新平台也讓我們的團隊能更加敏捷地進行新的學習和開發。
儘管我們還有很多遺留技術問題，但是我們已經建立了一個值得依賴的技術團隊，
相信以後大家能更好地開發解決問題。
下一次，我們的團隊的其他開發者將深入介紹這次重構使用的這些技術，
從 Websockets 到 PHP framework，盡請期待。
本譯文在 Google doc 上公開，如果您發現某些翻譯的錯誤、不妥，
或對某些語句有更好的翻譯，歡迎修改和潤色。
https://docs.google.com/document/d/
1kEGcSm6AiUBgsPKDiHo0FJYGhEtNElA5Iagizy2vA1Q/edit?usp=sharing
--
錢鍾書： 說出來的話
http://www.psmonkey.org
比不上不說出來的話
Java 版 cookcomic 版
只影射著說不出來的話
and more......
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.115.232.4