Vue.JS Cover

Vue.JS: Breve Introdução

O Vue.JS é um framework que, pela simplicidade, vem ganhando popularidade e está em constante crescimento desde sua criação. Porém, foi apenas ao final do ano passado (2017) que o conheci e passei a acompanhar essa poderosa ferramenta.

Para começar, vou partir da premissa de que você é um novato no mundo dos frameworks front end, logo, alguns dos tópicos poderão parecer irrelevantes aos olhos de leitores mais experientes. Dito isso, vamos começar!

Se você é uma pessoa que conhece o mínimo desse universo, já deve ter ouvido falar de Angular ou React. São frameworks bem famosos e cada um chama atenção da sua maneira.  React (do Facebook), é usado por aqueles que preferem programação funcional, com pouco estado e declarativa. Já o Angular (do Google) é voltado para aqueles que preferem programação  orientada a objetos. Ambos são poderosos, mas cada um se adapta melhor a certos usos específicos.

O Vue (leia-se View) vem se destacando por adaptar o melhor de cada framework e executar as mesmas tarefas de maneira mais simples, sendo excelente para prototipagem de projetos.

Ah, então isso significa que ele não é bom para projetos grandes? Beeep, errado .. ele é um excelente framework para isso, pois é simples de ser implementado e adaptado ao projeto. Além disso, sua curva de aprendizado se mostra menor que a dos outros frameworks.

Aqui temos seu nível de complexidade comparado ao de outros frameworks em um artigo muito bem escrito pelo Vinicius Reis.

Então, agora que já falamos sobre sua complexidade, vamos falar do porquê dele ser tão simples. Dentre as principais características, temos:

Vue.JS Progressive Framework
Vue.JS Progressive Framework
  • Progressivo: abrange todas as etapas da sua aplicação, desde rotas até o render para o usuário. Por isso a facilidade de se adaptar a qualquer projeto.
  • Versátil: permite a adição de funcionalidades extras através do carregamento de bibliotecas.
  • Reativo: é baseado em quatro fundamentos destacados pelo Manifesto Reativo, sendo eles:
    1. Elasticidade reage a demanda da aplicação aumentando ou diminuindo a alocação dos recursos;
    2. Responsividade reage a todas as ações dos usuários fazendo com que erros sejam detectados rapidamente e tratados com a máxima eficácia;
    3. Resiliência reage a todas essas falhas sem que o processo pare;
    4. Orientado a mensagens  usa passagem de mensagens assíncronas para estabelecer fronteiras entre os componentes;

E é neste último aspecto em que desponta uma das características marcantes do Vue, o Virtual DOM (Document Object Model).

Explicando de maneira rápida: o Virtual DOM é uma “cópia” simplificada do DOM da página a ser renderizada. Cada mudança de estado causada pelo usuário é aplicada primeiro ao Virtual DOM, o qual é recalculado e só então é consolidado com o DOM real. O processo pode parecer redundante, mas tem um impacto dramático no desempenho da aplicação.

No núcleo do Vue.js está um sistema que nos permite, declarativamente, renderizar dados no DOM usando uma sintaxe de template (pedaços de HTML). Tais arquivos, que são chamados de Single File Components, usam a extensão *.vue e podem ser lidos por outros componentes apenas através da declaração do seu caminho.

Como dito acima, o Vue trabalha com o conceito de componentes, que são basicamente os responsáveis por encapsular o código e ajudar na hora da reutilização de uma operação, sendo assim podemos dizer que o componente é um elemento personalizado que o Vue compila e anexa à sua instância.

Parece ter ficado um pouco complexo mas vamos ao código para entender melhor passo a passo:

1) Para você usar o Vue.js, a primeira coisa que precisa fazer é declarar seu caminho na tag de script no head da sua página:

2) No Body de seu HTML coloque uma DIV com o ID que vai querer referenciar no Vue:

3) No campo do Script coloque a sua instância do Vue referenciando no “el” o ID que definiu na sua DIV:

4) Ainda no campo do Script, crie um componente desta maneira:

5) Use o seu componente dentro da sua DIV “app”:

Link do exemplo: https://jsfiddle.net/cckLd9te/1165/

Desta maneira o seu componente carregará todo o template com o HTML, JS e CSS. Lembrando que você pode usar um arquivo externo para fazer isso.

Agora que você deu seu primeiro passo com o Vue.js, espero que se aprofunde cada vez mais neste universo.

Um toque aos leitores mais engajados: recentemente, o criador do Vue (Evan You) falou sobre os planos de crescimento para o framework

Com base em tudo que foi dito, tenha certeza de que é uma boa ideia acompanhar o crescimento deste incrível framework.

 

Um engenheiro Júnior estranho mas gente boa, programador que gosta de estar sempre aprendendo e compartilhando o que sabe.

Published by

Lucas Borges

Um engenheiro Júnior estranho mas gente boa, programador que gosta de estar sempre aprendendo e compartilhando o que sabe.

Leave a Reply

Your email address will not be published. Required fields are marked *