![Page 1: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/1.jpg)
os desafios do desenvolvimentode front-end em um e-commerce
@shiota 2013
![Page 2: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/2.jpg)
olá!slideshare.net/eshiotagithub.com/eshiota
@shiota
![Page 3: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/3.jpg)
front-end engineer@
![Page 4: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/4.jpg)
![Page 5: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/5.jpg)
DEV
![Page 6: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/6.jpg)
![Page 7: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/7.jpg)
![Page 8: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/8.jpg)
e-commerce 101em alguns slides
![Page 9: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/9.jpg)
=)
![Page 10: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/10.jpg)
taxa de conversãodos usuários que entram no site, quantos
finalizam uma compra?
![Page 11: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/11.jpg)
ticket médioem média, quanto os usuários gastam
por compra?
![Page 12: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/12.jpg)
=)taxa de conversão
!ticket médio
=
![Page 13: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/13.jpg)
taxa de conversão!
ticket médio= $
![Page 14: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/14.jpg)
= $=)
![Page 15: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/15.jpg)
= ?=)
![Page 16: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/16.jpg)
complexoindecisoexigente
inexperientedecidido
cuidadosoexperiente
![Page 17: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/17.jpg)
ser humano, como todos nós =)
![Page 18: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/18.jpg)
o que faz o usuário abandonar o carrinho?
![Page 19: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/19.jpg)
alto custo de frete
$
![Page 20: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/20.jpg)
não estão prontos para finalizar
?
![Page 21: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/21.jpg)
produtos muito caros$
![Page 22: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/22.jpg)
guardam para depois
![Page 23: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/23.jpg)
não mencionou claramente o frete
?
![Page 24: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/24.jpg)
sem guest checkout
![Page 25: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/25.jpg)
formulário com muitas informações
![Page 26: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/26.jpg)
checkout complexo
![Page 27: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/27.jpg)
website lento
![Page 28: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/28.jpg)
taxas extras
![Page 29: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/29.jpg)
falta de opções de pagamento
![Page 30: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/30.jpg)
entrega demorada
![Page 31: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/31.jpg)
spam de ofertas
![Page 32: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/32.jpg)
site não funciona=(
![Page 33: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/33.jpg)
como o front-end pode melhorar a conversão?
![Page 34: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/34.jpg)
formulário com muitas informaçõescheckout complexo
website lentosite não funciona
![Page 35: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/35.jpg)
velocidade da páginainterface estável
detalhes = emotion designvalidação de novas hipóteses
![Page 36: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/36.jpg)
desafios de front-end(agora a palestra começa =P)
![Page 37: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/37.jpg)
múltiplos desenvolvedoresdesenvolvimento escalável
performance client-sidetestes a/b
![Page 38: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/38.jpg)
trabalhando comvários desenvolvedores
![Page 39: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/39.jpg)
trabalhar em equipe é difícil... =(
![Page 40: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/40.jpg)
aspas simples!
aspas duplas
![Page 41: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/41.jpg)
ponto e vírgula no JS!
sem ponto e vírgula
![Page 42: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/42.jpg)
JavaScript!
Co"eeScript
![Page 43: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/43.jpg)
(JavaScript, claro)
![Page 44: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/44.jpg)
(com ponto e vírgula)
![Page 45: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/45.jpg)
... mas cada um pode ter uma visão diferente e complementar. =)
![Page 46: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/46.jpg)
code smell performance
sintaxe arquitetura
![Page 47: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/47.jpg)
mantenha um code standard para o time.
![Page 48: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/48.jpg)
![Page 49: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/49.jpg)
consistência, legibilidade, sem bikeshed.
![Page 50: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/50.jpg)
![Page 51: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/51.jpg)
git + pull requests
![Page 52: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/52.jpg)
![Page 53: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/53.jpg)
qualquer um revisa, qualquer um comenta.
![Page 54: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/54.jpg)
diferentes visões,mais erros detectados.
![Page 55: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/55.jpg)
![Page 56: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/56.jpg)
o conhecimento é disseminado pelo time.
![Page 57: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/57.jpg)
todos ficam maiscriteriosos com o que fazem.
![Page 58: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/58.jpg)
desenvolvimentoescalável e testável
![Page 59: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/59.jpg)
desenvolvimento ágil:mudanças precisas, altos ganhos.
![Page 60: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/60.jpg)
melhorias são constantes,e nada é 100% definitivo.
![Page 61: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/61.jpg)
o código deve ser facilmente alterável/adaptável.
![Page 62: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/62.jpg)
dica 1usem pre-processors de CSS. sério. agora. já. eu espero.
![Page 63: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/63.jpg)
sass+
![Page 64: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/64.jpg)
variáveis, mixins e funções
![Page 65: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/65.jpg)
/*********************************************************************** Variables Module** All constants that will be used through the styles must be* defined here.**********************************************************************/
$TEXT_COLOR : #555;$DISCOUNT_COLOR : #ef6565;$LIGHT_COLOR : #fefafa;
$SELECTION_BACKGROUND : #41bdce;$SELECTION_COLOR : #fff;
$LINK_COLOR : #447f87;$LINK_HOVER_COLOR : #41bdce;$LINK_ACTIVE_COLOR : #447f87;
$ERROR_BACKGROUND : #fffaad;$LIGHT_BACKGROUND : #fefefa;
$SITE_WIDTH : 978px;$FOOTER_HEIGHT : 777px;
$PURPLE : #905194;$ORANGE : #fbb100;
![Page 66: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/66.jpg)
/*********************************************************************** Mixins Module** All general purpose mixins are defined here.**********************************************************************/
/********************************************************************** =Clearfix*********************************************************************/
@mixin clearfix { &:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
zoom: 1;}
/********************************************************************** =Image replacement** `display` property should be declare on the element, not here* on the mixin. Element must have fixed width and height.*********************************************************************/
@mixin img_replacement { text-indent: 100%; overflow: hidden; white-space: nowrap;}
![Page 67: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/67.jpg)
/*********************************************************************** Functions Module** Custom functions used by the application**********************************************************************/
// Returns unitless number@function remove-unit($number) { $unit: unit($number); $one: 1;
@if $unit == "px" { $one: 1px; } @if $unit == "em" { $one: 1em; } @if $unit == "%" { $one: 1%; }
@return $number / $one;}
// Returns flexible value// Returns `em` by default, accepts `%` as format.@function flex($target, $context: 14, $unit: "em") { $size: remove-unit($target) / remove-unit($context);
@if $unit == "em" { @return #{$size}em; } @if $unit == "%" { @return percentage($size); }}
// Alias to `flex` function, using `%` as format.@function perc($target, $context) { @return flex($target, $context, "%");}
// Alias to `flex` function, using `em` as format.@function em($target, $context: 14) { @return flex($target, $context, "em");}
![Page 68: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/68.jpg)
estilos modularizados em partials
![Page 69: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/69.jpg)
app/ assets/ stylesheets/ base/ _functions.scss _mixins.scss _variables.scss ui/ _breadcrumb.scss _carousel.scss _dentedBox.scss _flashMessage.scss
![Page 70: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/70.jpg)
/********************************************************************************* UI > Breadcrumb** General styles for the breadcrumb.********************************************************************************/
.breadcrumb { font-size: em(12px); line-height: em(21px, 12px); text-transform: uppercase; color: #444; width: 978px;}
.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a:active { color: #444; text-decoration: none;}
.breadcrumb a:hover { color: #444; text-decoration: underline;}
.breadcrumb .separator { padding: 0 3px;}
![Page 71: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/71.jpg)
/********************************************************************************* UI > Loader** Animated loader for AJAX requests********************************************************************************/
@mixin loader_sprite_position($xoffset, $yoffset) { background-position: sprite-position($icon-sprite, loader_sprite, $xoffset, $yoffset);}
.loader { width: 25px; height: 25px; display: none;}
.loader b { display: block; width: 25px; height: 25px; background-image: sprite-url($icon-sprite);}
.loader b,
.loader .f1 { @include loader_sprite_position(-10px, -10px); }
.loader .f2 { @include loader_sprite_position(-45px, -10px); }
.loader .f3 { @include loader_sprite_position(-80px, -10px); }
.loader .f4 { @include loader_sprite_position(-115px, -10px); }
.loader .f5 { @include loader_sprite_position(-150px, -10px); }
.loader .f6 { @include loader_sprite_position(-185px, -10px); }
.loader .f7 { @include loader_sprite_position(-220px, -10px); }
.loader .f8 { @include loader_sprite_position(-255px, -10px); }
![Page 72: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/72.jpg)
geração automática de sprites acelera o desenvolvimento.
![Page 73: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/73.jpg)
$icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);
![Page 74: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/74.jpg)
$icon-sprite: sprite-map("icon/*.png", $spacing: 16px, $repeat: no-repeat, $layout: vertical);
![Page 75: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/75.jpg)
/* Compass sprite function receives the map variable and image as arguments */
background: sprite($icon-sprite, arrow_dropdown) no-repeat;
/* Compiled CSS */
background: url(/assets/icon-s5dab8c2901.png) -40px -158px no-repeat;
![Page 76: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/76.jpg)
função de inline image economiza requests.
![Page 77: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/77.jpg)
/* Compiled CSS */
background: #f5f3fb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQCAMAAAAcVM5PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF5+TW////////4qZUpQAAAAN0Uk5T//8A18oNQQAAACBJREFUeNpiYGBgAgMGBkYog4mJXAbILAiDkVxzAAIMAEMOAPMId2OWAAAAAElFTkSuQmCC') repeat;
/* Generates a base64 image */
background: #f5f3eb inline-image("bg_dots.png") repeat;
![Page 78: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/78.jpg)
![Page 79: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/79.jpg)
(seja criterioso)
![Page 80: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/80.jpg)
dica 2módulos: poucas linhas, comportamentos isolados, extensíveis, e testáveis.
![Page 81: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/81.jpg)
estrutura base (reset, base styles)
grid
padrões
módulos
módulos contextualizados
![Page 82: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/82.jpg)
css do módulo
![Page 83: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/83.jpg)
/********************************************************************************* UI > Loader** Animated loader for AJAX requests********************************************************************************/
@mixin loader_sprite_position($xoffset, $yoffset) { background-position: sprite-position($icon-sprite, loader_sprite, $xoffset, $yoffset);}
.loader { width: 25px; height: 25px; display: none;}
.loader b { display: block; width: 25px; height: 25px; background-image: sprite-url($icon-sprite);}
.loader b,
.loader .f1 { @include loader_sprite_position(-10px, -10px); }
.loader .f2 { @include loader_sprite_position(-45px, -10px); }
.loader .f3 { @include loader_sprite_position(-80px, -10px); }
.loader .f4 { @include loader_sprite_position(-115px, -10px); }
.loader .f5 { @include loader_sprite_position(-150px, -10px); }
.loader .f6 { @include loader_sprite_position(-185px, -10px); }
.loader .f7 { @include loader_sprite_position(-220px, -10px); }
.loader .f8 { @include loader_sprite_position(-255px, -10px); }
![Page 84: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/84.jpg)
![Page 85: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/85.jpg)
![Page 86: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/86.jpg)
css do módulo contextualizado
![Page 87: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/87.jpg)
// On ui/_buttons.scss
.bt-wrapper .loader { position: absolute; z-index: 4; right: 20px; top: 50%; margin-top: -9px;}
// On modules/_checkoutAddressForm.scss
.address-form .cep-input .loader { position: absolute; right: -33px; top: em(29px);}
![Page 88: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/88.jpg)
javascript enxuto, auto-contido.
![Page 89: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/89.jpg)
// Implements the animated loader for AJAX requests
// Loader constructor//// * `placement`: Function that determines the loader's placementns("EDEN.ui.Loader", function (placement) { if (!(this instanceof EDEN.ui.Loader)) { return new EDEN.ui.Loader(placement); }
this.frame = 1; this.framesQty = 8; this.stack = []; this.animating = false; this.$loader = $("<div class='loader'><b> </b></div>"); this.$renderer = this.$loader.find("b"); this.placement = placement;
this.init();});
EDEN.ui.Loader.prototype = {
// Properties // ----------
// Animation speed (in frames per second) fps : 20,
// Fading speed fadeSpeed : 150,
// Public methods // --------------
![Page 90: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/90.jpg)
testável!
![Page 91: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/91.jpg)
describe("EDEN.ui.Loader", function () { var Loader = EDEN.ui.Loader;
beforeEach(function () { loadFixtures("loader.html"); });
afterEach(function () { $("body").find(".loader").remove(); });
it("accepts instance creation without new operator", function () { var newLoader = Loader();
expect(newLoader).toBeInstanceOf(Loader); });
it("inits the loader on creation", function () { var loader , oldInit = EDEN.ui.Loader.prototype.init ;
EDEN.ui.Loader.prototype.init = jasmine.createSpy();
loader = new Loader();
expect(loader.init).toHaveBeenCalled();
EDEN.ui.Loader.prototype.init = oldInit; });
it("appends the loader to body as a default", function () { var loader = new Loader();
expect($("body").find(".loader").length).toEqual(1); });
it("appends the loader through an argument function", function () { var loader = new Loader(function ($loader) { $("#loader-placeholder").append($loader); });
expect($("#loader-placeholder").find(".loader").length).toEqual(1); });});
![Page 92: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/92.jpg)
"Mas tem muita coisa que não dá pra testar, né?"
![Page 93: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/93.jpg)
"Mas testes atrapalham a entrega do projeto, né?"
![Page 94: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/94.jpg)
a Baby possui 1144 specs de JavaScript até agora
![Page 95: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/95.jpg)
falhas no jshint ou nas specs de javascript quebram o build
![Page 96: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/96.jpg)
![Page 97: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/97.jpg)
dica 3javascript desacoplado e modularizado
![Page 98: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/98.jpg)
mediator: ponto central de comunicação via pub/sub
![Page 99: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/99.jpg)
![Page 100: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/100.jpg)
![Page 101: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/101.jpg)
MEDIATOR
![Page 102: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/102.jpg)
nenhum módulo tem conhecimento do outro
![Page 103: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/103.jpg)
MEDIATOR
Mediator, me avisa quando sair o novo do Game of
Thrones?
Blz
![Page 104: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/104.jpg)
MEDIATOR
Mediator, me avisa quando sair o novo do Mythbusters?
É nóish.
![Page 105: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/105.jpg)
MEDIATOR
Mediator, saiu um eppy novo de Game of Thrones.
Subscribers, saiu um eppy novo de Game of Thrones!
Ae, vou baixar, acho que vai ser feliz e tal
=D
![Page 106: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/106.jpg)
MEDIATOR
Mediator, saiu um eppy novo de Mythbusters.
Subscribers, saiu um eppy novo de Mythbusters!
Ae, vou baixar!
![Page 107: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/107.jpg)
os módulos só conhecem o mediator
![Page 108: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/108.jpg)
![Page 109: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/109.jpg)
![Page 110: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/110.jpg)
![Page 111: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/111.jpg)
![Page 112: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/112.jpg)
![Page 113: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/113.jpg)
![Page 114: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/114.jpg)
![Page 115: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/115.jpg)
![Page 116: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/116.jpg)
![Page 117: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/117.jpg)
![Page 118: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/118.jpg)
módulos desacoplados, com comportamentos específicos e isolados
![Page 119: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/119.jpg)
![Page 120: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/120.jpg)
// Code inside ShippingAddressForm
_registerInterests : function () { this.element.find(".cep-input") .on("keyup paste cut", this._onCepModification.bind(this)); },
_onCepModification : function (event) { if (this.isCepFilled()) { EDEN.mediator.trigger("shipping-cep-change", event.target.value); } else { EDEN.mediator.trigger("shipping-cep-incomplete", event.target.value); }}
![Page 121: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/121.jpg)
![Page 122: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/122.jpg)
// Code inside checkoutModule
_registerInterests : function () { EDEN.mediator.on("shipping-cep-change", this._onShippingCepChange, this); this.shippingService.on("get-success", this._onShippingGetSuccess, this);},
_onShippingCepChange : function (cep) { this.shippingService.get(cep);}
_onShippingGetSuccess : function (data) { EDEN.mediator.trigger("shipping-rate-change", data.rate); EDEN.mediator.trigger("delivery-estimate-change", data.estimate);}
![Page 123: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/123.jpg)
![Page 124: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/124.jpg)
// Code inside purchseInfo
_registerInterests : function () { EDEN.mediator.on("shipping-rate-change", this._onShippingRateChange, this); EDEN.mediator.on("delivery-estimate-change", this._onDeliveryEstimateChange, this);},
_onShippingRateChange : function (rate) { this.updateShippingRate(rate);},
_onDeliveryEstimateChange : function (days) { this.updateDeliveryEstimate(days);},
updateShippingRate : function (rate) { var formatter = EDEN.currency.formatter;
this.element.find(".shipping-rate").text(formatter(rate)); this.shippingRate = rate;
this.updateTotal();},
updateTotal : function () { var total = this.subtotal + this.shippingRate, formatter = EDEN.currency.formatter;
this.element.find(".total").text(formatter(total));
EDEN.mediator.trigger("cart-total-change", total);}
![Page 125: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/125.jpg)
![Page 126: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/126.jpg)
// Code inside installmentSelector
_registerInterests : function () { EDEN.mediator.on("cart-total-change", this._onCartTotalChange, this);},
_onCartTotalChange : function (total) { this.updateInstallments(total);},
updateInstallments : function (total) { // Updates the values}
![Page 127: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/127.jpg)
![Page 128: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/128.jpg)
![Page 129: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/129.jpg)
você não precisa saber tudo isso de primeira.
![Page 130: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/130.jpg)
addyosmani.com/largescalejavascript
![Page 131: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/131.jpg)
![Page 132: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/132.jpg)
aprenda javascript antes de se focar em um framework.
![Page 133: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/133.jpg)
![Page 134: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/134.jpg)
performanceclient-side
![Page 135: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/135.jpg)
css/javascriptminification/compression
![Page 136: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/136.jpg)
lazy-load everything! o/
![Page 137: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/137.jpg)
![Page 138: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/138.jpg)
sprites e imagens inlines
![Page 139: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/139.jpg)
sass+
![Page 140: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/140.jpg)
não abuse de font-faces
![Page 141: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/141.jpg)
![Page 142: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/142.jpg)
testes a/b
![Page 143: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/143.jpg)
![Page 144: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/144.jpg)
![Page 145: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/145.jpg)
isole os estilos e JS em classes, partials e módulos totalmente separados
![Page 146: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/146.jpg)
<nav id="site-menu" class="site-menu"> <div class="site-menu-container"> <% if new_header? %> <%= render "layouts/open_site_nav" %> <% else %> <%= render "layouts/site_nav" %> <% end %>
<% unless new_header? %> <%= render "layouts/search" %> <% end %> </div></nav>
![Page 147: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/147.jpg)
/******************************************************************************** =Menu A*******************************************************************************/
.site-header-old .user-menu { position: absolute; right: perc(261px, $SITE_WIDTH); cursor: pointer; width: 213px; height: 63px; overflow: hidden; z-index: 600;}
/******************************************************************************** =Menu B*******************************************************************************/
.site-header-new .user-menu { position: absolute; right: perc(261px, $SITE_WIDTH); width: perc(150px, $SITE_WIDTH); height: em(63px); overflow: hidden; z-index: 600;}
![Page 148: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/148.jpg)
AB-TESTING.md - como remover a versão perdedora
![Page 149: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/149.jpg)
# A/B Testing on Baby Site
This document lists all A/B tests currently being run on the project, andshortly introduces the method being used.
## Tests currently being run
### Site-wide
#### Header design version
* Test name: `header-version`* Starts at: `ApplicationController`, on `:before_filter`* Goal: When user goes to a success checkout page* Ends at: `orders#success` view* PR/Commits: [#664](https://github.com/Baby-com-br/troy/pull/664)
To remove this test:* Remove the `new_header?` method and its `:helper_method` on `application_controller.rb`* Remove the `header_version` method and its `:helper_method` on `application_controller.rb` and ALL its calls.* Consolidate the correct `render` calls on `layouts/_header.html.erb` and `layouts/_site_menu.html.erb`* Remove the `site-header-<%= header_version %>` class on `layouts/_header.html.erb`* Remove the `header-version-<%= header_version %>` class on `layouts/_head.html.erb`, on the `<body>` tag* Remove the `finished` call on `baby-site/app/views/orders/success.html.erb`* On `modules/_mainSearchForm.scss`, remove the entire block related to the loser version, and on the winner version: (1) remove the comment header about the A/B test, (2) unprefix all selectors by removing either `.site-menu` (if the old header won) or `.site-header` (if the new header won)* On `layout/_user_menu.scss`, remove the entire block related to the loser version, and on the winner version: (1) remove the comment header about the A/B test, (2) unprefix all selectors by removing either `.site-header-new` (if the old header won) or `.site-header-old` (if the new header won)* On `ui/_section_header.scss`, remove the `.header-version-old .section-titles` and `.header-version-new .section-titles` blocks, and use the winner padding on `.section-titles`.* On `sections/_profile.scss`, remove the `.header-version-old .profile-header .site-menu` and `.header-version-new .profile-header .site-menu` blocks, and use the winner padding on `.profile-header .site-menu`.* On `layout/_main.scss`, delete the `.header-version-old .site-menu-container` block. If the old version won add the `@include centered_block` on `.site-menu-container`. If the new version won, just delete the aforementioned block.* If the new header won, remove the `inline/bg_search.png` image from the project.* Remove either the `modules/_categoryMenuModule.scss` or `modules/_openSiteNav.scss`, and its call from `application.scss`* Remove either the `modules/categoryMenuModule.js` or `modules/siteNavModule.js`, and its call on `commands/beforeCommand.js`.* Remove the CE_SNAPSHOT_NAME from `home/index.html.erb`, `products/show.html.erb` and `products/search.html.erb`
### Checkout page
#### Cart update
* Test name: `cart-update`* Starts at: `orders#new` view* Goal: When user goes to a success checkout page.* Ends at: `orders#success` view* PR/Commits: [#616](https://github.com/Baby-com-br/troy/pull/616)
To remove this test:* Remove the `<%= cart_update_enabled = ab_test('cart-update', 'no', 'yes') %>` line on `baby-site/app/views/orders/_cart_products_list.html.erb`* Remove all related code on `_cart_products_list.html.erb` related to the option that lost* Remove CE_SNAPSHOT_NAME script* Remove the `finished` call on `baby-site/app/views/orders/success.html.erb`
## Running an A/B test
Troy uses the [Split gem](https://github.com/andrew/split). Quick instructions:
* Use the `ab_test("my_test", "control_variable", "hyphothesis_variable")` helper* Use the `finished("my_test")` helper to track goals.* If the test is inside a fragment cached block, you'll have to create a new key. Check [this page](https://github.com/andrew/split/wiki/Caching) for further info.* Write an acceptance test to ensure all variants work* Update this file, listing the test location, name, purpose, commits or PR related to it, and any specific instructions on removing it after it's complete.
![Page 150: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/150.jpg)
shiota, um dev front-end precisa saber back-end?
![Page 151: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/151.jpg)
fulano(a), eu preciso saber cozinhar ou lavar roupa?
![Page 152: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/152.jpg)
não, mas ajuda, né? ;D
![Page 153: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/153.jpg)
você não precisa ser um nando vieira*.
* @fnando - faz design, front-end, manja JS pacas, é um dev Ruby f*odido, e manja de SysOps
![Page 154: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/154.jpg)
saber back-end melhora seu código.
![Page 155: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/155.jpg)
saber back-endlhe dá mais controle.
![Page 156: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/156.jpg)
saber back-endmelhora a comunicação.
![Page 157: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/157.jpg)
quando você deixa de perguntar apenas "como vou fazer isso" e passa a perguntar "como vou fazer isso da melhor maneira"...
![Page 158: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/158.jpg)
... você está no caminho certo.
![Page 159: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/159.jpg)
divirta-se. sempre. =)
![Page 160: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/160.jpg)
![Page 161: Desafios do Desenvolvimento de Front-end em um e-commerce](https://reader034.vdocuments.com.br/reader034/viewer/2022042510/547b077fb37959532b8b4ca3/html5/thumbnails/161.jpg)
obrigado!slideshare.net/eshiotagithub.com/eshiota
@shiota