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.## ReleasesO **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 frameworko **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** 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óveisSe 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### CLITemos 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).### LoaderCom 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: ``, `` e ``, e blocos personalizados opcionalmente adicionais. Exemplo:``` {{ msg }}export default { data () { return { msg: 'Hello world!' } } }.example { color: red; } This could be e.g. documentation for the component.```Confere a [documentação](https://vue-loader.vuejs.org/) completa para saber mais.### DevtoolsEstou 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 routerPara 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ávelVeja mais na [documentação](http://router.vuejs.org/) oficial.### VuexO **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 RendererFaz 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 finaisDepois 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.
