Vue.js e os frameworks reativos

O motivo do surgimento e da popularidade dessas soluções

O que é o Vue.js?

Antes de saber o que o Vue.js é, você deve entender o problema que ele resolve.

O que é o DOM?

DOM é o acrônimo de Document Object Model. É uma API para acessar o documento que o navegador está exibindo. Como os documentos HTML possuem uma estrutura hierárquica, o DOM expõe o documento como se fosse um grafo (uma árvore, mais especificamente).

Quando o navegador faz o parsing do HTML, um grafo é criado para representar aquele HTML. Este grafo pode ser acessado no JavaScript através do DOM.

O seguinte HTML:

<div id="minha-div">
<p>Star</p>
<p>Wars</p>
</div>

Pode ser representado pela seguinte árvore (exemplo ilustrativo):

            tag: div
id: minha-div
/ \
/ \
/ \
tag: p tag: p
texto: Star texto: Wars

Quando alguma parte do documento muda, o seus nodos expostos pelo DOM também mudam para refletir o estado atual do documento.

Como atualizar o documento através do DOM?

Através do DOM, o JavaScript é capaz de alterar em tempo real o documento exibido na tela.

O seguinte trecho JavaScript busca um nodo através do DOM e modifica a sua propriedade innerHTML:

document.getElementById('paragrafo').innerHTML = 'Vader'

Por consequência, um documento que antes era assim:

<p id="paragrafo">Anakin</p>

Se torna assim:

<p id="paragrafo">Vader</p>

Por que interagir com o DOM é difícil?

Com o passar dos anos, as páginas da web ficaram mais complexas. A home do Facebook, por exemplo, gera um documento com milhares de nodos que precisam ser massivamente atualizados de acordo com as ações do usuário e de requisições ao servidor.

Desenvolver páginas tão complexas é uma tarefa extremamente custosa, uma vez que o programador precisa estar atento a todos os estados possíveis que o documento pode assumir, bem como precisa programar cada interação com a DOM de acordo com cada evento possível no ciclo de vida da página.

Como facilitar a criação de páginas complexas?

Muitos frameworks e bibliotecas surgiram para facilitar a criação de páginas da web. O jQuery é o mais conhecido de todos. No entanto, o jQuery não resolve a raiz do problema, pois ele não elimina a necessidade de interagir com o DOM (pelo contrário, ele incentiva o programador a fazer isso).

Nos últimos anos, a comunidade JavaScript entendeu que já não era mais uma boa ideia fazer código dessa forma. Assim sendo, alguns frameworks reativos foram criados para resolver o problema, notavelmente Vue.js e React.

O que é um framework reativo?

Com programação reativa o programador descreve relações entre o documento e o seu código JavaScript. O framework é que vai interagir com o DOM para manter tudo sincronizado.

Considere o seguinte template HTML do Vue.js:

<p>{{nome}}</p>

(Dado que existe uma variável chamada nome no JavaScript)

Com essa template o programador descreveu uma relação entre a variável nome e aquele nodo do documento. A partir daí, o Vue.js se encarregará de manter ambos sincronizados automaticamente. Em outras palavras, quando o valor da variável nome mudar, o nodo do documento também mudará sem que o programador interaja explicitamente com o DOM.

É como se o documento estivesse reagindo às mudanças.

Programação reativa!

Agora, finalmente, o que é o Vue.js?

O Vue.js é um framework reativo escrito em JavaScript.

Tudo é possível com Vue.js?

Embora os frameworks reativos tenham retirado um peso das costas do programador, é preciso se adequar a esse estilo diferente de programação.

Esses frameworks partem do princípio de que têm total controle sobre o DOM, ou seja, que a responsabilidade de interagir com o DOM é unicamente deles.

Se o programador modificar o documento diretamente através do DOM, o framework não saberá desta modificação e perderá a sincronia. Isso gera bugs bastante difíceis de resolver.

Dado o seguinte template HTML do Vue.js:

<span id="nome">{{nome}}</span>

Considerando que o valor da variável nome é 'Luke', o documento renderizado será:

<span id="nome">Luke</span>

Ou seja, ambos estão sincronizados.

Se, depois disso, o conteúdo do documento for modificado diretamente com jQuery:

$('#nome').text('Jar Jar Binks')

A variável nome não será atualizada, pois o Vue.js não tem como saber que o documento foi modificado. O sistema já não estará sincronizado.

Por isso, devemos evitar de misturar código declarativo (Vue.js, React) com código imperativo (jQuery, JavaScript puro).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade