1. A(R)EVOLUÇÃODO
FRONT-END

3. MARLOSCARMO
GERENTEDEOPERAÇÕESDIGITAIS
NARCCOMUNICAÇÃO
#SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS

4. marlos@gmail.com
twitter.com/marloscarmo
facebook.com/marloscarmo
github.com/marloscarmo

5. Há15anosatrásnão“existia”a
disciplinadefront-end...

6. Ouvocêera:

7. Ouvocêera:
webmaster

8. Ouvocêera:
webmaster ou

9. Ouvocêera:
webmaster webdesignerou

10. Nofinaldascontaseraquaseamesma
coisaeoqueosdiferenciavaera...

11. webmaster
faziasitescomfundo
preto

12. webdesigner
faziasitescomfundo
branco

13. Em1998ossiteserampraticamente
todosestáticoseoseditores
WYSIWYGreinavam.

14. FrontPage

15. Dreamweaver

16. Nãoexistianenhumapreocupação
comocódigoesuamanutenção.
“Desenhou”ositenoFrontPagee
rodounoIE.#pronto

17. Oscódigosficavam“umabeleza”.
ImaginemtodooHTML,oCSSeo
JavaScriptnomesmoarquivo.

18. AartedoCTRL+C/Ctrl+Vprevalecia.
Existiamdiretórioscomváriostiposdemenus,
gifsanimados,DHTMLs,Appletsetudomais.
Erasócopiarecolarnoseucódigo.

19. Comopassardotempoadivisãodos
cargosfoiaumentandojuntocoma
popularizaçãodastecnologias.
webdesigner
webdeveloper
webwriter
programadorASP
programadorPHP

20. webdesigner
webdeveloper
webwriter
programadorASP
programadorPHP
meninodoHTML
Comopassardotempoadivisãodos
cargosfoiaumentandojuntocoma
popularizaçãodastecnologias.

21. Osprogramadoresquese
especializavamseguiamocaminhodo
back-end,poisláestavatodaamagia.
“Você,meninodoHTML,umdiaserá
umprogramadorback-end”
(masenquantoissorecorteestas42telasaquiparahoje)

22. Issosetornoumaisforteaindacoma
popularizaçãodoFlash.
Ossitesnãoprecisavamtermuito
conteúdo,desdequetivessemuma
animaçãodeabertura.

24. Enosdiasdehojeacoisamudoumuito.
OmeninodoHTMLagoratematénome:
FRONT-ENDENGINEER

25. Eotrabalhoficacadavezmais
COMPLEXO

26. Antes,oJavaScriptquenãoera
levadoasérioeeraconsideradouma
TOYLANGUAGE

27. Atualmenteestásetornandouma
linguagemcadavezmaisuniversal.

29. ETC
BROWSER WEB APPS
MOBILE APPS DESKTOP APPS
SERVIDOR

30. Eumbomprofissionaldefront-
endtemqueentenderbemdas
seguintesdisciplinas...

32. SEGURANÇA
TESTES
ACESSIBILIDADE
SUPORTE MULTI-BROWSERS
SUPORTE MULTI-DEVICES
SUPORTE MULTI-TELAS
PERFORMANCE
CONHECIMENTOS DE SERVER
SEO

33. ALGUNSPASSOSPARAUMBOM
FRONT-END

34. NãouseIE

35. #pronto
Ajudaracomunidadetambémé
superimportante.

37. Escolhaumbom
EDITOR

38. SublimeText
http://www.sublimetext.com/

39. VIM
http://www.vim.org/

40. NÃOREIVENTEARODA
Useasmelhorespráticas

41. HTML5Boilerplate
http://html5boilerplate.com/

42. HTML5Boilerplate

43. HTMLEmailBoilerplate
http://htmlemailboilerplate.com/

44. HTMLEmailBoilerplate

45. TwitterBootstrap
http://twitter.github.io/bootstrap/

46. TwitterBootstrap

47. USEFRAMEWORKS
(commoderação)

48. AngularJS
http://angularjs.org

49. Backbone.JS
http://backbonejs.org/

50. Ember
http://emberjs.com/

51. Meteor
http://meteor.com/

52. 7PRINCÍPIOS
doMeteor

