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

Em:

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!

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup