Na minha carreira de Desenvolvedor Fullstack com especialidade em Front End, trabalhei com basicamente apenas um dos inúmeros frameworks JavaScript: React. Normalmente somos relutantes pra “abandonar” tudo aquilo que aprendemos de um framework pra basicamente realizar a exata mesma tarefa em um framework diferente. Já estive (e ainda continuo um pouco) neste lado do barco e sei como parece ser absolutamente inútil parar pra aprender (mais um) novo framework Front End JavaScript “escalável, rápido, simples, moderno e leve” como todos eles se denominam ser.

Por outro lado, nessa jornada pude aprender que ter a flexibilidade de conhecer diferentes frameworks te dá não somente a maleabilidade e portfólio que qualquer consultoria de software precisa, mas também serve como uma alavanca pra nos ajudar a conhecer formas diferentes de se pensar o código de uma aplicação web e compreender melhor quais são as problemáticas em comum que envolvem projetos deste tipo.

O objetivo deste artigo não é ter a pretensão de ensinar ninguém, mas sim mostrar como foi a minha jornada de aprendizado do zero com o Vue e quais foram minhas primeiras impressões como um Dev focado em somente React até então. Dessa forma, se você é um desenvolvedor que, assim como eu, sente que está em um momento de carreira apto a expandir seus horizontes, espero que eu possa te inspirar a também poder dar um passo adiante na sua carreira e se diferenciar de simples reprodutores de código (cuidado com a IA aí meu nobre).

Meu aprendizado se deu em Janeiro de 2024, focado no Vue 3, utilizando SFC (Single-File Components) e a Composition API.

Percepções gerais comparadas ao React

• É possível reduzir o tempo de estudo, que provavelmente levaria semanas, pra mais ou menos 4 dias. A minha base sólida com JavaScript me ajudou a acelerar o entendimento da dinâmica do Vue. Sendo assim…
• Fortaleça sua base na linguagem (no caso, JavaScript/TypeScript) !!! Fica infinitas vezes mais fácil de migrar entre ferramentas e entender o que tá escrito nos exemplos;
• É necessário um pouco de força de vontade pra não desanimar e fazer isso acontecer de verdade. Como já citei antes, sendo desenvolvedor React desde o início, fica muito difícil abandonar o framework que já estou acostumado;
• Vue é BEM fácil de aprender os primeiros passos e mais simples que o React em vários pontos (gerenciamento de estado, hooks, estilização, etc). Eles possuem padrões muito bons de código que simplificam muito o entendimento e organização;
• Bibliotecas auxiliares (pra gerenciamento de estado, estilização, rotas, etc.) são recomendadas oficialmente pela documentação do Vue, dando uma segurança no momento de escolha;

A partir desse ponto, vou tentar não citar tanto o React e vamos falar somente do Vue.

Organizando por onde começar

Como em praticamente todas as documentações de frameworks de Front-end, percebi os principais tópicos são praticamente os mesmos. AO MEU VER, esses são os primeiros tópicos mais importantes pra se estudar:

1. Criação de um novo projeto;
2. Organização das pastas e funcionamento básico da aplicação;
3. Nuances e sintaxe do framework (ex. formatação de template de um componente Vue);
4. Gerenciamento de estados e reatividade;
5. Conceitos gerais de componentes HTML:
   1. Props;
   2. Estilização e classes;
   3. Formulários (form, input, submit buttons…);
   4. Eventos (ex: click, focus, blur…);
6. Renderização condicional e loops;
7. Ciclo de vida dos componentes e Watchers/useEffect
8. Requisições HTTPs (fetch) e assuntos correlatos;
9. Rotas;
10. Gerenciamento global de estados (Provide/Inject, Vuex, Pinia, etc. pra Vue ou Redux, Context, Zustand, etc. pra React);

Após estes 10 tópicos, eu julgaria importantíssimo entender sobre a integração de suítes de testes (provavelmente Jest e Cypress), Server-Side Rendering, build e (obviamente) as melhores práticas.

“Por onde começar” foi a pergunta mais complicada da minha jornada. Ela normalmente é a maior barreira pra realmente entender qual o desafio que está por vir. Como eu não tinha nenhuma noção de como seria aprender Vue, a única noção que eu tinha sobre “aprender um framework” até então havia sido com minha carreira no React (os últimos 5 anos da minha vida), que não foi um caminho tão fácil quanto com o Vue, uma vez que eu também estava aprendendo sobre as nuances do JavaScript, padrões de código e principalmente sobre os principais problemas de uma aplicação front-end. Apesar de isso ter facilitado muito meu caminho com o Vue, não é um requisito obrigatório.

