Open cfanbo opened 4 months ago
https://blog.haohtml.com/archives/14883
原文地址: “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.
https://blog.haohtml.com/archives/14883
原文地址: “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.