BT

Disseminando conhecimento e inovação em desenvolvimento de software corporativo.

Contribuir

Tópicos

Escolha a região

Início Notícias Pinterest: na adoção do JavaScript Universal e React

Pinterest: na adoção do JavaScript Universal e React

Favoritos

Em 2015, o Pinterest decidiu começar a usar o React, mas isso foi mais fácil dizer do que implementar na aplicação que possui milhões de usuários ativos. A jornada da troca para o React foi na verdade uma história sobre como o Pinterest migrou para o JavaScript universal.

O engenheiro de software Imad Elyafi escreveu que a motivação para decidir utilizar React foi porque o React é "golden standard", com uma grande comunidade de desenvolvedores e que possibilita uma excelente velocidade no desenvolvimento. O React é geralmente utilizado em cenários de JavaScript universais, quando os mesmos templates são utilizados no server e no browser.

O servidor do Pinterest roda Python/Django, utilizando o Jinja como a engine de template enquanto que no lado cliente (JavaScript) utilizava o Nunjucks, o qual é similar e inspirado no Jinja. O que causava duplicação de código, necessitando uma versão de código em Python e uma outra versão em JavaScript. No entanto, eles não poderiam abandonar todo projeto para adotar o React, disse a engenheira de software Jessica Chan:

Nós precisávamos de uma solução que nos permitisse de maneira iterativa converter centenas de componentes sem interromper o trabalho dos times de produto ou a experiência dos usuários. O primeiro passo foi utilizar uma única engine de template para renderizar no cliente (navegador) e no servidor antes que fosse substituído a engine por alguma outra. Se o servidor pudesse interpretar JavaScript, poderia utilizar a Nunjuncks para renderizar template e utilizar o mesmo código do lado cliente, e assim mover adiante com a etapa de adotar o React.

Mas antes deles começarem a trabalhar com React, a equipe refez a arquitetura do renderizador para utilizar os templates Nunjucks já existentes. Ao invés de utilizar o Jinja que faz parte do Django, foi criado um processo paralelo em Node.js apenas para renderizar os templates, disse Chan. "No final, acabamos tendo uma camada de proxy reverso utilizando o Nginx configurado de uma forma para que cada requisição seja uma renderização stateless. Isso permitiu escalar horizontalmente e aumentar o número de processos de acordo com a necessidade.
Somente depois dessa migração, a equipe pode lentamente alterar para a utilização de componentes React. Elyafi disse que foi preciso estender a linguagem de template Nunjucks para permitir renderizar o componente React somente quando possível:

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

A palavra chave component diz à engine de template que o componente React deveria ser utilizado ao invés de utilizar a versão do Nunjucks. A equipe do Pinterest ainda está trabalhando no processo de adoção do React.

Avalie esse artigo

Relevância
Estilo/Redação

Conteúdo educacional

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

BT