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!
  • Novo e maior número primo é descoberto

    Seja bem-vindo M77232917! Esse é o nome dado ao maior número primo já conhecido pela humanidade 😱

  • Call for papers: Seja um palestrante da BrazilJS 2017

    Todos os presentes na BrazilJS Conf tem uma grande parcela de importância. Mas você pode deixar sua marca na história da maior conferência JavaScript do mundo sendo um dos palestrantes!

  • JavaScript só é difícil para quem começa do fim

    JavaScript só é difícil para quem começa do fim. Há poucos anos, desenvolver web apps era muito fácil, por exemplo, usávamos PHP (ou qualquer outra linguagem server side, como Python ou Ruby), alguns ifs e fors e renderizávamos HTML facilmente. Só precisávamos conhecer HTML, CSS e uma linguagem server side. Vamos voltar no tempo e […]

Patrocinadores BrazilJS

Bronze

BrazilJS® é uma iniciativa NASC.     Hosted by Getup