In 2015, Pinterest made the decision to switch to React, but that was easier said than done on a site with millions of active users. The story of Pinterest's switch to React is really the story about Pinterest's switch to universal JavaScript.
Pinterest software engineer Imad Elyafi wrote that the decision to move to React was partially because React is "a golden standard", with "a large developer community and enables excellent engineering velocity and performance." React is often used in universal JavaScript scenarios, where the same templates are used on the server and in the browser.
Pinterest's server side engine is Django, using the Jinja templating engine while their client side JavaScript used Nunjucks, which is similar to and inspired by Jinja. This caused code duplication, requiring a Python version and a JavaScript version. But they couldn't drop everything and switch to React, says Pinterest software engineer Jessica Chan:
We needed a solution that would allow us to iteratively convert the hundreds of Pinterest components without interrupting the work of product teams or the experience of Pinners. The first step was to consolidate to a single template rendering engine between client and server before we could replace that engine with something else. If the server could interpret JavaScript, use Nunjucks to render templates and share our client-side code, we could then move forward with an iterative migration to React.
Before they even touched React, the team re-architected the server renderer to use the existing Nunjucks templates. Instead of rendering the Jinja templates inside of Django, they built a side process used Node to render templates, says Chan. "In the end, we went with standing up Node processes behind an Nginx proxy layer and architected the interface in such a way that each network request would be a stateless render. This allowed us to farm requests out to the process group and scale the number of processes as needed."
Once this system was in place, they could slowly switch to React-based component rendering. Elyafi says they extended the Nunjucks template language to render React where possible:
{% if in_react %}
{{ component('MyReactComponent', {pinId: '123'}) }}
{% else %}
{{ module('MyDenzelComponent', pinId='123') }}
{% endif %}
The component keyword tells the template engine that a React-based component should be used instead of the Nunjucks version. Pinterest's work with React is ongoing.
