Leo Balter é um especialista em front-end e e-commerce que trabalha na Mozilla. Neste documento, ele discute a importância de investir no front-end, abordando tópicos como performance, manutenção, consistência e criatividade. Ele fornece dicas práticas sobre como otimizar sites para melhorar a performance, facilitar a manutenção e garantir a consistência visual.

1. Leo Balter
WOB 2012
Frontend + e-commerce
Mozilla Rep

2. FrontEnd?
• HTML
• CSS
• JavaScript

3. Investir em FrontEnd
• Performance
• Manutenção
• Consistência
• Criatividade

4. Performance

5. Performance

6. 3 regras básicas
OMU
• Otimizar
• Minimizar
• Unir
@keppelen
http://bygiovanni.com.br/talks/performance/#10

7. • Otimizar compressão ao • Otimizar outros
habilitar GZIP carregamentos
• Otimizar dimensões de • Otimizar First-View
imagens no HTML
• Minimizar JavaScript
• Otimizar compressão Imagens
sem perda de qualidade
• Minimizar CSS
• Otimizar formato das imagens
• Minimizar HTML
• Otimizar Cookies e Headers
• Unir arquivos JS
• Otimizar carregamento do JS
• Unir arquivos CSS
• Otimizar carregamento do
• Unir Imagens em Background
CSS Sprites

8. • 3MB para 287K
• Redução de custos em Servidores: R$
16.000.00/dia
• 7.5s para 4.3s
• -3.3s ~= aumento de receita em R$
1.000.000,00/dia!

9. http://goo.gl/zSd8q

10. • +100ms = -1% de vendas
http://goo.gl/zSd8q

11. • +100ms = -1% de vendas
• vendas ~= $67 milhões/dia
http://goo.gl/zSd8q

12. • +100ms = -1% de vendas
• vendas ~= $67 milhões/dia
• 1seg = - $2.4 bilhões por ano!
http://goo.gl/zSd8q

13. Otimizar

14. Minimizar
function f(a, b, c, d, e) { function f(a,b,c){var f,g,h,i;function j()
var q; {}function k(){}g=10,f=20;for(h=1;h<10;+
var w; +h)i=j(a);for(h=0;h<1;++h)i=k(c)}
w = 10;
q = 20;
for (var i = 1; i < 10; ++i) {
var boo = foo(a);
}
for (var i = 0; i < 1; ++i) {
var boo = bar(c);
}
function foo(){ /*...*/ }
function bar(){ /*...*/ }
function baz(){ /*...*/ }
}

15. http://pimpmyjs.com

16. Unir
• 13 arquivos
• 729KB
• 4,46 segundos

17. • 2 arquivos
• 729KB
• 1,87 segundos

18. Investir em FrontEnd
• Performance
• Manutenção
• Consistência
• Criatividade

19. Manutenção
• Manutenção é dolorosa
• Nenhum desenvolvedor gosta

20. Projeto ideal
• Crossbrowser
• Flexível
• Customizável

24. 1 milhão de bootstraps
“Bootstraps são documentações de módulos e
elementos de interface de projetos. Eventualmente
eles são disponibilizados como projetos Open Source.”
http://ht.ly/dT0cW

28. • Peixe Urbano Bootstrap
• Abril Bootstrap
• Skeleton
• 99line
• ...

29. Documentação
• Grid
• Tipografia
• Tabelas
• Botões
• Formulários

30. Investir em FrontEnd
• Performance
• Manutenção
• Consistência
• Criatividade

32. Testing Sucks!
Como você testa o que faz?
Mexe e vê?

34. “Testar código é minimizar riscos.”
http://ht.ly/dT2OH

35. Alto
Ri
sc
o
C
Ri
rí t
sc
ico
o
de
Ocorrência
Ri
ní
sc
ve
o
ml
de
éd
ba
io
ix
o
ní
ve
Baixo l
Baixo Impacto Alto
Gerenciamento de Risco http://bit.ly/11tTwN

36. Funciona
Faz o que deveria

39. Performance
Carrinho de Compras
Novos projetos...

40. Investir em FrontEnd
• Performance
• Manutenção
• Consistência
• Criatividade

43. “Todo e-commerce expõe seu
potencial através de um bom
trabalho no frontend”
http://ht.ly/dTc2S

44. Obrigado!
Contatos: Agradecimentos:
• @garu_rj
• @leobalter
• @bernarddeluna
• leo@balter.com.br
• @jaydson