Diurno

React: por que considerá-lo no seu projeto?

por: Ramon Prata

data: 28/06/2019

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin

Considere React no seu projeto

React é uma biblioteca JavaScript usada para criar interfaces de usuário (UI’s), que é mantida pelo Facebook. Desde seu lançamento o React tem crescido consideravelmente entre os desenvolvedores e consequentemente no mercado. Em pouco tempo o React já se tornou uma das bibliotecas JavaScript mais populares, se não a mais popular. Segundo o trends no GitHub e StackOverflow o React já ultrapassou outros famosos frameworks/libraries JavaScript dos últimos 10 anos.

Hoje, além de todas as plataformas do Facebook, o React é usado também por outras grandes companhias como Amazon, Apple, Google, Microsoft, Dropbox, Lyft, Netflix, NYTimes, Pinterest, Snapchat, Spotify, Square, Twitter, Uber, Walmart, Yahoo, Airbnb e claro, a DTI digital. Podemos atribuir essa popularidade ao principal objetivo do time React, que é tonar a criação de UI’s o mais simples possível para o desenvolvedor, e com isso, possibilitar a entrega de uma melhor experiência para o usuário final.

Um dos fatores que simplifica a criação de UI’s utilizando React é o fato dele usar o paradigma de programação declarativa. Dessa forma precisamos nos preocupar mais com “O que” e menos com o “Como”. Em outras palavras, precisamos simplesmente “falar” para o React: “Dado o estado X na minha aplicação, apresente a UI desta forma para o usuário”. É o React então que se encarregará , de forma eficiente, do “Como” isto será feito. Além disso, a programação declarativa torna o código mais previsível e mais fácil de “debugar”.

Outro aspecto que facilita no desenvolvimento com React é que ele é baseado em componentes. A ideia é criar componentes auto-contidos menores e mais simples, e combina-los para construir UI’s mais complexas. Uma analogia legal de fazer seria legos: pequenas partes simples e atômicas compõe um todo mais complexo. A ideia de componentes não é algo do React, é uma abordagem de programação que dentre outras vantagens podemos citar melhor manutenibilidade, testabilidade e mais reuso no código. No caso do React, componentes bem divididos e com “responsabilidades” bem definidas pode implicar inclusive na performance da aplicação.

 

Mas o que seria um componente? E por que auto-contido?

react-question

 

Bem, suponhamos que você esteja desenvolvendo uma aplicação WEB e você queira colocar um botão na tela para que, ao clique do usuário, este botão execute algo. Se você não estiver usando framework/library, e até mesmo usando alguns, você provavelmente precisará de pelo menos duas coisas: criar um HTML que contenha o elemento (botão) que irá aparecer para o usuário e criar um script que capture o clique do usuário para que execute algo. Esse script poderá ser feito no próprio HTML ou em um arquivo separado JS. Nesse cenário você teria dois arquivos minimamente acoplados para criar o que seria a “forma” do elemento (HTML) e seu comportamento (JS).

Note que, ao fazer isto estamos separando tecnologias (HTML/JS) e não interesses. Imagine ainda que sua aplicação terá várias páginas com botões iguais que execute funções diferentes de acordo com o contexto da página. Não seria legal criar uma única “coisa” (componente) que já embarcasse tanto a forma (HTML) quanto o comportamento (JS) e que você pudesse parametrizar as partes condicionadas ao contexto e então conseguir reusar essa única coisa em várias páginas? Se isso fez sentido para você, então você já tem uma ideia do que seria um componente. Um componente nada mais é que um encapsulamento de um ou mais elementos e/ou outros componentes. Ele é auto-contido porque já embarca sua forma (HTML) e seu comportamento (JS) e opcionalmente até mesmo seu estilo (CSS). E pode ser reusado em contextos diferentes conforme as necessidades.

Além de toda preocupação com a simplicidade e em nos ajudar fazer códigos mais testáveis e reusáveis usando as abordagens mencionadas. O time do React investe um grande esforço, talvez o maior, em tornar aplicações React naturalmente performáticas, novamente para que não precisemos nos preocupar muito com o “Como” performar a aplicação. O que faz com que aplicações React sejam performáticas, seguindo as boas recomendações, está no “Como” as coisas acontecem no background.

Há um tempo atrás era muito comum numa aplicação web o usuário interagir com uma página e então aguardar a página ser recarregada por completo, mesmo que depois de recarregada 98% do conteúdo da página ainda era o mesmo. Como isso além de custoso causava uma insatisfação na experiência do usuário, é natural pensarmos numa solução um tanto quanto óbvia: “Por que não alterar no DOM (Document Object Model) somente o que de fato mudou e somente quando necessário, e manter o que não foi alterado?”. Como alterações no DOM real são custosas e lentas, era necessário uma optimização que minimizasse essas alterações. Para fazer isto o React usa o conceito de Virtual DOM. Basicamente quando criamos componentes, não estamos criando elementos HTML e sim elementos React, que são abstrações mais simples dos elementos HTML. Todos os elementos React criados através de componentes compõe o Virtual DOM, que é uma representação virtual do DOM real, em JS, que é mantida em memória.

Dessa forma, com o Virtual DOM o React consegue optimizar as alterações no DOM real. Sempre que o estado da aplicação ou de um subconjunto de componentes altera, o React compara aquela “nova versão” com a versão virtual do DOM que está em memória e se o React encontra diferenças, ele altera no DOM real somente o que identificou que de fato mudou no DOM virtual, mantendo todo o restante do DOM real intacto. Essa é uma das estratégias do React para tornar as aplicações naturalmente performáticas sem que o desenvolvedor tenha que se preocupar tanto com o “Como”. Além disso, o React provê recursos e técnicas que são recomendações simples que podem ser aplicadas em muitos cenários para que possamos optimizar nossos componentes e consequentemente nossas aplicações.

Mesmo com todo esse poder, o React não é um framework que nos provê nativamente tudo que precisamos para criar uma aplicação cliente completa. Ele é uma biblioteca JS para criar UI que conta com um ecossistema de outras bibliotecas JS para cuidar de outros aspectos das aplicações, como: roteamento, controle de estado, autenticação, armazenamento, consumo de API’s, testes, etc. Por se tratar de bibliotecas JS, para cada um desses aspectos é possível encontramos dezenas de “packages” de terceiros, alguns que são exclusivos para aplicações React e outros que podem ser usados em qualquer aplicação JS.

Porém, quando falamos de React, existem algumas bibliotecas muito usadas e recomendadas que compõe seu ecossistema, dentre elas podemos destacar: Redux, React Router, Jest, Enzyme, etc. A escolha de quais bibliotecas usar pode variar de acordo com contexto da aplicação, conhecimento e interesses do time de desenvolvimento e, muito importante, como é o uso/adesão da biblioteca pela comunidade React.

O React tem crescido muito e vai além do que foi abordado aqui. Com React podemos criar ainda aplicações Server Side Rendering usando NodeJS e também aplicações Mobile usando o React Native. Novas features continuam surgindo, melhorando ainda mais essa ferramenta poderosa para que consigamos entregar aplicações ainda melhores aos nossos usuários finais.

Quer saber mais sobre o assunto? Confira esse repositório com várias curiosidades e informações sobre React.