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.


Posts relacionados


4 respostas para “RactiveJS - Templates Mustache reativos”

  1. Avatar de Rafael Rinaldi

    Bacana o overview. Ractive é um projeto muito interessante e tem muita similaridade com um outro cara chamado Vue (http://vuejs.org) que tenho usado bastante. Ambos implementam conceitos bacanas que ficaram conhecidos atraves do AngularJS (filtros, computed properties, etc).

    Acho esse tipo de framework ideal pra quando não se trabalha diretamente com single page applications, mas quando apenas "pedaços" da sua aplicação possui componentes que precisam compartilhar informações entre si de forma simples e direta. Sem depender de todo um ecossistema por traz como é o caso do proprio AngularJS.

    Abraço.

    1. Avatar de Fernando

      Boa sugestão, Rafael! Essa lib eu não conhecia. =)

      Dentro de algum tempo postarei um artigo falando um pouco sobre o VueJS.

      Sobre usar tais ferramentas para trabalhar com single pages applications, eu não vejo problema algum. Vejo que tais ferramentas fornecem uma boa ajuda para quando:

      • Precisa-se trabalhar com pedaços que precisam compartilhar informações entre si (como você citou)
      • Precisa trabalhar com atualização constantes (ex.: Em tempo real) dos dados
      • Precisa-se trabalhar com reatividade por algum motivo aleatório (no caso do projeto necessitar disso no futuro, por exemplo)

      E concordo sobre o ponto de que ferramentas assim são bem interessantes quando não há o desejo (ou necessidade) de depender de todo um ecossistema como AngularJS, pois, realmente, para reatividade não faz sentido usar Angular apenas por causa de sua reatividade.

      Abs.

  2. Avatar de Cezar Luiz
    Cezar Luiz

    Com o Angular, já não consigo resolver isso de uma forma já bem performática? Ou o Angular peca nisso?

    Obrigado.

    1. Avatar de Fernando

      Cezar, boa noite.

      O AngularJS é um framework completo que tem como uma das features a reatividade automática na renderização das páginas conforme os dados presentes nela mudam. O RactiveJS, por outro lado, é apenas uma biblioteca (no caso, uma template engine) que visa auxiliar sites e aplicações que não necessitam de todos os recursos do AngularJS para serem reativos e responderem às modificações dos dados também. São objetivos diferentes como um todo, e, no fundo, tanto a feature específica para reatividade do Angular quanto o RactiveJS por si só devem ter implementações bem parecidas.

      Esse foi um dos motivos, por exemplo, que eu citei o BackboneJS como sendo uma excelente integração: Pelo fato do BackboneJS não ter tais tipos de features pré-embutidas, o RactiveJS serve como um excelente complemento para adicionar reatividade em ferramentas que precisem dela.

      Abraços.

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.