譯文出處：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