Por que escolhi o Vuejs como meu framework frontend

Parte 1 de 8

Olá! Meu nome é Vitor Hugo, sou programador na Levante Lab e vou te contar um pouco sobre essa ferramenta incrível que vem somando muito no meu dia-a-dia e na aplicação de telas. Queria falar que…

Como bom programador, eu não sou escritor.

Então para facilitar a leitura e também a escrita, vou fingir que estou contando uma historinha. rsrs.

Agora que fiz uma breve apresentação, vamos ao assunto. Há um pouco mais de 2 ou 3 anos, eu sai de um projeto com uma boa experiência no desenvolvimento em backend, no qual eu utilizo, na maioria das vezes, linguagem PHP. Porém, estava sentindo a necessidade de largar o jQuery, por conta da escalabilidade do código e também da facilidade que eu ouvia que os novos queridinhos Vue, React e Angular traziam no desenvolvimento na parte do frontend.

Fui estudar a história de cada um — gosto muito de saber quem criou, para que criou, cultura da galera, etc. Vi a do Angular, na qual tinha Google por trás; vi a do React, e até então preferi o Angular culturalmente falando. Em relação de estrutura de código fiquei desconfortável com os dois, tanto com Angular, quanto no React. Poderia ser newbisse minha? Sim, poderia, mas não me agradava nada uma função retornar HTML no React, já no Angular ter que criar 3 arquivos para gerar um componente.

Para quem começou a programar PHP, e algo mais moderno que tinha visto era o Blade do Laravel ou Twig (Blade e Twig com nosso grande bom e velho, Jquery, quem veio do PHP e já teve que lidar com Wordpress, Blade e Twig eram extremamente modernos.) que você poderia usar em projeto MVC também utilizando PHP, React e Angular não eram nada amigáveis.

Porém, quando encontrei o Vue e vi que o mesmo tinha um espírito maior de coletivo, comunidade relativamente menor pra época, but que interagia mais do que o normal, principalmente, nas minhas comunidades de PHP.

Não parei de estudar. Apenas a parte cultural da história estava resolvida, ainda queria saber o mais importante: o código.

Segue o exemplo de como é o design do código de cada componente no Vuejs:

Como podem ver, é muito lindo! ❤

E como esse componente funciona? Ali no template, a gente vai colocar nosso HTML(outras linguagens também são aceitas, basta configurar), também adicionamos diretivas ao HTML, como funcionalidades nativas. Exemplo:

Esse v-on quer dizer que a tag HTML recebe uma função de callback de acordo com a diretiva do Vuejs. Tem o click, mouseover, mouseleave e muitas outras que você vai descobrindo ao programar com a ferramenta.

Então beleza, agora vamos fazer um review da parte mais legal, a escrita de javascript, que no Vuejs colocamos dentro da tag <script></script>.
No script, conseguimos colocar variáveis que funciona como um banco de dados do componente:

Como podemos ver, dentro da função de data() é aonde vamos colocar essas variáveis. O mais interessante é que o Vue é um framework reativo, assim como React e o Angular. Sendo assim, se em alguma função você mudar uma informação que está na função data(), ele mudará na mesma hora a informação também na tela do usuário.

Também vou dar uma breve explicação sobre métodos, que são aonde colocamos as funções que utilizamos, por exemplo, na hora que usamos uma diretiva.

Nesse objeto methods colocamos as funções do componente, como “após um evento” e entre outros. Em outra postagem vou mostrar como usar também o computed, que funciona de forma bem parecida com methods, mas para fins diferentes. Para não estender muito, vamos continuar falando apenas sobre o básico :)

Agora a parte que importa para os frontends de plantão: o css! Cara, css sempre foi algo muito difícil de deixar organizado em projetos feitos da forma antiga, aqueles feitos com jQuery e vários plugins, muitas vezes sem um gulp para ajudar. rsrs. O Vue.js caiu como uma luva pra mim que não sou tão profissional no assunto. E já vou mostrar o porquê.

No Vue, todo componente você pode colocar uma tag style, que normalmente fica no terceiro bloco de códigos. Vou falar duas funcionalidades bem legais e por isso coloquei aquele scoped e aquele css.

Primeira vamos de scoped. Essa diretiva significa que o css digitado dentro dessa tag style só funcionará dentro do template escrito nesse arquivo (orgasmos múltiplos, sério! rsrs). Para vocês, frontend topperson que escreve em outras folhas de estilo como SCSS, basta colocar ali sua linguagem e instalar um plugin de loader css.

 npm install style-loader css-loader --save-dev

Viu, gente, como esse framework é foda!

Esse é meu primeiro texto e quero fazer mais. Se puderem dar um feedback, ajudar na correção, críticas e sugestões estamos aí, gente!

Vai ser uma série de 8 postagens para abordar o Vuejs, então se puder, segue, tire dúvidas e, principalmente, se achou que merece, compartilhe :D

Vlwwwwww!