No mar de libs e frameworks: conhecendo o Vue.js - Parte I

Em meio a tantos frameworks/libs JavaScript hoje em dia, ficamos por vezes (leia-se muitas vezes) perdidos no momento de escolher a tecnologia que mais vai se encaixar com o nosso projeto e até mesmo com o nosso gosto e estilo de programar. Então, por muitas vezes, acabamos caindo no convencional, naquela que é mais utilizada por outros. E o que pode acabar acontecendo é estarmos usando uma tecnologia que não é a melhor para a nossa necessidade.

Ou falta recurso na hora da implementação da nossa ideia, ou sobra. Por isso - por muitas vezes ouvir falar e raramente encontrar conteúdo sobre - resolvi então falar sobre Vue.js, na intenção de o apresentar e poder aumentar o seu leque de opções na hora de escolher o que mais pode se encaixar em seu projeto.

Antes de tudo, para deixar bem claro neste artigo, a intenção de comparação entre libs e frameworks é unicamente para você se identificar com as libs e poder escolher a que mais se encaixa com as necessidades de sua aplicação.

E como o objetivo aqui é explicar como os benefícios do Vue e como ele funciona, as comparações serão feitas na intenção de você entender se ele se adequa a sua necessidade e não “falar mal” de outros frameworks, pois como bem sabemos, tudo vai de necessidades.

O que é o Vue?

Vue é uma lib/framework javascript reativo para o desenvolvimento de componentes e construção de SPA’s. Para dar uma breve explicada para aqueles que estão iniciando na área e ainda não sabem o que significa um componente e ser reativo, aí vai uma overview!

Componentes

Componentes são códigos que podem ser reaproveitados em sua aplicação - neste caso, com estrutura composta normalmente por um conjunto de linguagens: HTML (possibilitando usar tags customizadas), CSS, e JavaScript. Neste caso, organizados todos em um mesmo arquivo; se você nunca trabalhou com nenhum tipo de frameworks que trabalha com componentes aqui vai um spoiler: eles trabalham nesses estilo, tudo junto e misturado :) . Caso você nunca tenha trabalhado com esse tipo de tecnologia, recomendo antes de tudo que você entenda esses conceitos (lib, framework, componentes) antes de seguir adiante com qualquer desenvolvimento utilizando-os; é importante que você entenda bem o conceito básico para depois se adequar a esse tipo de desenvolvimento. Sendo assim, deixarei alguns links abaixo que podem auxiliar você, deixando assim esse artigo mais fácil e podendo embasar os seus estudos.

Reatividade

Basicamente, a função de uma lib reativa é observar um objeto javascript e refletir qualquer mudança do seu estado no DOM do html. A imagem abaixo pode nos dar uma noção de como isso acontece.

Imagem representativa da Reatividade no vue
  • Quando passamos um novo objeto como uma instância Vue como opção de dados, suas propriedades são convertidas em getters/setters.

  • Por sua vez, getters e setters permitem que sejam executados acompanhamentos de dependência e mudança de notificação quando as propriedades são acessadas ou modificadas.

  • Assim, quando o setter da dependência é acionado, ele notifica o watcher que, por sua vez, faz com que o componente seja renderizado novamente.

Se você quiser saber mais como funciona a reatividade no Vue (não é o foco deste artigo) pode conferir no site do vuejs.org neste link, que deixará bem explicadinho como ele trabalha com essa questão.

Instalação - Passo a passo na construção de um novo projeto utilizando o Vue.

Pré-requisito: NodeJS

Instalando o Vue na sua máquina:

npm install vue-cli -g 

Criando um novo projeto: Dentro do seu diretório de preferência, digite o comando abaixo para iniciar um novo projeto.

vue init webpack-simple nome-do-projeto 

O template utilizado neste caso foi o webpack-simple, porém existem vários e você pode escolher o que mais se encaixa no seu caso neste link. Quando o comando acima for executado, irá ser exibido um número de questões que você deverá (ou não) responder. Essas questões se referem a quais tecnologias você quer usar em seu projeto, como pré-processadores css, libs js, entre outros. Isso facilitará na inicialização de seu projeto: ao finalizar a configuração inicial respondendo às perguntas, essas tecnologias já estarão instaladas em seu projeto sem você ter que se preocupar em instalar cada uma delas à mão.

Seguindo os passos:

cd nome-do-projeto npm install npm run dev 

Resumindo, você entrará na pasta do projeto, instalará as dependências e, por último, levantará o servidor com o último comando.

É bom lembrar aqui que o Vue utiliza Babel (transpiler) e webpack também :) . E como fica a nossa estrutura inicial?

A estrutura básica da nossa aplicação

Logo após todas essas configurações e instalação, nossa estrutura básica inicial ficará assim:

   src/     |__ router                    # vue-router     |__ screens                   # telas do projeto, ex.: home, contact etc...         |__ Home            |__ Home.vue           # código da tela de home            |__ components         # componentes restritos a home                |__ Post.vue         |__ Contact             |__ Contact.vue             |__ components                |__ Form.vue     |__ shared        |__ components             # componentes que serão compartilhados em diferentes telas            |__ ListItem.vue  

A imagem abaixo nos mostra como fica a estrutura de nomeação e declarações de componentes e módulos no Vue.

Estrutura de nomeação e declarações no vue

Basicamente, teremos nosso arquivo principal chamado de App.vue, que por sua vez é um módulo. Um módulo declara um componente, que é composto por um Template (html), Script (JavaScript) e Estilo (CSS). Essa estrutura é a base que você precisa saber para começar a entender como o Vue funciona e começar a trabalhar com ele! =D

O que vem por ai?


Gostou desse artigo? Ficou curiosx para saber mais? Em breve, virá a parte II falando sobre:

  • A estrutura de uma aplicação básica

  • No que o Vue é baseado e no que se destaca

  • Vue e Single File Components

  • "União" de dois frameworks?

  • Flexibilidade, Performance, VueJS livre

  • Popularidade do Vue!