Técnicas de frontend para aplicações django - PythonBrasil[9]

2,845 views

Published on

O frontend de aplicações web tem importância tão grande quanto o backend para o sucesso do projeto, veremos aqui algumas dicas básicas de otimização de frontend em aplicações django.

Published in: Technology
1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total views
2,845
On SlideShare
0
From Embeds
0
Number of Embeds
405
Actions
Shares
0
Downloads
82
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Técnicas de frontend para aplicações django - PythonBrasil[9]

  1. 1. Técnicas de frontend para aplicações django por Rael Max
  2. 2. Quem sou eu. @raelmax http://raelmax.com
  3. 3. Porque é importante?
  4. 4. Performance
  5. 5. Manutenção
  6. 6. Escalabilidade
  7. 7. Organização
  8. 8. Dicas gerais
  9. 9. menos requisições css sprites, combine os arquivos(css/js), data uris
  10. 10. arquivos menores minifique o css, javascript e o html também. habilite o gzip no servidor.
  11. 11. cada coisa no seu lugar css no topo e javascript no fim. nunca, nunca misture tags do django com javascript.
  12. 12. NÃAAAAAAAAAAAAAAO!
  13. 13. Melhor assim. data-attributes ftw!
  14. 14. Dicas de template
  15. 15. elementos fake
  16. 16. contrib.webdesign ● gere textos “lorem ipsum” para testes no template ● o projeto cresce e fica perdido por lá, não recomendo.
  17. 17. templatetag with contatenar strings, útil quando se precisa de uma string específica como parâmetro de algo:
  18. 18. templatetag with diminuir acesso ao banco quando se usa o mesmo objeto várias vezes no mesmo template:
  19. 19. includes parametrizáveis reuso e organização de código.
  20. 20. for in + if útil quando se precisa de separação de conteúdo por blocos html
  21. 21. Ferramentas
  22. 22. prototipagem ● ● ● ● twitter bootstrap; foundation; flat ui; html5-boilerplate.
  23. 23. performance ● ● ● ● ● django-compressor (compressão css/js) gruntjs (várias tarefas de front) smush.it (otimização de imagens) csslint jslint
  24. 24. links ● 26 técnicas de otimização: http://goo. gl/hV1b2r ● Dicas do Yahoo!: http://goo.gl/nN2pT6
  25. 25. Perguntas? Palavrões?

×