Este documento fornece dicas sobre técnicas de frontend para aplicações Django, incluindo como melhorar o desempenho, manutenção e escalabilidade através de menos requisições, arquivos menores e organização do código. Além disso, fornece dicas sobre templates, ferramentas de prototipagem e desempenho como Django Compressor, GruntJS e otimização de imagens.

1. Técnicas de frontend para
aplicações django
por Rael Max

2. Quem sou eu.
@raelmax
http://raelmax.com

3. Porque é importante?

4. Performance

5. Manutenção

6. Escalabilidade

7. Organização

8. Dicas gerais

9. menos requisições
css sprites, combine os arquivos(css/js),
data uris

10. arquivos menores
minifique o css, javascript e o html também.
habilite o gzip no servidor.

11. cada coisa no seu lugar
css no topo e javascript no fim. nunca,
nunca misture tags do django com
javascript.

12. NÃAAAAAAAAAAAAAAO!

13. Melhor assim. data-attributes ftw!

14. Dicas de template

15. elementos fake

16. contrib.webdesign
● gere textos “lorem ipsum” para testes no
template
● o projeto cresce e fica perdido por lá, não
recomendo.

17. templatetag with
contatenar strings, útil quando se precisa de
uma string específica como parâmetro de algo:

18. templatetag with
diminuir acesso ao banco quando se usa o
mesmo objeto várias vezes no mesmo
template:

19. includes parametrizáveis
reuso e organização de código.

21. for in + if
útil quando se precisa de separação de
conteúdo por blocos html

23. Ferramentas

24. prototipagem
●
●
●
●
twitter bootstrap;
foundation;
flat ui;
html5-boilerplate.

25. performance
●
●
●
●
●
django-compressor (compressão css/js)
gruntjs (várias tarefas de front)
smush.it (otimização de imagens)
csslint
jslint

26. links
● 26 técnicas de otimização: http://goo.
gl/hV1b2r
● Dicas do Yahoo!:
http://goo.gl/nN2pT6

27. Perguntas? Palavrões?