Oi, sou o Greg.

Sou um desenvolvedor backend e estou tentando me aventurar no mundo front. Escrevo esta série em formato de diário como uma tentativa lúdica de documentar esse processo.

Meu objetivo não é fazer tutoriais, nem comentar sobre cada passo do desenvolvimento. É ter um registro de aprendizado e dificuldades superadas.

Antes de tudo, devo dizer que não sou totalmente cru em front, trabalhei muito no passado com jquery, mas me afastei do front por tempo de mais e agora as coisas estão bem diferentes de como eram (pelo menos parece bem diferente no meu ponto de vista).

Decidi aprender vue.js porque na empresa onde trabalho se trabalha com ele. Dizem que é fácil. Veremos.

Os primeiros passos

Os primeiros passos foram facinhos, v-if , v-for, v-show, bind, v-on. Assisti no curso grátis de Vue.js 3 Fundamentals with the Options API. Se for só isso é promissor.

Até aqui, é massa.

Agora, o curso também free de Vue.js 3 Fundamentals with the Options API propõe uma tarefinha. Parece legal, bora treinar.

Missão I, fazer o card de perfil do github

Instalação e preparação

Para criar uma aplicação vue, basta npm create vue@latest, chamar o projeto de testinho, responder as perguntas tudo com a resposta padrão e... parece que é isso.

e depois do npm install && npm run dev tá lá em http://localhost:5173/, a página do vue. Que massa. Front é legal e facinho.

Também tenho que instalar o tailwind para estilizar os componentes, parece intuitivo e é popular.

Instalação muito fácil. Só segui os passos na documentação do tailwind e deu tudo certo.

Front é muito legal!!

Sobre o desenvolvimento

Comecei fazendo tudo no App.vue mesmo, depois separei em componentes. A estilização com o tailwind agiliza bastante o desenvolvimento sem precisar escrever CSS e pensar em nomes de classes (Honestamente, detesto escrever CSS, acho que tenho trauma).

No fim me empolguei, o projetinho que era só fazer um card me levou a pensar: "e se eu pudesse adicionar mais pessoas?", então fiz um outro card, para adicionar mais gente na lista, Olha como ficou a versão final:

e o form de adicionar novos perfis:

Aprendizados desse primeiro projeto

As requisições feitas com o axios, idealmente devem estar mais próximas do componente pai.

Na primeira versão, eu tinha colocado um vetor de usernames no componente App, e construia uma lista de UserCards passando a propriedade username para o UserCard. Dentro desse componente, no método mounted a requisição era feita à api do github.

O problema disso era que quando eu removia um elemento da lista de usernames, o último card que era removido. Basicamente porque o key no v-for que era o index do array de usernames não conseguia ser vinculado a um user específico. O id do usuário estava dentro do card, e a lista estava no componente App.

Depois de conversar com Lukitas, um amigo do trabalho que é frontend, entendi que o correto é fazer a requisição no componente pai e passar os dados para os componentes mais abaixo na hierarquia, assim eles só tem a função de renderizar o conteúdo. E o controle de quais perfis tenho atualmente fica sempre no componente pai.

Isso faz muito sentido, depois dessa alteração o problema resolveu-se quase sozinho e o código ficou mais organizado (pelo menos na visão de um backend).

Usabilidade

Durante o desenvolvimento dessa pequena aplicação conversei com Jone, outro amigo do trabalho, e que é Designer, recebi alguns feedbacks sobre usabilidade. Por exemplo, o card de adicionar novo perfil estava no fim da lista. Jone me disse que era melhor que ele fosse o primeiro. O motivo: é a ação principal da página, queremos que esteja à vista do usuário. Se ficar no final da lista, depois de adicionar uns quantos perfis, o usuário teria que rolar a tela para encontrar o lugar de adicionar novos perfis.

Outro insight legal, que recebi da Juliana, minha esposa, é que se o card de adicionar novo perfil ficar no inicio a lista de perfis deve crescer também no inicio (Um card recém adicionado fica no início da lista, não no final). O motivo: depois de ter adicionado alguns perfis, adicionar no final esconderia o efeito da ação principal da página, o usuário teria que rolar a tela para confirmar que o perfil desejado foi adicionado.

Não ser escandaloso com efeitos e cores

Como 'não frontend' e 'não design' é um tanto complicado para mim escolher cores que combinam. Inicialmente o projeto tinha um fundo branco, as letras pretas e bordas marcantes no hover dos cards, e o botão verde de adicionar novo perfil.

Depois de ajustar o visual, principalmente seguindo as dicas de Juliana, deixei o fundo não branco, mas numa tonalidade clara, as letras não pretas, mas numa tonalidade escura, o verde mais presente no tema da página para deixar claro que o botão verde era verde porque o tema é verde. Adicionei uma sombra nos cards e diminuí a intensidade das bordas no hover (nas palavras da minha esposa "sutil, sutil é melhor").

Conclusão

A versão final desse projeto ficou bastante agradável esteticamente e pude consolidar muito do que aprendi sobre front nessa primeira semana. Sim foi em uma semana, usando o tempo livre. Eu achei rápido. Front é legal de mais. Nos vemos num próximo projeto.