[翻譯] 紐約時報網站改版背後的技術

看板Translate-CS作者PsMonkey (痞子軍團團長)時間10年前 (2014/02/18 00:53)推噓2(2推 0噓 0→)

留言2則, 2人參與討論串1/1

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