TL;DR
ReactJS é a biblioteca criada pelo Facebook para criação de interfaces. Pensando no mundo MV* qual vivenciamos hoje, este seria o V (view).
Através de uma api simples qual previlegia o uso do javascript e com uma performance acima da apresentada pelos seus concorrentes, o ReactJS vem ganhando cada dia mais adeptos.
Building Blocks
Fortemente inspirado pelo conceito de componentes, trazendo duas grandes características que o desenvolvedor deve se concentrar: Components e_Elements_.
Components
É o template para criação de elementos. Fazendo um paralelo com a web atual, exemplos de components são div, button, label entre outros.
Elements
Element é a instância de um component. Por exemplo quando inserimos um button em uma página HTML, este elemento é a materialização/instância de um componente no DOM.
Complicado?
Vamos ver como funciona na prática:
O código acima cria um element baseado no component div e renderiza o mesmo no DOM.
Legal! Mas usar diretamente o HTML não é mais eficiente?
A resposta: normalmente não.
E eis que lhes apresento o Virtual DOM.
Virtual DOM
Como todos sabem a manipulação de DOM além de não ser uma das coisas mais simples no mundo web, ainda tem um grande impacto na performance de nossas aplicações.
E com isso em mente os engenheiros do facebook/instagram criaram o virtual DOM que na prática é a representação do DOM em memória. Deste modo, todos os elements que criamos utilizando React.createElement são criados e mantidos nesse ambiente virtual antes de serem renderizados no DOM original.
A mágica acontece de verdade nas atualizações. Imagine o seguinte cenário: numa tela HTML temos um campo de texto do tipo numeric e um botão de adicionar. Toda vez que clicamos no botão adiciona em 1 o valor do campo de texto.
Uma atividade super simples como adicionar um handler para o evento de click do botão e dentro do handler pegar o campo de texto através da api de DOM e somar 1 ao value do mesmo. Tudo lindo, mas tem alguns problemas:
- adicionar e manter event handlers nos elements do DOM consomem bastante memória.
- modificar o conteúdo da página gera reflow (nova renderização do _element_modificado e seus filhos).
Agora imagine tudo isso acontecendo em uma página com centenas ou talvez milhares de elements no DOM. Não é uma experiência muito boa.
Com o virtual DOM esses problemas são minimizados com a técnica conhecida como “o menos é mais”, ou seja, toda vez que algo é alterado nos elements que foram criados através do método React.createElement. O ReactJS renderiza esse conteúdo no virtual DOM e através de um algoritmo super otimizado calcula a diferença entre o DOM atual e o DOM com as alterações e são essas diferenças que são renderizadas no DOM original. E desta forma causa o mínimo de impacto possível fazendo com que nossas páginas estejam sempre responsivas e rápidas para o usuário.
Conclusão
ReactJS é uma nova opção para criação de interfaces focada na simplidade de desenvolvimento e alta performance. Com baixo consumo de memória e um gerenciamento eficiente do DOM esta biblioteca vem ganhando o mundo.
Por hoje é isso!
Espero que tenham gostado dessa introdução e até a próxima!
Links de referência:
– DOM (Document Object Model)
– Reflow
– ReactJS