Sendo assim, fui no melhor lugar possível pra responder essa pergunta: na documentação. A página oficial, vuejs.org, já tem logo de cara um botão “Get Started”, que te redireciona pras páginas de introdução ao framework.

Botando a mão na massa

Algo muito interessante é que a própria documentação do Vue já pra que você gradativamente entenda cada um dos principais tópicos acima citados.

Você pode acessar pelo link https://vuejs.org/examples/ ou encontrar pelo menu, na aba “Docs”, o botão “Examples”.

Metodologia de “Aprendizado em Público”

Outro dia eu vi no LinkedIn sobre uma metodologia de aprendizado que se baseia em você compartilhar seu processo de aprendizado, descobertas, sucessos e fracassos com outras pessoas, seja por meio de blogs, postagem e mídias sociais, streams ao vivo ou qualquer outra forma de comunicação pública. A principal vantagem dessa abordagem é que ela pode significativamente aumentar o engajamento e a motivação do aprendiz, pois cria um senso de comunidade e responsabilidade.

🔗 Repositório no GitHub

Pra aplicar essa metodologia pra cada uma das etapas dos exemplos eu criei um novo repositório no meu GitHub pra que sirva em consultas futuras, me ponha à frente de uma publicação real de projeto e também sirva de portfólio.

🔗 Preview publicado

Não só o repositório foi criado, bem como também publiquei o projeto sob meu domínio pessoal kalliu.com, aproveitando pra abordar os principais exemplos e iniciar o estudo básico de organização de rotas. Aplicar essa metodologia, mesmo que pra um projeto simples, me fez ter contato com todas as etapas de publicação de uma página estática básica e comum. O objetivo não era criar um design atraente (por isso, não teve nenhum foco em CSS, cores, layout responsivo, etc), mas sim buscar um aprendizado prático.

Beleza, sei o básico (?)

Até o momento, consegui perceber que eu tenho uma noção até que interessante do funcionamento dos componentes. O que senti me distanciar de um projeto em produção que normalmente trabalho usando React é a utilização de algumas bibliotecas de componentes pra agilizar o trabalho de CSS.

Pra conseguir explorar um pouco essa dinâmica, decidi fazer minha página de Portfólio em Vue. O trabalho dela não é nada demais além do básico que estudei na página acima, trazendo talvez só um CSS mais elaborado, responsividade, enfim. Basicamente os conceitos e bibliotecas mais específicos em relação ao Vue utilizados nesse projeto, foram:

• Rotas: VueRouter
• Provide/Inject pra reduzir prop drilling
• Biblioteca de componentes + tema customizado: PrimeVue
• TypeScript

Além de outras bibliotecas mais relacionadas ao JavaScript, como Luxon, Lodash, Prettier, ESLint…

Daqui pra frente…

Agora eu julgo que “sei” Vue. Subi uma página estática, sei quais bibliotecas conversam com o código, sei resolver os problemas básicos… Muito poucos detalhes provavelmente me afastam de um projeto em produção.

MAS, mais do que nunca, agora o momento é de entender que sabemos só a ponta do iceberg. Estamos introduzidos no framework mas não trabalhamos em uma aplicação escalável, precisamos aprender muito com sêniors que trabalham nela há anos e entender quais as boas práticas em aplicações críticas. No momento, me surgem questões como:

“Quão longe estou de um aplicativo mobile, ainda utilizando Vue? Quais seriam as ferramentas mais interessantes? (Comparando com a dinâmica React/React Native)”

“Em termos de escala pra times grandes, percebi que ambos Composition API e Options API são utilizadas, onde um não necessariamente substitui o outro. Quais momentos escolher uma abordagem?”

…e inúmeras outras questões que vão surgir pelo caminho.

O ponto é: agora eu consigo entender um código Vue, resolver bugs de um código já existente, contribuir em um projeto, resolver tasks. O objetivo de sair do conhecimento restrito ao React me fez perceber, como já citado no começo desse artigo, as semelhanças em projetos Front End. Pois, no fim do dia, estamos resolvendo o mesmo tipo de problemas: gerenciando elementos na DOM do navegador de forma a entregar a um usuário uma interface com experiência bonita, fluida, fácil de utilizar e que funcione em praticamente qualquer dispositivo.