O Facebook tinha um problema. Precisava de criar grandes aplicações em que a informação se altera constantemente ao longo do tempo. È algo bem possível de se fazer, mas é bem difícil de manter. A performance das aplicações é muito importante e sabemos que hoje usamos e abusamos do Javascript para criar interfaces dinânimas, divertidas e inovadoras.
Estas interfaces usam demasiada memória dos dispositivos, o que faz com que a experiência do utilizador não seja a melhor.
E porque não utilizar os recursos do servidor para libertar os recursos dos dispositivos?
É algo possível com React. Esta biblioteca usa o conceito já anteriormente criado de Dom Virtual.
O que é a Dom Virtual?
A Dom Virtual pouco difere da Dom real, no entanto esta encontra-se em memória e pode ser processada no lado do cliente ou no lado do servidor e permite assim uma maior velocidade de processamento/manipulação da dom.
Os elementos são convertidos para elementos virtuais, são aplicados na Dom Virtual, são aplicadas as alterações e em seguida, retornado o novo elemento atualizado para ser aplicado na Dom real.
Renderização no lado do cliente ou no servidor?
Será você que decide, se pretende que o servidor faça tudo, processe o seu código de cliente e retorne o resultado, poderá usar o Redux por exemplo, que é uma versão melhorada e talvez mais usada do Alt.
Acho que é a parte fantástica desta biblioteca. Pode libertar praticamente todo o processamento no lado de cliente, aumentando assim a velocidade de manipulação da Dom. O utilizador agradece ( será tudo mais rápido ). No entanto, está a saturar o servidor.
Caso pretenda manter o processamento no lado do cliente, só precisa do React com a configuração básica.
Será tudo atualizado quando a informação altera
Quando é que precisamos de fazer alterações na Dom? É frequente alterar a Dom quando temos novas informações e pretendemos apresentar com o mesmo layout. Para isso, usamos funções do tipo setIntervals ou usamos bibliotecas como socket.io, no entanto toda a lógica de alteração de informação vai ser executada no lado do cliente.
Com o React, é possível transferir para o lado do servidor todo esse processamento e a própria biblioteca já foi desenhada a tentar respeitar esta ideia.
Contém funções internamente para detectar quando a informação foi alterada e assim executar o código correspondente. Deverá estudar o funcionamento dos componentes.
Cada componente é uma parte da aplicação. Imagine o botão Gosto do Facebook. Pode ser um componente. Como se encontra separado de certa forma de todo o código do resto da aplicação, será fácil encontrar o código fonte num projeto de trabalho, é de certa forma independente, o que permite que caso falhe, por algum motivo que nem o Chuck Norris sabe, apenas ficará indisponível esta funcionalidade de toda a aplicação.
Estes componentes contém States que lhe permitem alterar a informação.
Todos os States podem ser armazenados numa Store, permitindo ao React comportar-se como uma espécie de History, em que todos os dados já renderizados podem ser representados novamente sem ter que fazer um novo pedido ao servidor.
Poderá também usar o Webpack que lhe permite criar um simples pacote de toda a aplicação, com todas as configurações, ambientes de desenvolvimento e executa tudo com um simples npm run!
Página oficial:
https://facebook.github.io/react
Comments