Impactos das novas legislações do e-commerce sobre a formação do preço de vendas
Potencial de Vendas do e-Commerce no Frontend - WOB2012
44
WOB 2012 Frontend + e-commerce Leo Balter Mozilla Rep
-
Upload
leonardo-balter -
Category
Technology
-
view
390 -
download
2
description
Palestra realizada no WOB2012
Transcript of Potencial de Vendas do e-Commerce no Frontend - WOB2012
WOB 2012Frontend + e-commerce
Leo Balter
Mozilla Rep
FrontEnd?
• HTML
• CSS
• JavaScript
Investir em FrontEnd
• Performance
• Manutenção
• Consistência
• Criatividade
Performance
Performance
3 regras básicasOMU
• Otimizar
• Minimizar
• Unir
http://bygiovanni.com.br/talks/performance/#10@keppelen
• Otimizar compressão ao habilitar GZIP
• Otimizar dimensões de imagens no HTML
• Otimizar compressão Imagens sem perda de qualidade
• Otimizar formato das imagens
• Otimizar Cookies e Headers
• Otimizar carregamento do JS
• Otimizar carregamento do CSS
• Otimizar outros carregamentos
• Otimizar First-View
• Minimizar JavaScript
• Minimizar CSS
• Minimizar HTML
• Unir arquivos JS
• Unir arquivos CSS
• Unir Imagens em Background Sprites
• 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!
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
Minimizar
function f(a, b, c, d, e) { var q; var w; 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(){ /*...*/ }}
function f(a,b,c){var f,g,h,i;function j(){}function k(){}g=10,f=20;for(h=1;h<10;++h)i=j(a);for(h=0;h<1;++h)i=k(c)}
Unir
• 13 arquivos• 729KB• 4,46 segundos
• 2 arquivos• 729KB• 1,87 segundos
• Performance
• Manutenção
• Consistência
• Criatividade
Investir em FrontEnd
• Manutenção é dolorosa
• Nenhum desenvolvedor gosta
Manutenção
Projeto ideal
• Crossbrowser
• Flexível
• Customizável
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
• Peixe Urbano Bootstrap
• Abril Bootstrap
• Skeleton
• 99line
• ...
Documentação
• Grid
• Tipografia
• Tabelas
• Botões
• Formulários
• Performance
• Manutenção
• Consistência
• Criatividade
Investir em FrontEnd
Testing Sucks!
Como você testa o que faz?
Mexe e vê?
Impacto
Ocorrência
Baixo
Baixo Alto
Alto
Risco de baixo nível
Risco de nível médio
Risco Crítico
http://bit.ly/11tTwNGerenciamento de Risco
Funciona
Faz o que deveria
Carrinho de Compras
Performance
Novos projetos...
• Performance
• Manutenção
• Consistência
• Criatividade
Investir em FrontEnd
“Todo e-commerce expõe seu potencial através de um bom
trabalho no frontend”http://ht.ly/dTc2S
Obrigado!
• @garu_rj
• @bernarddeluna
• @jaydson
Agradecimentos:
• @leobalter
Contatos:
