1.
#MKTMEETUP
AUTOMAÇÃO DE
TA R E F A S C O M O
GRUNT

2.
HUGO BESSA

3.
HUGO BESSA
D E S E N V O LV E D O R F R O N T- E N D
E N T U S I A S TA D E O T I M I Z A Ç Ã O
MUNDO OPEN SOURCE

4.
O CONTEÚDO

5.
O CONTEÚDO
O D E S E N V O LV E D O R F R O N T- E N D
A OTIMIZAÇÃO
O GRUNT
A MUDANÇA NA MKT
A MUDANÇA NO MUNDO
A PA R T E P R ÁT I C A
A SUA VEZ

6.
O D E S E N V O LV E D O R
F R O N T- E N D

7.
O D E S E N V O LV E D O R F R O N T- E N D
O CARA QUE DEIXA O SITE BONITINHO
O C A R A Q U E FA Z A Q U E L E S S C R I P T Z I N H O S L Á
O “ M O N TA D O R ”

8.
O D E S E N V O LV E D O R F R O N T- E N D
NÃO

9.
O D E S E N V O LV E D O R F R O N T- E N D
O CARA QUE CRIA EXPERIÊNCIAS
O CARA DA SEMÂNTICA
O CARA DA PERFORMANCE
O CARA SEMPRE PRECISA APRENDER ALGO NOVO

10.
O D E S E N V O LV E D O R F R O N T- E N D
N Ã O É O C A R A Q U E C O R TA P S D

11.
O D E S E N V O LV E D O R F R O N T- E N D
É O CARA QUE CRIA EXPERIÊNCIAS

12.
O GRUNT

13.
O GRUNT
U M B U I L D S C R I P T E M J AVA S C R I P T

14.
O GRUNT
<target name="js.minify" depends="js.preprocess">
<apply executable="java" parallel="false">
<fileset dir="." includes="foo.js, bar.js"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.js" to="*-min.js"/>
<targetfile/>
</apply>
</target>
ANT

15.
O GRUNT
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
minify: {
files: {
'./foo-min.js': ['./foo.js']
'./bar-min.js': ['./bar.js']
}
}
}
});
}

16.
O GRUNT
N O S A J U D A A A U T O M AT I Z A R TA R E F A S C H ATA S

17.
O GRUNT
N O S D Á M A I S T E M P O PA R A E S T U D A R A S N O V I D A D E S

18.
O GRUNT
N O S D Á M A I S T E M P O PA R A C R I A R C O I S A S I N C R Í V E I S

19.
O GRUNT
N O S A J U D A A T E S TA R S I T E S E M D I V E R S O S
DISPOSITIVOS

20.
O GRUNT
NOS AJUDA A OTIMIZARMOS

21.
A OTIMIZAÇÃO

22.
A OTIMIZAÇÃO
C O M O O C L I E N T E VA I C O M P R A R S E U P R O D U T O S E O
SITE NEM CARREGA?

23.
A OTIMIZAÇÃO
S E U C L I E N T E N E M S E M P R E E S TÁ N O W I - F I
ELE PODE ACESSAR PELO 3G

24.
A OTIMIZAÇÃO
AMAZON
1% A MAIS DE VENDAS PRA CADA 100MS A MENOS DE
CARREGAMENTO
EM 2006

25.
A OTIMIZAÇÃO
// um simples script para mostrar a data
function displayDate() {
var elem = document.getElementById('js-date');
elem.innerHTML = Date();
!
// muda o background para 'grey'
elem.style.background = 'grey';
}
!
displayDate();

26.
A OTIMIZAÇÃO
function displayDate(){var a=document.getElementById("jsdate");a.innerHTML=Date();a.style.background="grey";}displayDate();
247B >> 124B
~50%

27.
A OTIMIZAÇÃO
EM PRODUÇÃO, O CÓDIGO NÃO PRECISA SER LEGÍVEL

28.
A OTIMIZAÇÃO
I M A G E N S TA M B É M P O D E M S E R O T I M I Z A D A S

29.
734KB 259KB
~65%

30.
A OTIMIZAÇÃO
475KB
~1,6 SEGUNDOS NO 3G (300kbps)
1 6 % A M A I S D E V E N D A S PA R A A A M A Z O N

