RactiveJS – Templates Mustache reativos

Em algumas aplicações, o ritmo de manipulação de DOM é tão intenso que se torna um problema de performance, situação que você pode presenciar facilmente ao manipular animações com SVG ou está mantendo uma conexão em tempo real ao servidor e precisa atualizar a interface do usuário correspondentemente. Nesses casos, das duas uma: Ou você gasta código pra caramba (mesmo usando uma biblioteca como o jQuery) manipulando cada elemento DOM individualmente, ou você apenas substitui todo o conteúdo do container dos elementos que você quer manipular. E aí reside um enorme problema de performance..

Sabe qual? Simples: Na primeira opção, de manipular cada elemento do DOM individualmente, há um grande processamento de atualização do navegador: Cada vez que uma operação no DOM é executada, o navegador bloqueia a execução do Javascript enquanto a atualização é feita, e, embora possa ser um processo muito rápido para o usuário, não é rápido para o código Javascript, o que faz com que a sua aplicação como um todo fique mais lenta. Já na segunda opção, bem, embora pareça ser um pouco mais rápida do que a primeira opção, você acaba por forçar o navegador à redesenhar TODA a área do container, o que em alguns casos, além de ser totalmente ineficiente, pode provocar maiores gastos de energia em dispositivos móveis, por exemplo.

Template engines  voltadas para uso no navegador normalmente sofrem deste segundo problema, pois em sua maioria se preocupam apenas em como processar o template o mais rápido possível. O RactiveJS é uma exceção, pois possui uma implementação inteligente que atualiza os elementos apenas quando necessário. Isso significa se você tem uma expressão no template que realiza a soma entre duas variáveis, e tal expressão se encontra em um elemento num template com mais de 10000 itens, o RactiveJS vai detectar e vai atualizar somente o elemento afetado, o que melhora a performance da sua página como um todo.

Mas como ele faz isso de forma eficiente? Simples: Usando uma árvore descrevendo a estrutura do seu template e as váriaveis que são usadas, o que possibilita que, quando uma variável é atualizada, a busca pelos elementos que devem ser atualizados seja também muito rápida e eficiente.

Isso faz com que o RactiveJS seja muito eficiente e portanto o torna adequado para resolver problemas de performance em páginas que possuem atualização frequente, facilitando também o trabalho do programador, que no fim das contas acaba por ter uma template engine inteligente e sabe que, com uma chamada à um método, pode atualizar facilmente todos os elementos que se referem àquele elemento, de maneira simples, prática, e rápida.

Gostou do conteúdo desse post? Apoie o blog pagando a partir de R$1/mês através da nossa página no Apoia.se! Isso me ajudará a manter o blog no ar, além de trazer mais coisas legais para vocês! Obrigado desde já! 😀