Desenvolvimento front-end é bastante difícil. Se você começou a trabalhar neste meio há alguns anos, deve ter muita dificuldade em se adaptar a todas as ferramentas e tecnologias que surgem todo santo dia. Se você é novo nesta caminhada, o trabalho é ainda mais árduo.
Há um tempo atrás eu escrevi o artigo “Guia do Desenvolvedor Web 2018” e lá comentei do excelente trabalho do engenheiro de software Kamran Ahmed que desenvolveu o developer-roadmap: um diagrama bem elaborado revelando os caminhos necessários (na visão do autor) de aprendizado para ser um desenvolvedor web em 2018. Lá ele comenta das carreiras de Front-end, Back-end, DevOps; e quais as características são comuns a todos eles.
Entretanto, o aprendizado de técnicas, tecnologias e ferramentas é apenas o primeiro passo para que possamos produzir um bom produto digital para os nossos clientes. Além de saber fazer, precisamos saber como fazer bem feito. Não adianta fazermos um site para o nosso cliente e entregamos se ele não for:
- Rápido
- Responsivo
- Seguro
- Bonito
Mas como saber se o nosso projeto atende a estas e tantas outras características importantes? É para resolver este problema que foi desenvolvido o Front-end Performance Checklist. Este projeto de código aberto que está disponível sob licença MIT no GitHub e já possui mais de 9.000 estrelas; é um grande checklist de perfomance que diz respeito a projetos de front-end. A ideia é que o desenvolvedor passe por cada um dos itens descritos e valide se o seu site atende à expectativa ou não. A meta é tornar o seu site o mais rápido possível.
Como funciona?
Seu funcionamento é extremamente simples. O projeto está dividido em sete tópicos:
- HTML
- CSS
- Fonts
- Images
- JavaScript
- Server (in progress)
- JS Frameworks (in progress)
Para cada tópico, teremos uma série de itens como este:
Veja só como funciona. Em negrito temos o nome da regra (Minified HTML) e logo em seguida o seu nível de dificuldade (neste caso, Medium). Além disso, em seguida temos uma breve descrição do que ele significa e logo abaixo o que eu considero o mais importante: há uma seção que diz Why (Por que) e outra How (Como). Na seção de como fazer, há várias referências para que você tenha acesso a ferramentas e tutoriais que vão te ajudar a cumprir o objetivo.
Bem legal, não é mesmo?
Conclusão
Este checklist foi criado na esperança de ajudar desenvolvedores de todo mundo em otimizar seus projetos e entregar a melhor experiência possível para o usuário (pelo menos em questões de performance). Com o tempo naturalmente começamos a absorver estas dicas e aplicá-las sem ao menos perceber, mas em todo caso, é sempre bom ter um local para conferir.
E se você tiver dificuldade em entender o material em inglês, há um fork muito legal do projeto em PT-BR!
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?