Pinterest adota React como motor de renderização de template

Em 2015, Pinterest tomou a decisão de mudar para React, mas isso foi mais fácil dizer do que fazer em um site com milhões de usuários ativos. Na verdade, a história da mudança do Pinterest para React é a história sobre a mudança do Pinterest para o JavaScript.

O engenheiro de software do Pinterest Imad Elyafi escreveu que a decisão de mudar para o React foi parcial porque o React é “um padrão de ouro”, com “uma grande comunidade de desenvolvedores e que oferece excelente velocidade e desempenho de engenharia”. O React é frequentemente usado em cenários universais de JavaScript, nos quais os mesmos templates são usados no servidor e no navegador.

[awprm urls=https://imasters.com.br/desenvolvimento/organizando-uma-aplicacao-com-react/]

O motor do lado do servidor do Pinterest é o Django, usando a engine de templates Jinja, enquanto seu JavaScript do lado do cliente é o Nunjucks, que é inspirado no Jinja. Isso causou uma duplicação de código, exigindo uma versão Python e uma versão JavaScript. Mas eles não poderiam largar tudo e mudar para React, disse a engenheira de software do Pinterest Jessica Chan: “Precisávamos de uma solução que nos permitisse iterativamente converter as centenas de componentes do Pinterest sem interromper o trabalho de equipes de produtos ou a experiência dos pinners. O primeiro passo foi consolidar um único motor de renderização de template entre cliente e servidor antes que pudéssemos substituir esse motor por outra coisa. Se o servidor pudesse interpretar o JavaScript, usaríamos o Nunjucks para processar templates e compartilhar nosso código do lado do cliente, então poderíamos avançar com uma migração iterativa para o React”.

Antes mesmo de tocar no React, a equipe rearquitetou o servidor de renderização para usar os templates Nunjucks existentes. Em vez de renderizar os templates Jinja dentro do Django, eles construíram um processo lateral com Node para renderizar templates, disse Chan. “No final, ficamos com os processos Node atrás de uma camada de proxy Nginx e arquitetamos a interface de tal forma que cada solicitação de rede seria um render sem estado, o que nos permitiu agrupar as solicitações para o grupo de processos e escalar o número de processos conforme necessário”.

De acordo com o site InfoQ, quando esse sistema ficou no lugar, eles puderam lentamente mudar para a renderização de componentes baseada em React. Elyafi disse que eles estenderam o Nunjucks para renderizar o React onde fosse possível:

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

A palavra-chave component diz ao motor de template que um componente baseado em React deve ser usado em vez da versão Nunjucks. Assim, o trabalho do Pinterest com o React está em andamento.