Como um desenvolvedor frontend realmente se parece na prática?

Normalmente quem atua na área de tecnologia como frontend trabalha, no fim do dia, com HTML, CSS e Javascript. Dizer isso não significa muita coisa. É algo tão aberto quanto um professor trabalhar com cal e palavras ou um açougueiro trabalhando com metal e proteína.

Por essa razão e porque eu queria um canal de comunicação interessante para iniciantes que eu fiz o projeto de perguntas do pergunteaodev.com.

É um site que basicamente deveria fazer 2 coisas:

• Pegar os dados do usuário para comunicação posterior e segurança (não quero um mundo de bots me enviando perguntas);
• Obter uma pergunta e salvá-la em algum lugar permanente.

Estou usando um serviço de backend, de modo que, eu praticamente só precise focar nessa área chamada frontend. Usando o Firebase que é um serviço do Google, eu basicamente tenho diversas coisas já prontas e posso focar na parte do frontend, trabalhando a apresentação, tudo aquilo que é visível e roda na tela do seu navegador.

O produto se parece com o que mostro logo abaixo e na prática não deve ter levado mais do que poucas horas para ser desenvolvido. Ele está na integra neste repositório do gitHub:

Site em funcionamento

Ao longo desse artigo eu pretendo descrever como um desenvolvedor frontend inciante e hipotético desenvolveria isso. Aproveito também para colocar recursos variados com seus respectivos links, assim você terá uma ideia de como são os materiais espalhados pela internet que contém as respostas para os problemas que enfrentamos quando estamos programando e também qual foi a linha de raciocínio que motivou a pesquisa. Também coloco pequenos pedaços de código para dar uma noção de como o desenvolvimento de cada parte se parece.

Mas então como o trabalho de um frontend se parece?

No contexto desse produto vamos ver quais são as preocupações e onde cada tecnologia se encaixa:

• Nós precisávamos de um design básico que funcionasse de forma boa o suficiente em diferentes resoluções e rotações;
• Usando o que o “backend” nos fornece nós precisávamos usar as funcionalidades de login, captar o nome do usuário e enviar a pergunta;
• Garantir o retorno de feedbacks quando algo errado acontecesse, por exemplo, o que consta na imagem abaixo:

Imagem com erro informando que a pergunta havia sido enviada repetindo a última entrada de informação

Basicamente está resumido em 3 situações:

1. Implementação do design;
2. Funcionalidade;
3. Usabilidade.

Antes de entrarmos no código vamos ver como um cliente, o gerente de projeto ou chefe de departamento poderia passar isso para um desenvolvedor iniciante:

Então {Seu Nome}, nós precisamos para ontem de um site que reúna perguntas, não se preocupe sobre onde elas serão salvas, tudo isso já foi cuidado para você pelo nosso backend. Dessa vez, o designer também já te passou cores, fontes e posição, aqui seu papel será colocar tudo no computador ok?

A pessoa que acessar a plataforma entrará com Facebook ou Google, você precisa obter o nome, exibir um campo para envio da pergunta e informar que ficou tudo ok? Ah e… se ele repetir o texto recém enviado, dê um alerta de erro porque a gente não quer um monte de repetição. Toda essa usabilidade foi feita pelo nosso consultor de usabilidade o cara da UX. Com base nas regras de negócio que o cliente mandou e foram analisadas pelo gerente de projeto.

Também dá um jeito de ficar legível se for no celular, tablet e etc ok?

O frontend vai anotar tudo isso, passar um tempo pesquisando coisas que ele talvez não saiba e finalmente entregar o seu belo código e é isso aí.

Mas … na prática como isso se traduz no código?

Resolvendo a visão do designer

Não raro o designer e o frontend não são a mesma pessoa, isso varia de empresa para empresa ou perfil de profissional mas você pode considerar que a disciplina de um frontend e de um designer são campos diferentes.

Primeiramente, um designer pode querer te passar fontes e ícones, no nosso exemplo hipotético o designer escolhe uma fonte no Google Fonts e decidiu usar os ícones do Font Awesome.

O frontend mais preocupado com velocidade e com economizar espaço no servidor onde tudo isso está resolveu usar uma CDN para esses recursos e colocou no código o seguinte HTML.

O designer também criou um degradê para o fundo e o desenvolvedor sabendo do problema de vendor prefixes criou a seguinte parte no CSS:

E na parte de legibilidade, foi decidido usar unidades de medidas relativas para as letras terem um tamanho agradável em cada dispositivo:

Na parte do rodapé que o designer criou o frontend precisou se preocupar com posicionamento no css.

Além de ter que se preocupar com seletores no CSS, para fazer isso tudo funcionar. Perceba que nada disso é preocupação do designer, que por sua vez não se importa se os navegadores não entendem a mesma regra de fundo sempre, se é necessário posicionamento ou qual seletor usar. É o frontend que deve transmitir o que foi imaginado para a aparência e transformar a criação feita com uma ferramenta visual que não precisa se preocupar com resoluções de tela para algo utilizável em qualquer dispositivo.

Resumo:

• O desenvolvedor frontend precisou adaptar um layout, usando seus conhecimentos de HTML e CSS;
• Foi necessário estilizar elementos HTML e posicioná-los;
• Também precisou do conhecimento de como os navegadores se comportam para escolher a alternativa que melhor funcionaria em todos navegadores;
• O conhecimento de como a web funciona, o que são CDNs e o impacto disso no projeto também foi útil.

Integrando com o backend

Mesmo se tudo funcionasse, de nada teria valor se os dados não fossem persistentes (Existissem mesmo se a aplicação for encerrada), ou se não tivéssemos a identificação do cliente. Isso tudo foi feito pelo nosso backend, no caso o serviço de backend do Firebase.

Primeiro foi iniciado o serviço do backend:

No código abaixo ele colocou uma área que possuía 2 botões com os ícones e que tentam se logar ao serem clicados.

Além de interagir com o backend usando a API do Firebase (que ele descobriu como usar lendo a documentação oficial do Firebase), também foi necessário saber manipular o DOM, e teve que usar promises (uma funcionalidade relativamente nova no Javascript). Após mostrar ao cliente que seu uso era suportado pelos navegadores que o mesmo exigia no famoso site do CanIUse.

O frontend pode finalmente enviar a pergunta conhecendo os eventos HTML, que por sua vez, será enviada ao backend quando o “Enter” no teclado for pressionado ou o botão “Enviar” seja clicado:

Foi importante também entender como lidar com código assíncrono, seja através de callbacks ou promises.

Resumo:

• O desenvolvedor frontend precisou saber como usar uma API e para isso leu a documentação oficial;
• Ele precisou saber como o HTML se comunica com o Javascript para receber as informações do texto, e como o Javascript se comunica com o HTML através do DOM para limpar campos ou mudar estilos;
• Conhecimento de como o Javascript funciona de forma assíncrona também foi importante para nosso desenvolvedor iniciante.

Usabilidade para uma melhor experiência e satisfação do cliente.

Mesmo desenvolvendo conforme as especificações do designer e os dados navegando para o backend, nosso desenvolvedor frontend não acabou ainda. É preciso cuidar da usabilidade, lidar com erros e as famosas regras de negócio.

Para uma melhor usabilidade foi decidido que, cada coisa apareceria na tela dependendo do momento, para isso nosso desenvolvedor precisou conhecer sobre a propriedade display, a fim de esconder cada parte. Na que diz respeito às regras de negócio, foi necessário saber quando o usuário está ou não logado e para isso, utilizou uma variável global pois ele sabe de escopos de variáveis.

Ele também precisava de uma forma do cliente entender que a ação enviada, estava sendo executada, e, para isso ele novamente precisou manipular o DOM.

Não só o botão, mas também as mensagens de erro ou sucesso precisavam ser informadas e ele precisou saber como colocar a cor correta e o texto desejado.

E finalmente, ele tinha que atender aos desejos do cliente de não permitir mensagens repetidas e autorizar somente pessoas autenticadas e para isso ele precisou de um pouco de conhecimento de lógica básica.

Resumo:

• Para a usabilidade foi necessário um conhecimento de lógica de programação além de estilização;
• Um conhecimento de como a linguagem funciona em termos de escopo de variáveis também foi importante;
• A manipulação do DOM para modificar classes e valores foi necessária para uma melhor usabilidade do usuário.

E esse desenvolvedor iniciante o que ele poderia fazer melhor?

Esse exemplo possui algumas coisas que poderíamos melhorar:

• Usar outras linguagens para diminuir o código redundante como Sass e Pug;
• Um design verdadeiramente responsivo e pensado em cada tela poderia ser feito através de media queries;
• O arquivo que está de forma clara poderia ser minificado para economizar espaço e aumentar a velocidade;
• A imagem em PNG poderia ser trocado por um SVG infinitamente escalável;
• Várias outras coisas poderiam ser feitas para tornar esse projeto simples mais maduro, resiliente, profissional e de fácil manutenção.

Basicamente, há toda uma infinidade de caminhos que um desenvolvedor frontend pode seguir a partir dessas 3 linguagens, é possível aprender React ou Angular, escolher implementar coisas com GWT e escolher uma infinidade de ferramentas para atingir seu objetivo final.

Então, afinal o que um desenvolvedor frontend faz mesmo?

Nos exemplos nós vimos mais ou menos como o dia-a-dia de um desenvolvedor frontend é, tanto em termos de tarefas e preocupações, como em termos de código. Um desenvolvedor frontend então:

• Implementa um design da melhor forma possível;
• Faz o site funcionar no maior número de navegadores e dispositivos;
• Integra as informações vindas de um navegador com serviços de backend;
• Implementa a usabilidade e as regras de negócio da interface utilizando seu conhecimento das linguagens e de lógica de programação.

É esperado que um desenvolvedor frontend conheça bem as linguagens que ele usa e onde elas funcionam.

Um desenvolvedor frontend não é necessariamente quem “faz ficar bonito”, essa é uma preocupação de design, o desenvolvedor frontend tenta “implementar essa beleza da melhor forma possível”.

Ele também não cria as regras de negócio, essa é uma preocupação do gerente de projeto ou produto. O desenvolvedor implementa essas regras, tira a linguagem do papel e a transforma em linguagem de código.

A usabilidade também não é uma responsabilidade do frontend em si, a implementação da mesma é.

Isso quer dizer que, um desenvolvedor frontend não pode fazer seu próprio design, criar seu próprio backend ou pensar nas regras de negócio? Claro que pode! Estou dizendo que, essas são preocupações de áreas diferentes do frontend , e embora isso seja uma definição arbitrária, tento aqui mostrar o que é esperado de um frontend. Existem milhares de desenvolvedores frontend que fazem um pouco mais do que só frontend, portanto, cabe a você e sua empresa escolherem o quanto de qual parte você quer fazer.

Espero que este artigo seja um ponto de partida para você, compartilhe também se gostou e qualquer dúvida, estou à disposição, seja aqui no Medium ou no PergunteAoDev. Até o próximo texto!