Técnico

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
emitir mudanças de estado no objeto que está sendo escutado para disparar os eventos que alteram o DOM

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
Exemplo de JSX com React

VueJs
Exemplo de componente básico com 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

Autor(a)

Walker de Paula

Comentários (2)

  1. Paulo Henrique
    19 de novembro de 2016

    Parabéns pela iniciativa quero ver como você vai desenvolver os próximos posts

  2. Jairo
    20 de novembro de 2016

    Parabéns Pela iniciativa. Vou aguarda os próximos posters.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *