Ao longo do tempo, a Web, e mais particularmente os websites, tem evoluído e tem-se expandido cada vez mais para lá da ideia que lhes deu origem: a simples consulta e partilha de informação através de documentos que poderiam estar interligados.

Hoje em dia constatamos que muitos dos recursos (provavelmente os mais populares!) a que acedemos através da Web são aplicações e serviços que dependem da possibilidade de moldar o conteúdo que é apresentado consoante o utilizador. Um bom exemplo é o site do seu banco que lhe mostra informação e lhe permite tomar decisões que dizem respeito à sua conta bancária. Outro exemplo é o Facebook, que lhe mostra os conteúdos consoante as pessoas ou páginas que segue.

Os navegadores também se tornaram mais robustos e permitem cada vez mais interação com os websites que apresentam. Acaba por ser exatamente essa a grande vantagem das aplicações Web, visto que qualquer utilizador que tenha um browser relativamente recente será capaz de utilizar aplicações cada vez mais capazes para os mais variados fins.

Mas de que forma é que isto se relaciona com Vue.js?

A evolução foi gradual e continua ainda hoje. A introdução de JavaScript em navegadores ocorreu por volta de 1995 e durante alguns anos essa linguagem acabaria por ser usada principalmente para aspetos relacionados com o dinamismo meramente visual dos websites. Só a partir de certa altura, com a possibilidade de descarregar conteúdo de forma assíncrona (sem ter de refrescar a página – o dito AJAX), é que o JavaScript começou a ter um papel mais relevante no que toca à gestão do estado, isto é, dos dados que dizem respeito a um determinado utilizador numa determinada altura.

Frameworks como o Vue.js facilitam a tarefa de manter separadas e mais fáceis de desenvolver duas das preocupações do programador, que são a gestão dos dados sobre o estado do utilizador e a forma como esses dados são apresentados. Para além disso também proporcionam ao programador uma maior modularidade no desenvolvimento da sua aplicação, de modo a tornar o código mais fácil de manter.

Para ilustrar passemos a um exemplo prático em Vue.js em que temos um editor muito simples que permite ao utilizador escrever e consultar um conjunto de notas.

JavaScript:

Javascript

HTML:

HTML

Resultado:

resultado

Exemplo funcional aqui.

Reparem em como não foi necessário fazer qualquer manipulação no DOM. O Vue.js mantém o conteúdo que é apresentado automaticamente sincronizado com os dados.

Em primeiro lugar vinculamos uma instância de Vue ao elemento que corresponder ao seletor na propriedade “el”, neste caso o elemento com o id “notas-app”.

Ao associarmos o evento de clique à função ‘adicionar’ da instância, através do ‘@click’ existente no botão, quando o utilizador preenche os campos e carrega no botão é adicionado um objeto ao array “notas” que depois, através da directive “v-for” do Vue, é apresentado em HTML – um elemento “li” por cada nota.

Tudo isto, reiteramos, sem haver a necessidade de o programador se preocupar em redesenhar os dados que são apresentados cada vez que uma nova nota é adicionada – o Vue trata disso! Também não é preciso estar manualmente a ir buscar os dados aos campos do formulário porque o conteúdo dos campos fica automaticamente ligado ao valor do objeto que estiver declarado na directive “v-model”. Uma outra funcionalidade útil são os filters que permitem um controlo mais granular sobre a forma como uma determinada informação é apresentada. Neste caso utilizamos um filter para apresentar apenas as iniciais do autor em vez do seu nome completo, sendo que os dados mantêm o valor original.

Como é mantida a separação entre os dados e a “camada” de apresentação, o DOM, torna-se mais simples uma eventual interação com o servidor.

Esperamos que esta pequena introdução vos tenha sido útil e vos motive a aprender mais sobre formas de manter o vosso JavaScript organizado e mais fácil de manter. Afinal, JavaScript não tem de ser sinónimo de código “esparguete”.