Adotando React em 2017

Publicado por Fabio Carvalho no dia dev

Preocupado na construção de aplicações cada vez mais performáticas, escaláveis e reutilizáveis, Jordan Walke, em meados de 2013, iniciou o projeto React influenciado pelo XHP, um projeto de melhoria para PHP e Hack (linguagem criada pelo Facebook) com o propósito de construção e reuso de componentes HTML, mas com uma sintaxe parecida com XML. Posteriormente, seguindo o mesmo conceito, foi criada uma abordagem para JavaScript chamada JSX, que é hoje a mais utilizada na criação de componentes com ReactJS.

Tem como grande vantagem sua capacidade de componentização e reuso de componentes ao longo da aplicação, aumentando a produtividade e diminuindo consideravelmente custos e tempo empregado na construção de uma aplicação.

Ao contrário do que muita gente pensa, React não é um framework, seu objetivo é oferecer melhorias para interfaces, tendo seu uso exclusivo na camada de view da aplicação. Claro que podemos estender seu uso utilizando arquiteturas como Flux ou Redux, o que nos possibilita um gerenciamento unidirecional de estados.

Performance

Se diferenciando de arquiteturas presentes na época (meados de 2013) como “two way data binding” usado pelo o AngularJS, o React promove um fluxo “one-way data flow”, o que basicamente pode ser definido como a atualização completa da interface mediante ações sobre ela. O React se beneficia do Virtual DOM para alterações velozes do DOM (Document Object Model), ou melhor, a sua total substituição.

O conceito: “criar é mais rápido que modificar” foi empregado no React e hoje tem se mostrado, de fato, como uma solução simples e performática. A lib não lida diretamente com o DOM, ela mantém uma representação em memória e com base na diferenciação (conforme imagem abaixo) entre o DOM real com o virtual (diffing), é renderizado uma nova estrutura. Toda a processo acontece a partir do famoso (ou nem tanto), the diffing algorithm.

incident

“When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.” - React Reconciliation

Adoção

O primeiro case famoso a se beneficiar do React foi o chat Messenger do Facebook. Com o tempo mais cases foram surgindo, como Instagram e Airbnb, que passaram a utilizar React inclusive em suas aplicações mobile, usando o React Native.

Netflix - a high performance TV user interface

Em 2015 a galera da Netflix embarcou no objetivo de criar uma nova interface que permitisse a renderização do seu conteúdo em algo próximo a 60 frames por segundo. Todos sabemos que hoje a plataforma está presente tanto em um PS4, com grandes capacidades gráficas, como também em dispositivos com memória limitada.

Visando sempre a performance, foram definidos critérios para a validação como: tempo de renderização mediante eventos, tempo de inicialização da aplicação, frames por segundo e também o uso de memória. O projeto envolvia um alto nível de criticidade, assim foi criado um react like, mais conhecido como React-Gibbon’s API, que ao invés de elementos comuns como: divs, span’s, inputs etc. Possui apenas um único elemento: widget.

Globo Play

Um case brasileiro de utilização do React em aplicações de streaming foi o Globo Play, uma plataforma de vídeos da Rede Globo. Umas das premissas do projeto era produzir um produto com suporte ao mobile, sem perder qualidade. Após uma série de experimentos foram definidos a utilização de tecnologias, tais como React, React-Router e Mappersmith.

Caso queira aprofundar mais no assunto, confere o screencast feito por Jean Carlo Emmer. ;)

Dores?

Muitos problemas podem surgir quando a aplicação ganha escala ou é introduzido em uma aplicação existente sem um planejamento prévio.

No processo de transição podem surgir muitas dúvidas como: definir uma estrutura básica de projeto, organização, padrões etc.

Outro fator que pode causar estranhamento no início, é escrever “HTML” (na verdade é JSX) dentro do componente JavaScript.

Alternativas

Com a repercussão causada pelo ReactJS e sua proposta de Virtual DOM, aliado à evolução do JavaScript com ES6, o React serviu de ponto de partida para muitas outras libs, trazendo um grande ganho para o cenário de desenvolvimento front-end, permitindo a construção de aplicações cada vez mais performáticas, escaláveis e fáceis de gerenciar.

Preact

Uma alternativa ao React, com apenas 3kb, o Preact tem o objetivo de entregar performance e eficiência, utilizando ao máximo o Virtual DOM. Com uma syntax parecida com React, promove uma curva menor de aprendizado. Saiba mais.

Inferno

Eis que surge um componente de peso ao React. Com apenas 9kb, Inferno promete um ganho de performance de 40% a 110%, se comparado ao React, em produção. Desenhado para browser/server, não possui suporte a React Native. Também não oferece suporte à string refs e seu sistema de eventos é parcial. O projeto teve tanta repercussão, que seu criador, Dominic Gannaway, recentemente foi contratado pelo Facebook para integrar o time responsável pelo React. Podemos esperar grandes surpresas pela frente! Saiba mais.

incident

React Fiber

Na última Facebook Developer Conference F8 em 2017 os engenheiros do Facebook anunciaram que resolveram reescrever todo o core algorithm do React, inserindo uma série de melhorias e features, aproveitando todos os aprendizados (erros e acertos) que tiveram no projeto anterior.

O React Fiber, mantém a mesma API já conhecida por nós, mas com um foco em facilitar a criação rápida de apps de qualidade, sem perda de performance e focado em responsive (mobile). Para mais detalhes, veja aqui.

Outra lib anunciada foi o React VR, que permite a construção e interação com realidade virtual (VR), utilizando todos os benefícios do React e JavaScript para a construção de aplicações.

Conclusão

Atualmente estamos em processo de transição aqui na RD, planejando a integração do React com o RD Station. Um dos principais benefícios que levamos em conta para a adoção foi sua capacidade de reuso, com a criação de componentes independentes.

Que tal deixar um feedback nos comentários abaixo? ;D

Referências

Fabio Carvalho

Fabio Carvalho

Front-End Engineer

Comentários