53. Dataonthewire
NuncatrafegueHTML.
Envieainformaçãoedeixeo
clientedecidircomoapresentá-la.
1

54. OneLanguage
EscrevaJavaScriptnofronteno
back-end.
Reutilizeseuscódigos.
2

55. DatabaseEverywhere
UseamesmaAPIparaacessar
seubancodedadosnocliente
noserver.
3

56. LatencyCompensation
Simulalatênciazerocomo
bancodedadosnoservidor.4

57. FullStackReactivity
Façarealtimeporpadrão.
Todasascamadas,dobancoao
template,devemserorientadasaos
eventosdeinterface.
5

58. EmbracetheEcosystem
Meteoréopensourceeintegra,ao
invésdesubstituir,ferramentase
frameworksexistentes.
6

59. SimplicityEqualsProductivity
Amelhormaneiradefazeralgo
parecersimplesétorná-lorealmente
simples.Buscamosissoatravésde
umaAPIcleaneextremamentesfácil.
7

60. AUTOMATIZE
seusscripts

61. http://coffeescript.org/

62. http://sass-lang.com/

63. variáveis
http://sass-lang.com/

64. variáveis
expressões
http://sass-lang.com/

65. variáveis
expressões
herança
http://sass-lang.com/

66. códigodinâmico
http://lesscss.org/

67. EMMET.IO
http://www.emmet.io/

68. http://jade-lang.com/

69. http://www.jshint.com/

70. ENXUGUE
aomáximoseusite

71. http://yslow.org/

72. https://developers.google.com/speed/pagespeed/?hl=pt-BR

73. http://browserdiet.com/pt/
Comoperderpesonobrowser?

74. Preparebemseu
AMBIENTE

76. Yeomanconsisteemumconjuntodeferramentas
voltadasparacriarrapidamenteumnovoprojeto
webegerenciá-loduranteoprocesso.
http://yeoman.io/

82. Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp

83. Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp

85. ElevaipassarumJSHintnocódigo,compilararquivos
CoffeeScripteSASS,utilizaror.jsparacompilareotimizar
módulosAMD,juntareminificararquivos.csse.js,comprimiras
imagensutilizandooOptiPNGpara.pngeJPEGtran-turbo
para.jpeg,vairodarostestesutilizandoPhantomJSeutilizaro
Confess.jsparacriaroarquivodecachedaaplicação.

86. $grunt server // cria um servidor e altera em tempo real
$grunt test // roda os testes da sua aplicação
$grunt build // monta sua aplicação para produção

87. $grunt server // cria um servidor e altera em tempo real
$grunt test // roda os testes da sua aplicação
$grunt build // monta sua aplicação para produção

89. Gerenciadependênciasdoseuprojeto.Baixa,adiciona
eatualizaocomponentedeformaautomatizada.
$bower install jquery
$bower update jquery

90. ExistealgumasoutrasopçõesaoYEOMAN
Brunch CodeKit
LiveReload

91. OGOOGLEquerlereentenderseusite

92. http://www.woorank.com/
Woorank

93. http://www.seomoz.org/tools
SEOMOZTools

94. www.slideshare.net/fabioricotta/seo-para-frontend-beagajs
Dicas-MestreSEO

95. TESTEsuaaplicação

96. http://www.youtube.com/watch?v=5z6eFve4TxI
QUnit

97. DEPLOY!esqueçaoftp

99. CAPISTRANO
http://capify.org
RSYNC
http://rsync.samba.org/
FABRIC
http://docs.fabfile.org/en/1.6/

100. defineoambientede
desenvolvimento
codeby@ruyadorno

101. defineoambientede
produção
codeby@ruyadorno

102. configuraoprojetono
ambienteescolhido
codeby@ruyadorno

103. atualizaoprojetono
ambienteescolhido
codeby@ruyadorno

104. $fab dev update
atualizaroprojetonoambientededesenvolvimento

105. $fab dev update
atualizaroprojetonoambientededesenvolvimento
$fab prod update
atualizaroprojetonoambientedeprodução

106. Participeativamenteda
COMUNIDADE

107. http://braziljs.org/
BrazilJS

108. http://www.facebook.com/groups/beagajs/
BeagaJS

109. http://zofe.com.br/
ZOFE

110. OBRIGADO
@marloscarmo