sábado, 10 de novembro de 2018

Vue - Parte 1 - Introdução

Fala pessoal! Tudo beleza?! Depois de algum tempo sem postar conteúdo por aqui, resolvi iniciar uma série de artigos sobre o Vue.js. Talvez vocês não saibam, mas eu sempre curti o Angular, desde o tempo em que ele ainda era AngularJS. Resisti um pouco ao React, mas como tava no hype eu fui junto. Mas daí este ano finalmente eu resolvi dar uma olhada no Vue. Vou confessar, esse framework me surpreendeu pra caramba, e eu só me arrependo de não ter olhado pra ele antes. 

Dizem por aí que uma das melhores maneiras de aprender ou fixar algum assunto é ensinando, então espero poder repassar um pouco do que aprendi até aqui e ampliar meu conhecimento sobre Vue durante o desenvolvimento dessa série. Espero que gostem e peço que se sintam à vontade pra fazer perguntas ou correções. Sem mais delongas vamos à primeira parte da série!

Vue: The Progressive Javascript Framework

Se você visitar o site oficial do Vue verá que ele se define como um Progressive JS Framework. Mas o que isso de fato significa e por que eu deveria escolher o Vue em detrimento ao Angular ou React? 

Se você olhar para um framework javascript verá que cada um traz consigo um apelo porque você deve escolhê-lo. O Angular, além do legado do AngularJS, trouxe um certo ar de enterprise em sua nova versão. A escolha do Typescript como linguagem 'padrão' atraiu muitos desenvolvedores que já vinham de linguagens tipadas e que não se sentiam confortáveis com a falta disso em Javascript. Em compensação, o boilerplate necessário para criar um projeto Angular acabou espantando alguns. Isso melhorou após a introdução e evolução do angular-cli, um utilitário de linha de comando que livra você de toda essa configuração inicial e traz uma série de outras funcionalidades. Outra 'vantagem' do Angular está no fato de ter uma grande empresa cuidando do framework, no caso a gigante Google.

React impressionou pelo seu foco e simplicidade. Pra começar ele nem se considera um framework, mas sim uma library. Embora não tenha adotado o Typescript como fez o Angular, React usa fortemente o Babel.js, uma espécie de transpiler Javascript, que permite o uso das features mais novas de Javascript e também facilita bastante a escrita de código com JSX (linguagem de template usada pelo React). Outro ponto positivo é ecosistema de bibliotecas em torno do React. Diferente do Angular, o core do React é bem pequeno, não há nem mesmo, por exemplo, o suporte para roteamento, e portanto você precisará de uma lib à parte para tal. Não custa lembrar que assim como o Angular, React tem uma grande empresa como sua guardiã, o Facebook.

O fato de ser o caçula dos três deu alguns benefícios ao Vue. Você vai notar muitas similaridades entre ele e os seus concorrentes, além de claro, algumas mudanças no que eram consideradas fraquezas nos outros dois. Pra começar a desenvolver uma SPA com Vue é preciso apenas carregar um script de 20KB (min+gziped). Como no React, o núcleo do Vue é bem pequeno.

A simplicidade é notada também ao ler a definição do framework no site oficial. O termo 'progressive' é o diferencial do framework! Você pode começar a desenvolver carregando apenas o script core do vue e à medida que o projeto precisar, você pode adicionar plugins/library facilmente no seu projeto. Outro diferencial é que muitas dessas libs adicionais são mantidas pelo próprio time do Vue, como é o caso do vue-router (roteamento) e do vuex (gerenciamento de estado). Você irá notar que, de fato, na maioria dos projetos você irá precisar somente desse trio.

Você pode ainda usar Typescript ou mesmo JSX. Vue fornece também um excelente utilitário de linha de comando para criação de projetos, o vue-cli (atualmente na versão 3). Uma coisa que o Vue difere dos seus concorrentes é no fato de não ter uma grande empresa por trás do dele, mas isso é compensado com uma comunidade enorme e bastante ativa que tem ajudado a transformar o framework em um dos queridinhos da atualidade, com mais estrelas no github que React e Angular (imagino que isso seja importante hehe).

Nosso propósito aqui não é esgotar as comparações entre Vue x React x Angular, você irá encontrar muitos bons artigos sobre isso pela internet, recomendo inclusive o comparativo feito pelo site oficial do Vue, é só clicar aqui. À medida que avançarmos no estudo das funcionalidades do Vue você irá notar as semelhanças e diferenças com seus concorrentes. Para finalizar essa primeira parte vamos criar nosso primeiro projeto com Vue.

Hello Vue


Como falamos anteriormente é bastante simples criar uma SPA com Vue. A primeira coisa que você precisa é importar o script com o vue-core (linha 4). Em seguida, é preciso definir um elemento html onde o Vue irá montar a aplicação (linhas 7 a 9). Por fim, basta criar uma instância de vue e associá-la ao elemento html criado anteriormente, atributo el (linha 13).

A propriedade data faz parte da instância vue e é serve para definir os dados que serão usados pela aplicação, no exemplo criamos uma variável chamada msg e exibimos o seu valor no html através da expressão {{ msg }}, isso é chamado de data binding. Ao abrir a página no navegador você irá visualizar o conteúdo da variável msg.

Nos artigos seguintes iremos explorar em detalhes a instância do Vue usada neste exemplo. Por enquanto, o importante é que você entenda os passos necessários para escrever uma app simples usando Vue. Até o próximo artigo!

Nenhum comentário:

Postar um comentário