Front End

8 out, 2018

O checklist de performance front-end que você sempre quis

100 visualizações
Publicidade

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