Minha experiência com Vue 3

2024. május 30. Roberto Magalhães

Nosso desenvolvedor de UX/UI e Frontend, Gustavo Nering, compartilha insights sobre por que ele adora esse framework.

Vue é uma estrutura adorável. Confesso que não foi minha primeira opção como desenvolvedor frontend, mas assim que coloquei as mãos nisso não tive mais volta. Isso porque há muito o que amar aqui, principalmente sua documentação incrível e o fato de forçar o desenvolvedor a quebrar as coisas em pedaços menores de código, que acabam ajudando no desenvolvimento e na depuração.

Comecei com o Vue 2 e refatorei um aplicativo Vue 3 nos últimos meses. A princípio é como usar qualquer outro framework, com a diferença que leva muito do modo de pensar do Vue para uma nova forma de organizar e chamar propriedades.

Agora que usei o Vue 3, posso dizer com segurança que este é uma ótima estrutura. Aqui estão alguns dos motivos:

API de composição

Como iniciante no Vue, há uma curva de aprendizado considerável.

A API Options possui uma forma bastante estruturada de organizar o código. No final das contas, um desenvolvedor está usando um grande objeto com propriedades de dados, computadas e métodos (há mais propriedades para cenários específicos) onde cada propriedade tem sua particularidade.

Uma grande vantagem do Vue é que o código é muito visual. É fácil saber o que é uma prop, o que é um evento e o que são dados reativos porque a API Options organiza um objeto com esses atributos em mente. Isso facilita a compreensão do que está acontecendo no código.

A grande desvantagem é que o código é muito Vue. Você está escrevendo uma mistura de Vue com JavaScript, então há uma curva de aprendizado maior em comparação com algo no React onde a parte JS é JS puro com alguns ajudantes do React para fazer a lógica da UI funcionar.

Esse é um problema que a Composition API resolve.

Você pode adicionar uma tag de configuração à tag de script e ter JavaScript puro com alguns auxiliares Vue para fazer a lógica da UI funcionar. Tudo isso sem perder o fácil entendimento do que está acontecendo no código. Os ajudantes ainda marcam seu código, o que ajuda um desenvolvedor Vue a descobrir o que está acontecendo no componente.

Como você não trabalhará mais com um objeto grande, se precisar chamar uma variável, basta chamá-la. Chega de salvar o componente apenas para descobrir mais tarde que ele não funciona porque você esqueceu de adicioná-lo antes da propriedade.

Mas se uma equipe estiver apaixonada pela API de opções, ficará feliz em saber que ela ainda tem suporte. A equipe Vue tem a gentileza de manter tudo funcionando sem quebrar o que funcionava antes.

v-bind em CSS

Eu amo CSS. Sério, não estou mentindo. Às vezes precisamos fazer com que algo em nosso componente seja estilizado dinamicamente.

No Vue 2, existe uma maneira de fazer isso usando uma combinação de propriedades personalizadas CSS com uma propriedade computada do Vue. Mas esta é uma solução alternativa. Funciona, mas é meio complicado e um pouco difícil de entender quando você está lendo.

No Vue 3, você pode chamar v-bind em seu CSS. Basta adicionar sua propriedade de dados entre parênteses e o estilo estará pronto para ser dinâmico.

Pelo amor de Pinia

Assim como o Vue, o VueX tem uma opinião forte sobre como organizar sua loja. Você precisa de mutações para mudar um estado, então cada ação envolve um commit que é chamado em outro arquivo, o que exige muito do desenvolvedor.

Pinia elimina a necessidade de mutações. Também pede que você mantenha todas as lojas em um único arquivo, tornando a experiência do desenvolvedor muito mais agradável. Isso obriga a equipe a pensar mais em como organizar sua loja.

Posso contar uma anedota pessoal para ilustrar a importância disso. Minha equipe começou a trabalhar sem pensar muito em um aplicativo no qual muitas pessoas trabalharam. Então havia apenas uma loja com muitas coisas acontecendo. Para facilitar o entendimento, minha equipe se reuniu e dividiu aquela loja grande em lojas específicas menores, o que ajudou muito a entender de onde vinha um pedaço de estado.

Quando não há mutação, é muito mais rápido depurar um problema porque existem apenas 2 lugares onde as coisas podem dar errado: em um getter ou em uma ação. E como não precisamos usar getters o tempo todo, o problema provavelmente está na ação.

O TypeScript mandão

Isso é uma grande coisa. E não é apenas uma nova forma de organizar seu código, é outra forma de pensar em JavaScript.

JavaScript pode deixar você preguiçoso porque ele só quer fazer as coisas. Portanto, ele aceitará uma string quando deveria ser um número e apenas será executado. Enquanto o aplicativo funcionar, isso será problema de outra pessoa no futuro.

Como meu exemplo aponta, esse é um comportamento bom e ruim do JavaScript.

Quando você começa a usar o TypeScript, surge aquela sensação de “Por que preciso fazer isso?” É apenas mais código para algum IntelliSense que deixa você cansado porque alguns erros não fazem sentido. Basicamente, eu estava acostumado com a ânsia do JavaScript em fazer meu código lento rodar. Mas faz sentido evitar os possíveis problemas de algo ser indefinido ou de um endpoint não recuperar dados.

Tomei a decisão consciente de parar de lutar contra a adoção do TypeScript e, em vez disso, começar a adotá-lo como algo que está aqui para ajudar. Digite torna seu código mais confiável, o que torna o aplicativo menos sujeito a bugs misteriosos. Em última análise, ajuda a criar um produto melhor e uma melhor experiência de usuário para os usuários finais.

Você deve optar pelo Vue 3?

Como em tudo, depende.

Como desenvolvedor, a experiência de desenvolvimento de trabalhar com a API Composition traz muitos benefícios. Considerando que a maioria dos desenvolvedores frontend vem do React, o Vue 3 parece muito mais familiar do que a API Options.

Além disso, o TypeScript traz muitos benefícios na definição de estruturas de objetos diretamente no código. Ao trabalhar com componentes, é bastante comum usar um objeto como suporte. O TypeScript exige que você crie um tipo com a estrutura de objeto dessa propriedade. Se você não tiver tempo suficiente para criar a documentação adequada sobre como usar esse componente, o tipo pode ajudá-lo a entender o que esse suporte espera. Trabalhar com o Vue é uma experiência incrível e o Vue 3 só torna a experiência ainda melhor. Então, você deve tentar para ver como é para você.

Se você gostou disso, não deixe de conferir nossos outros artigos do Vue.