UI2Code

Começando com Vue

Imagem para Começando com Vue

VuePostado em  7 min de leitura

Quando se trata de front-end, temos muitas bibliotecas e frameworks no mercado. Temos 3 frameworks/bobliotecas(React, Angular e Vue), cuja a comunidade vem crescendo e se fortalecendo nos últimos anos. Dos 3, tive menos contato com o VueJS, que é o tema desse artigo.

Por traz da criação do framework, temos Evan You, que iniciou o projeto quando estava trabalhando na empresa Google, em 2013. Acredito que a primeira coisa que vem à sua cabeça, é o AngularJS. Pois bem, ele usou bastante o AngularJS e estava entre os engenheiros da Google, na época do AngularJS 1.x.

Em seu antigo blog, ele escreveu um artigo com uma reintrodução ao VueJS, em 2015. Nesse artigo, ele buscava explicar os motivos para ser usar e estudar mais sobre o VueJS, sendo que nessa época, já haviam várias opções de bibliotecas e frameworks. Ele também postou o artigo no medium.

Agora vamos voltar um pouquinho e seguir a cronologia.

Releases

O VueJS foi lançado em fevereiro de 2014, com o release Animatrix. A versão v2.6.0, foi lançada em fevereiro deste ano e no momento temos a versão v2.6.10, que foi lançada em 20 de março. Particularmente, gosto muito da consistência dos releases do VueJS.

Irei até pesquisar sobre o intervalo que teve em 2018, mas já olhando o repositório, a preocupação foi apenas com as versões de correção(PATCH) do v2.5.0. Por alto e sem muito conhecimento da rotina de manutenção do framework, me parece bem sólido o lançamento das versões com novas funcionalidades(MINOR).

Basicamente, se tem o processo de lançamento, foco nas correções e logo após o estudo com as versões beta para um próximo release. (Processo bem óbvio, mas é bonito de se ver)

Acho bem interessante a trajetória do framework, em relação a questão de releases e ver que a versão 2.x.x (MAJOR), está sendo sustentada desde 2016. Traz uma segurança. :)

Até o momento, temos os seguintes releases:

No blog atual do Evan You, temos o destaque para as versões:

Sobre o framework

o Vue deperta o meu interesse devido a alguns pontos que já estou acostumado com o React:

  • utiliza a abordagem de DOM virtual.
  • provê componentes visuais reativos e combináveis.
  • mantêm o foco na biblioteca principal, com preocupações como roteamento e gerenciamento de estado global tratadas por bibliotecas companheiras.
  • entre outras vantagens que podem ser vistas nesse comparativo

Mais algumas vantagens

Simplicidade
A idéia básica por trás do desenvolvimento com Vue é obter bons resultados com o mínimo de esforço possível. Ter o armazenamento de todos os códigos de um componente, como HTML, CSS e JavaScript, em um único arquivo.

Integração
Os desenvolvedores podem integrar o Vue a outras estruturas, como o React, permitindo que eles personalizem o projeto de acordo com seus respectivos requisitos.

Fácil aprendizado
De acordo com vários especialistas, o Vue não requer uma grande curva de aprendizado, o que é benéfico para novos desenvolvedores. Requer apenas que os desenvolvedores conheçam os fundamentos de JavaScript, HTML e CSS, que é diferente de outras bibliotecas/frameworks, onde linguagens de programação adicionais são necessárias para codificação avançada.

Documentação
Documentação extensa e detalhada que torna rápido e fácil de aprender. Ele permite que um desenvolvedor inexperiente, com apenas um conhecimento básico de HTML e JavaScript, desenvolva um aplicativo.

Flexibilidade
O framework Vue não é opinativo, você pode projetar a estrutura do aplicativo do jeito que você quer que seja.

Suporte ao TypeScript
O Vue tem um suporte nativo para o TypeScript.

Vue CLI 3
Interface gráfica, suporte a plug-ins, prototipagem instantânea e uma configuração muito fácil do Webpack.

Devtools no navegador
Permitindo que os desenvolvedores verifiquem o estado atual do Vuex, componentes, views, alterem manualmente dados específicos ou até mesmo analisem mais profundamente os eventos.

Algumas desvantagens

Falta de suporte para grandes projetos
A equipe de desenvolvimento do Vue é pequena, o que significa que o framework precisará de algum tempo para obter suporte corporativo. Desde de 2018, o desenvolvimento do framework não está atrelado ao interesse das empresas. Sendo assim, mudanças na estrutura existente dependem principalmente do feedback dos membros da comunidade.

Falta de Plugins
O Vue ainda não tem o amplo apoio de seus colegas frameworks, já que não é tão popular quanto React ou Angular. Existem muito mais recursos para o React do que o Vue.

