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

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

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

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

5.
Ouvocêera:

6.
Ouvocêera:
webmaster

7.
Ouvocêera:
webmaster ou

8.
Ouvocêera:
webmaster webdesignerou

9.
Nofinaldascontaseraquaseamesma
coisaeoqueosdiferenciavaera...

10.
webmaster
faziasitescomfundo
preto

11.
webdesigner
faziasitescomfundo
branco

12.
Em1998ossiteserampraticamente
todosestáticoseoseditores
WYSIWYGreinavam.

13.
FrontPage

14.
Dreamweaver

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

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

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

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

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

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

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

22.
Enosdiasdehojeacoisamudoumuito.
OmeninodoHTMLagoratematénome:
FRONT-ENDENGINEER

23.
Eotrabalhoficacadavezmais
COMPLEXO

24.
Antes,oJavaScriptquenãoera
levadoasérioeeraconsideradouma
TOYLANGUAGE

25.
Atualmenteestásetornandouma
linguagemcadavezmaisuniversal.

26.
ETC
BROWSER WEB APPS
MOBILE APPS DESKTOP APPS
SERVIDOR

27.
Eumbomprofissionaldefront-
endtemqueentenderbemdas
seguintesdisciplinas...

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

29.
ALGUNSPASSOSPARAUMBOM
FRONT-END

30.
NãouseIE

31.
#pronto
Ajudaracomunidadetambémé
superimportante.

32.
Escolhaumbom
EDITOR

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

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

35.
NÃOREIVENTEARODA
Useasmelhorespráticas

36.
HTML5Boilerplate
http://html5boilerplate.com/

37.
HTML5Boilerplate

38.
HTMLEmailBoilerplate
http://htmlemailboilerplate.com/

39.
HTMLEmailBoilerplate

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

41.
TwitterBootstrap

42.
USEFRAMEWORKS
(commoderação)

43.
AngularJS
http://angularjs.org

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

45.
Ember
http://emberjs.com/

46.
Meteor
http://meteor.com/

47.
7PRINCÍPIOS
doMeteor

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

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

50.
DatabaseEverywhere
UseamesmaAPIparaacessar
seubancodedadosnocliente
noserver.
3

51.
LatencyCompensation
Simulalatênciazerocomo
bancodedadosnoservidor.4

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

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

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

55.
AUTOMATIZE
seusscripts

56.
http://coffeescript.org/

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

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

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

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

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

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

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

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

65.
ENXUGUE
aomáximoseusite

66.
http://yslow.org/

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

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

69.
Preparebemseu
AMBIENTE

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

71.
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp

72.
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp

73.
ElevaipassarumJSHintnocódigo,compilararquivos
CoffeeScripteSASS,utilizaror.jsparacompilareotimizar
módulosAMD,juntareminificararquivos.csse.js,comprimiras
imagensutilizandooOptiPNGpara.pngeJPEGtran-turbo
para.jpeg,vairodarostestesutilizandoPhantomJSeutilizaro
Confess.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,adiciona
eatualizaocomponentedeformaautomatizada.
$bower install jquery
$bower update jquery

77.
ExistealgumasoutrasopçõesaoYEOMAN
Brunch CodeKit
LiveReload

78.
OGOOGLEquerlereentenderseusite

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

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

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

82.
TESTEsuaaplicação

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

84.
DEPLOY!esqueçaoftp

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

86.
defineoambientede
desenvolvimento
codeby@ruyadorno

87.
defineoambientede
produção
codeby@ruyadorno

88.
configuraoprojetono
ambienteescolhido
codeby@ruyadorno

89.
atualizaoprojetono
ambienteescolhido
codeby@ruyadorno

90.
$fab dev update
atualizaroprojetonoambientededesenvolvimento

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

92.
Participeativamenteda
COMUNIDADE

93.
http://braziljs.org/
BrazilJS

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

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

96.
OBRIGADO
@marloscarmo