31.
A OTIMIZAÇÃO
TESTE A OTIMIZAÇÃO DO SEU SITE
Pagespeed
WebpageTest

32.
A OTIMIZAÇÃO

33.
A OTIMIZAÇÃO

34.
A OTIMIZAÇÃO

35.
A MUDANÇA NA MKT

36.
A MUDANÇA NA MKT
NÃO EXISTIAM PROCESSOS DE AUTOMAÇÃO
TUDO ERA NA MÃO
(QUANDO ERA)
SHELL SCRIPT
TERMINAL
SITES
A P L I C AT I V O

37.
A MUDANÇA NA MKT
PROCESSO INICIAL AGILIZADO
GARANTIA DE UM PRODUTO FINAL DE QUALIDADE
S A S S E C O M PA S S
COFFEESCRIPT
OTIMIZAÇÃO

38.
A MUDANÇA NA MKT
A I N D A VA M O S A D I C I O N A R
INTEGRAÇÃO CONTÍNUA
E N V I O D E A R Q U I V O S PA R A O S E R V I D O R ( D E P L O Y )

39.
O QUE VIMOS

40.
O QUE VIMOS
O G R U N T VA I E C O N O M I Z A R N O S S O T E M P O
O T I M I Z A R S I T E S É M U I T O I M P O R TA N T E
ISTO INFLUENCIA AS VENDAS E O POSICIONAMENTO
N Ã O H Á D E S C U L PA S PA R A O F E R E C E R P R O D U T O S
INFERIORES

41.
A PA R T E P R ÁT I C A

42.
A PA R T E P R ÁT I C A
APENAS UM ARQUIVO JS (OU COFFEE)
CONFIGURAÇÃO ACIMA DE CODIFICAÇÃO

43.
A PA R T E P R ÁT I C A
npm install -g grunt-cli

44.
A PA R T E P R ÁT I C A
PA C K A G E . J S O N
{
}
"name": "gruntfile",
"version": "0.1.0",
"repository": {
"type": "git",
"url": "https://github.com/mktvirtual/gruntfile"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.4"
}

45.
A PA R T E P R ÁT I C A
npm install

46.
A PA R T E P R ÁT I C A
GRUNTFILE.JS
'use-strict';
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'app.js': ['**/*.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
};

47.
A PA R T E P R ÁT I C A
DEMONSTRAÇÃO COM O MOON

48.
A PA R T E P R ÁT I C A

49.
A PA R T E P R ÁT I C A

50.
A PA R T E P R ÁT I C A

51.
A PA R T E P R ÁT I C A

52.
A PA R T E P R ÁT I C A
T E S TA R E M D I V E R S O S D I S P O S I T I V O S

53.
A PA R T E P R ÁT I C A
grunt imagemin

54.
A PA R T E P R ÁT I C A

55.
A PA R T E P R ÁT I C A
grunt pagespeed

56.
A PA R T E P R ÁT I C A

57.
A PA R T E P R ÁT I C A
grunt rsync

58.
A PA R T E P R ÁT I C A

59.
A PA R T E P R ÁT I C A
grunt deploy

60.
A PA R T E P R ÁT I C A

61.
A PA R T E P R ÁT I C A

62.
A PA R T E P R ÁT I C A
I M A G E N S E M V Á R I O S TA M A N H O S
SCREENSHOTS

63.
O QUE APRENDEMOS

64.
O QUE APRENDEMOS
D E S E N V O LV E D O R F R O N T- E N D C R I A E X P E R I Ê N C I A S
O GRUNT NOS ECONOMIZA TEMPO
OTIMIZAR É IMPRESCINDÍVEL
O G R U N T É FÁ C I L D E U S A R

65.
A SUA VEZ

66.
A SUA VEZ
L E V E O F R O N T- E N D A S É R I O
CRIE SEU DIFERENCIAL E PRODUTOS MELHORES
O T I M I Z E PA R A C O N Q U I S TA R
C O M PA R T I L H E
Creative Commons Attribution 3.0 Unported License

67.
A SUA VEZ
GRUNTFILE DA MKT VIRTUAL
T E M P L AT E D E . H TA C C E S S

68.
HUGO BESSA
@HUGOBESSAA
github
twitter
HUGOBESSA.COM.BR
EU@HUGOBESSA.COM.BR