Técnicas de frontend para aplicações django

por Rael Max

Quem sou eu.@raelmaxhttp://raelmax.com

Porque é importante?

Performance

Manutenção

Escalabilidade

Organização

Dicas gerais

menos requisiçõescss sprites, combine os arquivos(css/js),

data uris

arquivos menoresminifique o css, javascript e o html também.

habilite o gzip no servidor.

cada coisa no seu lugarcss no topo e javascript no fim. nunca,

nunca misture tags do django com javascript.

NÃAAAAAAAAAAAAAAO!

Melhor assim. data-attributes ftw!

Dicas de template

elementos fake

contrib.webdesign

● gere textos “lorem ipsum” para testes no template

● o projeto cresce e fica perdido por lá, não recomendo.

templatetag with

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

templatetag with

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

includes parametrizáveis

reuso e organização de código.

for in + if

útil quando se precisa de separação de conteúdo por blocos html

Ferramentas

prototipagem

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

performance

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

links

● 26 técnicas de otimização: http://goo.gl/hV1b2r

● Dicas do Yahoo!:http://goo.gl/nN2pT6

Perguntas? Palavrões?