Em resumo, o que é um front-end performático e de fácil manutenção pra você?

“Só isso? Uma entrevista com uma única pergunta? Essa foi fácil.”

Ao menos foi o que pensei, só para descobrir que, apesar da aparente simplicidade, a pergunta não tem uma resposta simples. Se eu usar diretrizes existentes, estou trapaceando. Se eu for prolixo, vão pular meu e-mail. Se minha resposta for muito curta, eu não me esforcei o suficiente.

Do que diabos se constitui um bom front-end? Isomorphic JS? SPAs? Flexbox? Web components? Shadow DOM? ES6? Quais são os aspectos mais importantes?

Eu passei um bom tempo tentando chegar numa boa resposta. Acontece que a resposta não se encontrava em tecnologias, mas em filosofias de programação.

Abaixo você vai encontrar um facsimile da minha resposta, que eu descaradamente estou batizando de “Os 5 Pilares de um Front-end Sólido”. Espero que te inspire de alguma forma.

1) É acessível.

Essa é a fundação mais importante de um bom front-end. Não estamos falando apenas de pessoas com deficiências (mas também) — um site acessível para todos aperfeiçoa a experiência geral do usuário, coloca o foco no conteúdo, leva à independência de dispositivos, melhora a performance e até influencia no SEO.

2) É orientado a progressive enhancement.

Progressive enhancement torna o desenvolvimento cross-browser muito mais fácil. É performático porque não apóia a estrutura em CSS3 ou JS e gera código mais limpo pois reduz o espaço para device detection ou gambiarras.

3) Tem seu próprio DevOps.

Com bom front-end ops você pode garantir releases rápidos e livres de problemas. A performance torna-se mensurável, erros são monitorados e todos os processos são automatizados — geração de sprites, prefixos de CSS, linting, gerenciamento de dependências, etc.

4) É modular.

O JS, HTML e o CSS são completamente dissociados uns dos outros*. Ao invés de estilos ou scripts por página, todo o código é escrito como componentes individuais e reutilizáveis.

Menos disso:

#home #top-section #pictures-wrapper { /* ... */ }

... E mais disso:

.photo-gallery { /* ... */ }

*Isso não necessariamente se aplica a React :)

5) Tem diretrizes de código e documentação.

A maior parte do código deve parecer que foi escrita pelo mesmo desenvolvedor. O front-end segue metodologias, o código é organizado e limpo, e tudo é propriamente documentado.

Agora é a minha vez de perguntar:

Em resumo, o que é um front-end performático e de fácil manutenção pra você?

Escreva uma resposta abaixo e compartilhe o que pensa.