Saindo do zero a zero com o Vue.js

Muito mais do que uma versão simplificada do Angular.js

Vue.js é uma biblioteca JavaScript criada pelo chinês Evan You e lançada no começo de 2014. O Vue.js começou como um projeto pessoal do Evan e tomou forma durante um período em que ele estava de férias.

“It’s all about simplicity!”

Tudo no Vue.js foi pensado desde o começo para ser simples e fácil de assimilar. Começando pelo nome biblioteca, apesar de ser a tradução para o francês da palavra "view", preserva a mesma pronúncia do inglês.

Vue === View

Para saber mais sobre a simplicidade do Vue.js, leia também: WHY VUE (NOT REACT) IS THE NEW JQUERY

Afinal, Vue.js é mesmo um Angular.js simplificado?

A resposta correta pra essa pergunta é não.

Vue.js foi concebido para ser uma biblioteca que cuida apenas da camada de apresentação das nossas aplicações web, com a premissa de ser simples e muito leve(~16kb).

Já o Angular.js foi concebido para ser um framework MVC que controla todo o front-end da nossa aplicação, e isso claro, requer muito mais código(~50kb).

Uma diferença prática disso, é que o core do Vue.js não controla rotas e nem faz requisições Ajax, já o core do Angular faz tudo isso e muito mais.

Se você já viu um trecho de código com diretivas do Vue.js, nesse momento você deve estar se perguntando:

"Ah Luís, mas o v-bind é igualzinho ao ng-bind. É só trocar o 'ng' pelo 'v' e tá tudo certo!"

Exatamente! A sintaxe das diretivas são muito parecidos, permitindo esse tipo de comparação. Afinal, ng-show tem o mesmo funcionamento do v-show. Mas nós temos que tomar cuidado com esse tipo de afirmação, porque as semelhanças param por aí.

Laravel ❤ Vue.js

Não há como negar que a comunidade Laravel abraçou o Vue.js de uma maneira muito bacana, mesmo o Vue.js sendo uma biblioteca front-end escrita em JavaScript. Praticamente sem nenhuma relação com PHP, Laravel ou back-end!

Tudo começou quando Taylor Otwell, criador do Laravel, mandou esse tweet:

Foi o suficiente pra que o pessoal da comunidade Laravel começassem a figurar entre os mais ativos também da comunidade de Vue.js.

No Brasil, o pessoal do Codecasts — originalmente da comunidade Laravel — faz um trabalho excepcional gerando conteúdo em português sobre Vue.js, algo semelhante ao que Laracasts fez no passado.

Os primeiros vídeo e tutoriais que eu assisti sobre Vue.js em português, foram produzidos também por pessoas da comunidade Laravel.

Detalhe, eu fui apresentado ao Vue.js por um amigo que trabalha com… Laravel.

Para ler mais sobre Vue.js em português, visite também o Blog do CodeCastas.

Devo confiar no Vue.js? Não tem nenhuma empresa grande por trás do projeto

Se você está acostumado com o Angular.js e React, que tem por trás Google e Facebook, respectivamente. Você provavelmente vai levantar dúvidas sobre a continuidade, adoção e confiabilidade do Vue.js.

Pois é, e é ai que o Vue.js nos surpreende mais uma vez!

Mesmo sendo um projeto pessoal do Evan, o Vue.js rapidamente ganhou mercado e foi adotado em projetos de grandes empresas chinesas. Hoje em dia ele é usado em larga escala pelo Alibaba e Baidu — sim! A empresa que adiciona barrinhas no seu IE é uma das que mais usa Vue.js no mundo.

Apesar disso, o Vue.js não é mantido por essas empresas, ele é mantido por toda a comunidade. Quando o Evan decidiu dedicar-se fulltime ao Vue.js, ele criou um projeto de patrocínio no Patreon, que hoje arrecada aproximadamente 9.000 dólares por mês(esse valor sempre varia entre 5k e 10k).

Sim, a comunidade paga mais de 9.000 dólares por mês pro Evan dedicar-se fulltime ao Vue.js!

Falando sobre código

O Vue.js foi construído em cima de dois pilares: reactivity e composable components.

Reactivity

No Vue.js, os modelos de dados são objetos JavaScript simples. Sempre que você modificar um dado, a view será atualizada. Dessa forma podemos concentrar os esforços apenas em alterar diretamente os dados, sem bagunçar o DOM.

Composable components

Compor a nossa aplicação de componentes pequenos e auto-suficientes, esse é um dos principais conceitos do Vue.js, mas não é exclusivo. Praticamente todos os frameworks e libs modernas adotam esse conceito.

Show me the code: Hello World com Vue.js

Esse é o exemplo interativo mais básico de uma aplicação Vue.js.

Para criar uma aplicação Vue.js é simples, basta dizer a classe Vue() qual a tag HTML que vai conter nossa app. Nesse caso el: ‘#app’. Pronto, já temos uma app criada. Mas ela ainda não faz nada!

A maneira mais simples de mandar uma informação da nossa app Vue.js pra tela é criando um data, no nosso exemplo teremos apenas um: name: ‘Luís Felipe Souza’.

E para mostrar o dado na tela, utilizamos a sintaxe conhecida como Moustache, adicionando ao nosso template o trecho: {{ name }}.

Por último, daremos vida ao nosso dado(interativo, lembra?), vinculando ele ao input através da diretiva v-model: v-model="name".

Dessa forma nossa propriedade name sempre reagirá a uma mudança de valor no input, mantendo o dado sincronizado. E consequentemente o template sempre estará sincronizado ao dado.

E aí, está curioso pra saber mais sobre Vue.js? Pode deixar, em breve teremos mais conteúdos sobre o assunto.

Se tiver alguma dúvida ou sugestão, não hesite, deixe nos comentários.