Leo Balter      WOB 2012       Frontend + e-commerce                               Mozilla Rep
FrontEnd?       • HTML       • CSS       • JavaScript
Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
Performance
Performance
3 regras básicas           OMU• Otimizar• Minimizar• Unir                    @keppelen       http://bygiovanni.com.br/talk...
•   Otimizar compressão ao         •   Otimizar outros    habilitar GZIP                     carregamentos•   Otimizar dim...
• 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....
http://goo.gl/zSd8q
• +100ms = -1% de vendas           http://goo.gl/zSd8q
• +100ms = -1% de vendas• vendas ~= $67 milhões/dia            http://goo.gl/zSd8q
• +100ms = -1% de vendas• vendas ~= $67 milhões/dia• 1seg = - $2.4 bilhões por ano!             http://goo.gl/zSd8q
Otimizar
Minimizarfunction f(a, b, c, d, e) {          function f(a,b,c){var f,g,h,i;function j()    var q;                        ...
http://pimpmyjs.com
Unir• 13 arquivos• 729KB• 4,46 segundos
• 2 arquivos• 729KB• 1,87 segundos
Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
Manutenção• Manutenção é dolorosa• Nenhum desenvolvedor gosta
Projeto ideal• Crossbrowser• Flexível• Customizável
1 milhão de bootstraps“Bootstraps são documentações de módulos eelementos de interface de projetos. Eventualmenteeles são ...
• Peixe Urbano Bootstrap• Abril Bootstrap• Skeleton• 99line• ...
Documentação• Grid• Tipografia• Tabelas• Botões• Formulários
Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
Testing Sucks!Como você testa o que faz?           Mexe e vê?
“Testar código é minimizar riscos.”             http://ht.ly/dT2OH
Alto                               Ri                                   sc                                      o         ...
FuncionaFaz o que deveria
PerformanceCarrinho de Compras  Novos projetos...
Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
“Todo e-commerce expõe seupotencial através de um bom   trabalho no frontend”         http://ht.ly/dTc2S
Obrigado!Contatos:               Agradecimentos:                        •   @garu_rj•   @leobalter                        ...
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Potencial de Vendas do e-Commerce no Frontend - WOB2012
Próximos SlideShares
Carregando em…5
×

Potencial de Vendas do e-Commerce no Frontend - WOB2012

645 visualizações

Publicada em

Palestra realizada no WOB2012

Publicada em: Tecnologia

Potencial de Vendas do e-Commerce no Frontend - WOB2012

  1. 1. Leo Balter WOB 2012 Frontend + e-commerce Mozilla Rep
  2. 2. FrontEnd? • HTML • CSS • JavaScript
  3. 3. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  4. 4. Performance
  5. 5. Performance
  6. 6. 3 regras básicas OMU• Otimizar• Minimizar• Unir @keppelen http://bygiovanni.com.br/talks/performance/#10
  7. 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. 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. 9. http://goo.gl/zSd8q
  10. 10. • +100ms = -1% de vendas http://goo.gl/zSd8q
  11. 11. • +100ms = -1% de vendas• vendas ~= $67 milhões/dia http://goo.gl/zSd8q
  12. 12. • +100ms = -1% de vendas• vendas ~= $67 milhões/dia• 1seg = - $2.4 bilhões por ano! http://goo.gl/zSd8q
  13. 13. Otimizar
  14. 14. Minimizarfunction 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. 15. http://pimpmyjs.com
  16. 16. Unir• 13 arquivos• 729KB• 4,46 segundos
  17. 17. • 2 arquivos• 729KB• 1,87 segundos
  18. 18. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  19. 19. Manutenção• Manutenção é dolorosa• Nenhum desenvolvedor gosta
  20. 20. Projeto ideal• Crossbrowser• Flexível• Customizável
  21. 21. 1 milhão de bootstraps“Bootstraps são documentações de módulos eelementos de interface de projetos. Eventualmenteeles são disponibilizados como projetos Open Source.” http://ht.ly/dT0cW
  22. 22. • Peixe Urbano Bootstrap• Abril Bootstrap• Skeleton• 99line• ...
  23. 23. Documentação• Grid• Tipografia• Tabelas• Botões• Formulários
  24. 24. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  25. 25. Testing Sucks!Como você testa o que faz? Mexe e vê?
  26. 26. “Testar código é minimizar riscos.” http://ht.ly/dT2OH
  27. 27. Alto Ri sc o C Ri rí t sc ico o deOcorrê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
  28. 28. FuncionaFaz o que deveria
  29. 29. PerformanceCarrinho de Compras Novos projetos...
  30. 30. Investir em FrontEnd• Performance• Manutenção• Consistência• Criatividade
  31. 31. “Todo e-commerce expõe seupotencial através de um bom trabalho no frontend” http://ht.ly/dTc2S
  32. 32. Obrigado!Contatos: Agradecimentos: • @garu_rj• @leobalter • @bernarddeluna• leo@balter.com.br • @jaydson

×