Se você costuma criar muitos projetos de desenvolvimento, com certeza já deve ter se perguntado quais ferramentas seriam as melhores e as mais eficientes para auxiliar nessa função. Será que é React, Vue ou Angular?
Quem sabe aquele framework que você ouve tanto falar não seria a melhor escolha, ou talvez aquela lib, que acabou de ser lançada, resolva todos os seus problemas?
É fácil se perder no meio de tantas opções e acabar fazendo escolhas erradas, e isso não é ruim, já que todo erro se torna um aprendizado novo e uma melhoria para o próximo projeto.
Para te ajudar nessa decisão, falaremos sobre uma ferramenta muito consolidada e com uma grande quantidade de contribuidores, você já deve ter ouvido falar: Vue JS.
Para desenvolvedores que possuem experiência com Vue.JS e também para aqueles querem mudar de área, temos muitas oportunidades em Vue.
Para contextualizar temos que deixar claro que este artigo não é sobre a escolha perfeita que funcionará para todos os casos sem exceção, até por que essa ferramenta ainda terá de ser criada.
O que será apresentado aqui é uma das soluções mais utilizadas e robustas utilizadas para a criação de websites e que, com certeza, pode ser a solução para alguma de suas dores atuais.
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.
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:
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.
Se você quiser mais, temos um artigo que ensina como criar uma aplicação com Vue JS. Confira!
