0

vue.js - comandos e funções

A
Alfredo Neto

O que é Vue JS?

Vue JS é um framework Javascript open source, lançado em Fevereiro de 2014 por Evan You, Desenvolvedor que atuava em um dos projetos do Google Creative Labs, em 2014.

Foi nesse projeto que descobriu a necessidade de criar uma ferramenta mais completa e ágil para lidar com grandes UIs.

Vue JS é muito utilizado para criar aplicações single page (página única) e também para desenvolver vários tipos de interfaces, que possuem necessidades de maior interação e experiência mais valorosa para o usuário.

É importante frisar que Vue JS se enquadra em framework Javascript progressivo, isto é, Vue JS pode ser conectado em um pedaço de uma aplicação server-side que precisa otimizar a UI.

>>Leitura recomendada: Introdução à linguagem Javascript

Para que serve Vue JS?

Com mais de 150k de estrelas no Github, Vue.JS está entre os frameworks Javascript para criação de interfaces mais populares do mundo. Há quem diga que, entre os Desenvolvedores, a aprovação de Vue JS beira os 90%.

Com versatilidade, modularização e facilidade de aprendizado, o framework vem se tornando a escolha número 1 entre profissionais da área que procuram criar websites profissionais e de alto desempenho.

Apostando em uma arquitetura enxuta, Vue requer uma configuração mínima na criação de um projeto e pode ser facilmente integrado com uma aplicação já existente através de uma simples tag script

Essa característica coloca o framework em um lugar de destaque tanto para desenvolvedores, devido a facilidade de aprendizado e estrutura limpa do projeto, quanto para grandes empresas. 

Isso acontece graças à fácil integração de um novo colaborador ao um projeto já em andamento, mesmo sem um conhecimento prévio da ferramenta. 

Arquitetura de Vue JS

Aplicações que utilizam Vue são constituídas de componentes criados com a sintaxe HTML, CSS e Javascript em um único arquivo .vue, que facilitam o isolamento e a manutenção de funcionalidades. 

Cada componente constitui um escopo isolado dos demais, tanto em lógica quantos nos estilos.

A renderização dos dados é feita baseada em uma virtual DOM que é atualizada apenas quando os dados de um componentes são alterados, aumentando o desempenho e descartando atualizações desnecessárias.

Arquitetura de Vue JS

Cada componente é criado usando a sintaxe HTML para estruturação com os dados atrelados via Javascript, o que supre as limitações do HTML como a capacidade de iterar sobre uma coleção de dados ou decidir se uma tag deve ser renderizada ou não.

Um exemplo de componente básico em Vue seria:

<div id="app"> {{ message }}</div>new Vue({ el: '#app', data: { message: "Hello Vue!" }})

view raw

gistfile1.txt hosted with ❤ by GitHub

Diretivas de Vue JS

Na manipulação de dados são utilizadas diretivas diretamente integradas ao HTML via Javascript de forma dinâmica por meio de interpolação, essa integração existe para dar maior flexibilidade à linguagem de marcação. 

Para iteração, por exemplo, é utilizada a diretiva v-for que percorre elementos de um array e retorna o dados desejado.

Existem diretivas específicas para cada utilização, como para renderização condicional: v-if, ou para demonstração de textos: v-text e para conexão com eventos: v-on:event, onde o event seria o evento que chamaria a função desejada (click, submit, scroll).

Ferramentas para Vue JS

Para otimizar o processo de desenvolvimento, Vue também proporciona uma interface CLI onde é possível executar diferentes funções comuns a projetos para front-end. 

Uma das funções mais conhecidas é o vue create <projeto> que é utilizado para iniciar um novo projeto pré-configurado com ferramentas comuns e indispensáveis, tais como: 

  • Babel – transpilador
  • Typescript – tipagem estática
  • Vuex – gerente de estados aplicação
  • Router – gerente de rotas
  • Eslint – formatador de código
  • Jest – testes

Vue-cli também proporciona uma arquitetura de plugins onde é possível acoplar diferentes funcionalidades como análise de métricas, build otimizado e deploy a diferentes provedores.

Vue-devtools é outra ferramenta desenvolvida para facilitar o processo de desenvolvimento de aplicações que utilizam Vue JS, funciona como uma extensão do browser e serve para visualizar o estado de cada componente que está sendo renderizado. 

Esta função dá ao desenvolvedor a capacidade de debugar a aplicação de maneira rápida e visual.

Os editores de texto mais utilizados também proporcionam ferramentas para que a experiência de desenvolvimento com Vue seja a melhor possível, provendo syntax highlighting, snippets  e inteliSense. 

A extensão mais utilizada para essa funcionalidade é chamada Vetur que é utilizada juntamente com o VSCode, para o atom tem o ide-vue.

Para concluir

Temos todas as ferramentas que precisamos para criar as melhores aplicações que pudermos imaginar, com uma experiência incrível, tanto para nós, desenvolvedores, quanto para o cliente final. 

Com uma comunidade tão grande e empenhada, a maioria dos desafios mais comuns já têm uma solução consolidada e, provavelmente, muito bem documentada, basta que as usemos da melhor forma.

Como mais uma das milhares ferramentas desenvolvidas para o ecossistema Javascript, Vue também não é a bala de prata que servirá para todos os problemas, muitos deles ainda terão de ser desenvolvidos e há muita coisa a ser melhorada. 

O melhor de tudo é que Vue é uma ferramenta open source e todos são convidados a contribuir, ainda mais com uma comunidade muito apaixonada onde é relativamente fácil encontrar ajuda e poder debater sobre diferentes soluções.

0
0

Comentários (0)

alfredo gelk neto

Brasil