1.
A(R)EVOLUÇÃODOFRONT-END

2.
MARLOSCARMOGERENTEDEOPERAÇÕESDIGITAISNARCCOMUNICAÇÃO#SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS

3.
marlos@gmail.comtwitter.com/marloscarmofacebook.com/marloscarmogithub.com/marloscarmo

4.
Há15anosatrásnão“existia”adisciplinadefront-end...

5.
Ouvocêera:

6.
Ouvocêera:webmaster

7.
Ouvocêera:webmaster ou

8.
Ouvocêera:webmaster webdesignerou

9.
Nofinaldascontaseraquaseamesmacoisaeoqueosdiferenciavaera...

10.
webmasterfaziasitescomfundopreto

11.
webdesignerfaziasitescomfundobranco

12.
Em1998ossiteserampraticamentetodosestáticoseoseditoresWYSIWYGreinavam.

13.
FrontPage

14.
Dreamweaver

15.
Nãoexistianenhumapreocupaçãocomocódigoesuamanutenção.“Desenhou”ositenoFrontPageerodounoIE.#pronto

16.
Oscódigosficavam“umabeleza”.ImaginemtodooHTML,oCSSeoJavaScriptnomesmoarquivo.

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

18.
Comopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHP

19.
webdesignerwebdeveloperwebwriterprogramadorASPprogramadorPHPmeninodoHTMLComopassardotempoadivisãodoscargosfoiaumentandojuntocomapopularizaçãodastecnologias.

20.
Osprogramadoresqueseespecializavamseguiamocaminhodoback-end,poisláestavatodaamagia.“Você,meninodoHTML,umdiaseráumprogramadorback-end”(masenquantoissorecorteestas42telasaquiparahoje)

21.
IssosetornoumaisforteaindacomapopularizaçãodoFlash.Ossitesnãoprecisavamtermuitoconteúdo,desdequetivessemumaanimaçãodeabertura.

22.
Enosdiasdehojeacoisamudoumuito.OmeninodoHTMLagoratematénome:FRONT-ENDENGINEER

23.
EotrabalhoficacadavezmaisCOMPLEXO

24.
Antes,oJavaScriptquenãoeralevadoasérioeeraconsideradoumaTOYLANGUAGE

25.
Atualmenteestásetornandoumalinguagemcadavezmaisuniversal.

26.
ETCBROWSER WEB APPSMOBILE APPS DESKTOP APPSSERVIDOR

27.
Eumbomprofissionaldefront-endtemqueentenderbemdasseguintesdisciplinas...

28.
SEGURANÇATESTESACESSIBILIDADESUPORTE MULTI-BROWSERSSUPORTE MULTI-DEVICESSUPORTE MULTI-TELASPERFORMANCECONHECIMENTOS DE SERVERSEO

29.
ALGUNSPASSOSPARAUMBOMFRONT-END

30.
NãouseIE

31.
#prontoAjudaracomunidadetambémésuperimportante.

32.
EscolhaumbomEDITOR

33.
SublimeTexthttp://www.sublimetext.com/

34.
VIMhttp://www.vim.org/

35.
NÃOREIVENTEARODAUseasmelhorespráticas

36.
HTML5Boilerplatehttp://html5boilerplate.com/

37.
HTML5Boilerplate

38.
HTMLEmailBoilerplatehttp://htmlemailboilerplate.com/

39.
HTMLEmailBoilerplate

40.
TwitterBootstraphttp://twitter.github.io/bootstrap/

41.
TwitterBootstrap

42.
USEFRAMEWORKS(commoderação)

43.
AngularJShttp://angularjs.org

44.
Backbone.JShttp://backbonejs.org/

45.
Emberhttp://emberjs.com/

46.
Meteorhttp://meteor.com/

47.
7PRINCÍPIOSdoMeteor

48.
DataonthewireNuncatrafegueHTML.Envieainformaçãoedeixeoclientedecidircomoapresentá-la.1

49.
OneLanguageEscrevaJavaScriptnofrontenoback-end.Reutilizeseuscódigos.2

50.
DatabaseEverywhereUseamesmaAPIparaacessarseubancodedadosnoclientenoserver.3

51.
LatencyCompensationSimulalatênciazerocomobancodedadosnoservidor.4

52.
FullStackReactivityFaçarealtimeporpadrão.Todasascamadas,dobancoaotemplate,devemserorientadasaoseventosdeinterface.5

53.
EmbracetheEcosystemMeteoréopensourceeintegra,aoinvésdesubstituir,ferramentaseframeworksexistentes.6

54.
SimplicityEqualsProductivityAmelhormaneiradefazeralgoparecersimplesétorná-lorealmentesimples.BuscamosissoatravésdeumaAPIcleaneextremamentesfácil.7

55.
AUTOMATIZEseusscripts

56.
http://coffeescript.org/

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

58.
variáveishttp://sass-lang.com/

59.
variáveisexpressõeshttp://sass-lang.com/

60.
variáveisexpressõesherançahttp://sass-lang.com/

61.
códigodinâmicohttp://lesscss.org/

62.
EMMET.IOhttp://www.emmet.io/

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

64.
http://www.jshint.com/

65.
ENXUGUEaomáximoseusite

66.
http://yslow.org/

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

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

69.
PreparebemseuAMBIENTE

70.
Yeomanconsisteemumconjuntodeferramentasvoltadasparacriarrapidamenteumnovoprojetowebegerenciá-loduranteoprocesso.http://yeoman.io/

71.
Fazumscaffolddaestruturadoseuprojeto.$yo webapp

72.
Fazumscaffolddaestruturadoseuprojeto.$yo webapp

73.
ElevaipassarumJSHintnocódigo,compilararquivosCoffeeScripteSASS,utilizaror.jsparacompilareotimizarmódulosAMD,juntareminificararquivos.csse.js,comprimirasimagensutilizandooOptiPNGpara.pngeJPEGtran-turbopara.jpeg,vairodarostestesutilizandoPhantomJSeutilizaroConfess.jsparacriaroarquivodecachedaaplicação.

74.
$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

75.
$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

76.
Gerenciadependênciasdoseuprojeto.Baixa,adicionaeatualizaocomponentedeformaautomatizada.$bower install jquery$bower update jquery

77.
ExistealgumasoutrasopçõesaoYEOMANBrunch CodeKitLiveReload

78.
OGOOGLEquerlereentenderseusite

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

80.
http://www.seomoz.org/toolsSEOMOZTools

81.
www.slideshare.net/fabioricotta/seo-para-frontend-beagajsDicas-MestreSEO

82.
TESTEsuaaplicação

83.
http://www.youtube.com/watch?v=5z6eFve4TxIQUnit

84.
DEPLOY!esqueçaoftp

85.
CAPISTRANOhttp://capify.orgRSYNChttp://rsync.samba.org/FABRIChttp://docs.fabfile.org/en/1.6/

86.
defineoambientededesenvolvimentocodeby@ruyadorno

87.
defineoambientedeproduçãocodeby@ruyadorno

88.
configuraoprojetonoambienteescolhidocodeby@ruyadorno

89.
atualizaoprojetonoambienteescolhidocodeby@ruyadorno

90.
$fab dev updateatualizaroprojetonoambientededesenvolvimento

91.
$fab dev updateatualizaroprojetonoambientededesenvolvimento$fab prod updateatualizaroprojetonoambientedeprodução

92.
ParticipeativamentedaCOMUNIDADE

93.
http://braziljs.org/BrazilJS

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

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

96.
OBRIGADO@marloscarmo