Pinterest 转向通用 JavaScript 和 React

在 2015 年，Pinterest 决定转向 React。但是对于一个有数百万活跃用户的站点来说，谈何容易。 Pinterest 转向 React 的故事本质上是 Pinterest 转向通用 JavaScript 的故事。

Pinterest 的软件工程师 Imad Elyafi写道，决定转向React 的部分原因是React 是“黄金标准”，有着“庞大的开发者社区”以及它“能极大地提升工程效率和质量”。React 通常用在通用JavaScript 场景下，在此服务器和浏览器使用同一类模板。

Pinterest 的服务器端引擎是 Django，它使用 Jinja 模板引擎。然而，Pinterest 的客户端的 JavaScript 使用 Nunjucks ，它的灵感来源于 Jinja，也与之相似。这导致了代码的重复，一份 Python 版和一份 JavaScript 版。但是他们无法抛弃一切而转向 React，Pinterest 的软件工程师 Jessica Chan 说道。

我们需要一个方案，能让我们在不打断产品组工作和影响用户体验的情况下，迭代地转换数以百计的 Pinterest 构件。第一步就是要将客户端和服务器端统一到单一的模板渲染引擎，然后再将引擎替换掉。如果服务器能解释 JavaScript，使用 Nunjucks 渲染模板以及共享客户端代码，我们就能进行迭代迁移到 React。

在触及 React 之前，该团队重新设计了服务器渲染引擎的架构以使用现成的 Nunjucks 模板。Jessica Chan 说，他们没有在 Django 的内部渲染 Jinja 模板，而是创建了一个进程使用 Node 来渲染模板。“最终，我们在 Nginx 代理层后使用常驻的 Node 进程，将接口架构设计为每一个网络请求都是无状态的渲染过程。我们因此能将请求分发到这些进程组，并在需要的时候扩展进程数。”

一旦该系统上线，他们就能慢慢转向基于 React 的组件渲染模式。Elyafi 说只要可能他们都扩展 Nunjucks 模板语言来渲染 React。

{% if in_react %}
   {{ component('MyReactComponent', {pinId: '123'}) }}
{% else %}
   {{ module('MyDenzelComponent', pinId='123') }}
{% endif %}
 

component 关键字告诉模板引擎应该使用基于 React 的组件，而不是基于 Nunjucks 的。Pinterest 转向 React 的努力还在继续。

查看英文原文： Pinterest’s Switch to Universal JavaScript and React

感谢冬雨对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。