Começando com VueJs

Estou iniciando hoje uma série de posts sobre VueJs, meu o objetivo é introduzir a lib a novos desenvolvedores que estão buscando aprender uma biblioteca progressiva que está ganhando cada vez mais espaço e credibilidade na comunidade. E claro, aproveitar a chance para aprender mais enquanto escrevo.

Disclaimer

Provavelmente você já ouviu falar sobre Web Components, não é?!
Apesar de ser um tema que ganhou bastante força com a chegada do React e Angular 2, não é um assunto tão novo assim. Lembro-me de ter escutado esse termo pela primeira vez em 2011, mas o conceito por trás da “magia” já existia muito antes disso.
Bom, mas se você ainda não sabe o que é um Web Component, basicamente é um pedaço da aplicação formado por um conjunto de códigos HTML, CSS e JavaScript que juntos formam um componente independente que pode ser facilmente reaproveitado e reutilizado em outros locais.

Mas a final, o que exatamente é o VueJs?

Nada mais é do que uma biblioteca para criar e “gerenciar” a interface (view) da sua aplicação. Chega de todo aquela bagunça com jQuery para manipular o DOM, é hora de criar componentes reutilizáveis, performáticos, organizados e bem estruturados. VueJs tem um foco simples e objetivo. Sendo assim, ele possui muitas semelhanças com o React. Ambos trabalham com o virtual DOM, foram criados para trabalhar com Web Components e precisam de uma ajudinha extra para criar aplicações complexas.
É ai que entram as Micro Libs, o React possui o React-Router e React-Redux, o VueJs também possui suas Micro Libs correspondentes que são Vue-Router e Vuex, respectivamente (mais a frente iremos explicar melhor esses caras, então não seu preocupe).

Assim como o React, VueJs trabalha com o princípio de reatividade, que nada mais é do que a técnica de observar um objeto javascript e refletir suas alterações no DOM do HMTL caso alguma mudança ocorra no objeto que está sendo observado. A imagem abaixo ilustra esse comportamento

Se você já está acostumado com o React ou já viu um Hello World, você sabe que seus componentes possuem uma liberdade inacreditável por serem totalmente puros. Mas isso não é necessariamente tão bom assim. Basta ir um pouco mais a fundo com o React para descobrir que é fácil se perder na hora de organizar e estruturar seus códigos. Entretanto, o VueJs mesmo sendo bastante livre, possui uma trilha de desenvolvimento bem definida e organizada, possuindo objetos de configuração de fácil leitura e entendimento, onde é muito mais fácil identificar suas propriedades, ações e eventos.
Uma coisa muito interessante do VueJs e outra vantagem em relação ao React (do meu ponto de vista), é a possibilidade de escrever seus componentes em HTML puro, e isso é ótimo para novos desenvolvedores que não precisam aprender a utilizar JSX exigido pelo React.

JSX – React

VueJs

Conclusão

Nessa série eu pretendo criar uma aplicação utilizando o VueJs para aprendermos um pouco sobre suas diretrizes de desenvolvimento. A meta é explorar também o Vuex e o Vue-Router, que são as Micro Libs que comentei no inicio do post. Espero também ver como escalar e integrar os componentes que criar com outras ferramentas.

Ao meu ver, o VueJs é bastante interessante e merece atenção. Minha visão sobre a lib até agora é a seguinte: Seus componentes seguem uma estruturação semelhante a do BackboneJs, utilizando as diretivas do Angular em seus templates e com o cinto de utilidades que o React tem a oferecer.

Se você curtiu o post e a ideia da série, comenta ai embaixo! Se tiver umas dicas do que podemos fazer, ou sobre o que escrever, serão bem vindas também.

Walker de Paula – Front End developer at redspark.
GitHub: walkerdepaula
Facebook: Walker de Paula