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