Compartilhe esta publicação
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.
Um futuro chamado web components - Palestra do Zeno Rocha no BrazilJS de 2013
Framework: o que é e como ele pode ajudar? - Esse artigo dá uma base para saber o que é um framework, diferenças entre frameworks e libs.
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.
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.
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!