Muita flexibilidade pode ser problemática
Às vezes, a flexibilidade pode causar alguns problemas para os desenvolvedores. Mas a variedade de opções do Vue pode se tornar um fardo quando implementada em projetos maiores que envolvem muitos desenvolvedores.

O pensamento final é que o VueJS tem poucas desvantagens em comparação com outros frameworks. Como tem que ser, a questão é fazer uma análise completa do que a tecnologia pode oferecer e o que o seu projeto precisa.

Aplicações Móveis

Se fosse para o React, a resposta seria rápida. Para o Vue, se tem 2 opções:

  • Native Script - NativeScript é um framework open source para construção de aplicativos móveis nativos usando JavaScript. Também é possivel saber mais com essa documentação do NativeScript-Vue.
  • Weex - é um projeto criado pelo gigante chinês do comércio eletrônico, Alibaba. Com ele é possível produzir aplicações para web (html5), Android e iOS a partir da mesma base de código.

Ferramentas

CLI

Temos o CLI (command line interface) do VueJS, para criar a estrutura básica com o framework.

npm install -g @vue/cli
# ou
yarn global add @vue/cli

Tem a documentação completa que você pode conferir. Também pode ter acesso à organização com os templates.

Loader

Com o Vue Loader, você pode criar componentes do Vue, no formato SFC (Vue Single-File Component). Que seria um arquivo *.vue, que usa a sintaxe semelhante ao do HTML para descrever um componente do Vue. Cada arquivo é composto por três tipos de blocos de linguagem: <template>, <script> e <style>, e blocos personalizados opcionalmente adicionais. Exemplo:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

Confere a documentação completa para saber mais.

Devtools

Estou muito acostumando a debugar em alguns navegadores com React, mas com o Vue também é possível. Dá uma olhada no projeto.

Bibliotecas oficiais

Vue router

Para a questão de roteamento com o Vue, você precisa do Vue Router. Ele se integra ao núcleo do Vue para facilitar a criação de uma SPA e tem as seguintes características:

  • Mapeamento de rota/visualização aninhada
  • Configuração de roteador modular baseada em componente
  • Parâmetros de rota, de consulta, wildcard (curinga, ex: "*")
  • Efeitos de transição de views ativados pelo sistema de transição do Vue
  • Controle de navegação refinado
  • Links com classes CSS ativas automáticas
  • Modo de histórico HTML5 ou modo hash, com fallback automático no IE9
  • Comportamento de rolagem personalizável

Veja mais na documentação oficial.

Vuex

O Vue tem essa biblioteca, que tamém é um padrão de gerenciamento de estado para as aplicações com o framework. Ele centraliza o armazenamento de todos os componentes de uma aplicação, contendo regras com o intuito de garantir que o estado só possa ser modificado de maneira previsível.

Essa biblioteca merece um artigo só sobre o assunto, mas por enquanto pode dar uma olhada na documentação oficial.

Vue Server Renderer

Faz um bom tempo que o desenvolvedor front-end, tem se preocupado não apenas com o lado do cliente. A preocupação com SEO, performance, consumo de CPU e outros assuntos que o lado do servidor resolve melhor, tem sido os motivos para o NodeJS, ser a plataforma da esperança.

Renderizar pelo lado do servidor, cada vez mais se mostra uma coisa primordial no desenvolvimento front-end. Assim, nos dias de hoje, temos um aumento na designação de desemvolvedor full-stack. Pra quem é da época do Web designer e Web master, como eu, não liga muito para rótulos.

O fato é que as camadas no desenvolvimento de uma aplicaçao tem ficado cada vez mais próximas na questão da mão de obra. A documentação oficial dessa biblioteca está disponível para você saber mais sobre usar o Vue, no lado do servidor.

Considerações finais

Depois de muitas estratégias de estudo, agora busco ter alguns padrões para estudar sobre alguma tecnologia. Com a combinação de artigos e repositórios no github, tento consolidar o conhecimento.

No caso do VueJS, tenho o repositório Knowledge VueJS, onde guardo os links de artigos, videos e projetos sobre o assunto. Também tem o repositório Prime VueJS, onde testo uma estrutura SPA básica com o framework.

Nessa estratégia de conhecimento sobre o framework, falta mais um repositório utilizando mais recursos SPA (Single Page Application) e SSR (Server Side Rendering). Quando o mesmo estiver pronto, atualizo esse artigo.

Nos próximos artigos sobre Vue, vamos conhecer mais sobre o framework e levantar mais questões para a sua utilização e comparativo com outros frameworks/bibliotecas do mercado. Enquanto isso, você pode conferir a documentação oficial.

UI2Code

Autor

Hemerson Vianna

github: ui2code

twitter: ui2code