
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](https://twitter.com/youyuxi), 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](https://blog.evanyou.me/2015/10/25/vuejs-re-introduction/), 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](https://medium.com/@youyuxi/vue-js-a-re-introduction-ed159414a1be).

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:

- 08/12/2013 - [v0.6.0: VueJS](https://github.com/vuejs/vue/releases/tag/v0.6.0)
- 08/12/2013 - [v0.7.0](https://github.com/vuejs/vue/releases/tag/v0.7.0)
- 08/12/2013 - [v0.8.0](https://github.com/vuejs/vue/releases/tag/v0.8.0)
- 25/02/2014 - [v.0.9.0: Animatrix](https://github.com/vuejs/vue/releases/tag/v0.9.0) `Lançamento do VueJS`
- 23/03/2014 - [v0.10.0: Blade Runner](https://github.com/vuejs/vue/releases/tag/v0.10.0)
- 07/11/2014 - [v0.11.0: Cowboy Bebop](https://github.com/vuejs/vue/releases/tag/v0.11.0)
- 12/06/2015 - [v0.12.0: Dragon Ball](https://github.com/vuejs/vue/releases/tag/v0.12.0)
- 25/10/2015 - [v1.0.0: Evangelion](https://github.com/vuejs/vue/releases/tag/v1.0.0)
- 30/09/2016 - [v2.0.0: Ghost in the Shell](https://github.com/vuejs/vue/releases/tag/v2.0.0)
- 22/11/2016 - [v2.1.0: Hunter X Hunter](https://github.com/vuejs/vue/releases/tag/v2.1.0)
- 26/02/2017 - [v2.2.0: Initial D](https://github.com/vuejs/vue/releases/tag/v2.2.0)
- 27/04/2017 - [v2.3.0: JoJo's Bizarre Adventure](https://github.com/vuejs/vue/releases/tag/v2.3.0)
- 13/07/2017 - [v2.4.0: Kill la Kill](https://github.com/vuejs/vue/releases/tag/v2.4.0)
- 13/10/2017 - [v2.5.0: Level E](https://github.com/vuejs/vue/releases/tag/v2.5.0)
- 04/02/2019 - [v2.6.0: Macross](https://github.com/vuejs/vue/releases/tag/v2.6.0)

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

- [Vue 2.0 is Here!](https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.vh9f94s2m)
- [Vue 2.5 released](https://medium.com/the-vue-point/vue-2-5-released-14bd65bf030b)
- [Vue 2.6 released](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e)

## 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](https://br.vuejs.org/v2/guide/comparison.html#React)

### Mais algumas vantagens

**Simplicidade** <br>
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** <br>
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** <br>
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** <br>
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** <br>
O framework Vue não é opinativo, você pode projetar a estrutura do aplicativo do jeito que você quer que seja.

**Suporte ao TypeScript** <br>
O Vue tem um suporte nativo para o TypeScript.

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

**Devtools no navegador** <br>
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** <br>
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** <br>
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** <br>
À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](https://docs.nativescript.org/vuejs/nativescript-vuejs) - 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](https://nativescript-vue.org/pt-br/docs/introduction/).
- [Weex](https://weex.apache.org/guide/use-vue-in-weex.html) - é 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](https://cli.vuejs.org/) completa que você pode conferir. Também pode ter acesso à organização com os [templates](https://github.com/vuejs-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](https://vue-loader.vuejs.org/) 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](https://github.com/vuejs/vue-devtools).

## 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](http://router.vuejs.org/) 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](http://vuex.vuejs.org/) 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](https://ssr.vuejs.org/) 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](https://github.com/org-victorinox/knowledge-vuejs), onde guardo os links de artigos, videos e projetos sobre o assunto. Também tem o repositório [Prime VueJS](https://github.com/org-victorinox/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](https://br.vuejs.org/) oficial.


UI2CodeGo to Home Page

Vue

Compartilhar