nytimes-redesign

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

纽约时报英文网站今年进行了一次改版,这次改版不仅仅是给一艘大船重新刷了遍油漆那么简单,除了外观上的重新设计,我们也对代码进行了大量的重构,采用了新的框架,让网站更快,也为以后代码的维护、升级便利性进行了重新设计。Reed Emmons,是这次改版的负责人,在这篇文章将分享我们如何让纽约时报这首老船更快更酷。

很少有机会能够在像纽约时报这么老资格和规模的网站进行一场「从头来过」的重构和设计工作,我这里说的从头来过,不仅仅是视觉设计上的重新设计,更是一个重新发明整个数码传媒平台。纽约时报的上次一次视觉改版是在2006年,但是我们得回溯到2000千禧年才有如此规模的从底层的重构和改版。我们决定重构用户端和服务端以支持我们新的服务、设计和新闻报道,比如说更佳的网站性能、响应式布局等等。尽管有些旧有的代码依旧保留或者进行了深度重构,大部分老的代码都被删除或者仅仅是用来做参考。

静态页面发布:历史的教训

直到今天为止,纽约时报的大部分网页内容还是静态 html 页面,这些页面储存在我们数据中心的硬盘上。当编辑发布一篇新的文章时,会生成和写入一个 html 文件。我们拥有自己的 html 模板,可以让我们根据需求添加不同的插件。当一篇文章要渲染的时候,引擎会自动添加广告和渲染。这套系统的速度和性能足以支持纽约时报网站的高流量,所以到今天为止,也不是特别需要升级这套系统。

这套系统一个很大的不足就是缺乏动态控制性。网页的 html 是固定的,但是其中的脚本和样式表是需要不断改变的,我们的前端开发团队必须围护历史上创建的每一套模板。这也导致了为什么一个两年前发布的新闻同上周发布的文章,会存在一些不同。我们团队的一个前端架构师Eitan Konigsburg,在去年的开放日活动曾经就我们的技术架构历史做过分享。

一个聪明的框架

为了适应更高级和复杂的设计,我们构建了自己的响应式 JavaScript 引擎,可以让我们根据自己的需求使用不用的media queries断点,这个引擎可以通过直接在 html 中添加不同的 class 类命来实现响应式设计。同时,我们使用了 LESS 预处理,使得css 更易围护的同时也满足了我们大部分用户的浏览器兼容性需求。尽管对于用户来说,网站的变化十分精细,但是一篇文章在不同的设备和浏览器,可以产生20种不同的适应变化。以下为我们使用 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 模块并且能良好兼容共存。Backgon.js 和 RequireJs 给我们提供了一套框架和标准code。我们选择 Backbon 因为相比 RequireJS它提供了令人满意的灵活性和自定义性。Jquery,Modernize,SockJS,Underscore.js 和 Hammer.js 是我们使用的一些库,我们同样使用了诸如 Mocha 和 Chai 来进行测试。

除此之外,我们还使用了一些其他的新技术:

新的 PHP 渲染框架

切换到一个对动态内容要求更好的网站,我们需要使用一个新的渲染引擎,可以快速地利用于大量的有不同需求的文章。现有的 PHP 框架提供了坚实的基础,但是我们仍然选择重新构建一个。为了满足订制服务不同的内容需求,我们在开发的时候使用考虑到增加灵活性的需求,我们的框架必须动态呈现不同的布局和配置在同一页的能力。

新架构简化了开发的,还让我们可以仅用几行代码就能创建强大的应用程序。现在开发一个应用可以使用已有的组件,显著地减少了开发时间。此外,可用模块的复用节省了我们的大量的时间。

提高服务器端缓存速度

有如此多的动态页面,我们的平台需要一个强大的反向代理来保证 PHP 后台不会崩溃。去年五月纽约时代的移动站的Varnish 系统成功给了我们信心,我们相信 Varnish 也是这次我们的最佳选择。Varnish 是高度可配置,从服务器缓存中读取速度极大地加快了。它使得那些经常变化的界面能被缓存更短时间。

前端优化:

利用 Grunt,我们优化了我们的代码,减少了 http 请求,现在我们的文章页包含被同步下载的三个压缩了的 css 和 js 文件,相比以前的80多个没精简的文件,这是一个显著的改善。在网页的底部,我们使用 RequireJS 异步加载多个文件进行前端渲染。无 Cookie 的 CDN 和缓存HEAD 的设置使得我们的读者将下载更少字节的代码。配合 Varnish 系统,如今我们打开一篇文章能控制在500-1000毫秒之内。

所有的js 都可能造成阻塞,所以最大的性能改进来自于广告的异步加载。广告是令人头疼的,我们不能简单地直接将代码添加到 DOM 之中,而不担心页面的内容被覆盖。相反,所有的广告必须在 iframe和 Content 载入完毕后才进行加载,以避免导致页面渲染的潜在问题。

开发的过程中我们还使用了图片 sprites,我们所有的图片都存在一个叫 sprite-me 的文件夹中,配合 grunt 和 less 我们可以很方便地生成和使用不同的图标和图片,确定图像的 postion 位置。最后,我们使用 Underscore 编译的 HTML 模板,所以他们可以容易地”required”,并迅速地渲染出来。

总结:

如今我们的新平台包含了更强大的发布和互动功能,我们还在不断地改进这个平台,不断地迭代。这个新平台也让我们的团队能更加敏捷地进行新的学习和开发。尽管我们还有很多遗留技术问题,但是我们已经建立了一个值得依赖的技术团队,相信以后大家能更好地开发解决问题。

下一次,我们的团队的其他开发者将深入介绍这次重构使用的这些技术,从 Websockets 到 php 框架,尽请期待。

本译文在 Google doc 上公开,如果您发现某些翻译的错误、不妥,或对某些语句有更好的翻译,欢迎修改和润色。 https://docs.google.com/document/d/1kEGcSm6AiUBgsPKDiHo0FJYGhEtNElA5Iagizy2vA1Q/edit?usp=sharing

支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

罗磊's Picture
罗磊

前端工程师,深圳人,广州暨南大学,目前就职于上海阅文集团(原腾讯文学)用户体验部,视频自媒体 ZUOLUOTV 制作人,写原创博客八年,简书推荐作者,跑过6场马拉松,骑行过318国道,跟着老婆全世界乱逛,微信公众号「罗磊啰嗦」