A(R)EVOLUÇÃODO
FRONT-END
MARLOSCARMO
GERENTEDEOPERAÇÕESDIGITAIS
NARCCOMUNICAÇÃO
#SOUDEVHÁ15ANOS/#SOUCHEFEHÁ8ANOS
marlos@gmail.com
twitter.com/marloscarmo
facebook.com/marloscarmo
github.com/marloscarmo
Há15anosatrásnão“existia”a
disciplinadefront-end...
Ouvocêera:
Ouvocêera:
webmaster
Ouvocêera:
webmaster ou
Ouvocêera:
webmaster webdesignerou
Nofinaldascontaseraquaseamesma
coisaeoqueosdiferenciavaera...
webmaster
faziasitescomfundo
preto
webdesigner
faziasitescomfundo
branco
Em1998ossiteserampraticamente
todosestáticoseoseditores
WYSIWYGreinavam.
FrontPage
Dreamweaver
Nãoexistianenhumapreocupação
comocódigoesuamanutenção.
“Desenhou”ositenoFrontPagee
rodounoIE.#pronto
Oscódigosficavam“umabeleza”.
ImaginemtodooHTML,oCSSeo
JavaScriptnomesmoarquivo.
AartedoCTRL+C/Ctrl+Vprevalecia.
Existiamdiretórioscomváriostiposdemenus,
gifsanimados,DHTMLs,Appletsetudomais.
Erasócopiarecolarnoseucódigo.
Comopassardotempoadivisãodos
cargosfoiaumentandojuntocoma
popularizaçãodastecnologias.
webdesigner
webdeveloper
webwriter
programadorASP
programadorPHP
webdesigner
webdeveloper
webwriter
programadorASP
programadorPHP
meninodoHTML
Comopassardotempoadivisãodos
cargosfoiaumentandojuntocoma
popularizaçãodastecnologias.
Osprogramadoresquese
especializavamseguiamocaminhodo
back-end,poisláestavatodaamagia.
“Você,meninodoHTML,umdiaserá
umprogramadorback-end”
(masenquantoissorecorteestas42telasaquiparahoje)
Issosetornoumaisforteaindacoma
popularizaçãodoFlash.
Ossitesnãoprecisavamtermuito
conteúdo,desdequetivessemuma
animaçãodeabertura.
Enosdiasdehojeacoisamudoumuito.
OmeninodoHTMLagoratematénome:
FRONT-ENDENGINEER
Eotrabalhoficacadavezmais
COMPLEXO
Antes,oJavaScriptquenãoera
levadoasérioeeraconsideradouma
TOYLANGUAGE
Atualmenteestásetornandouma
linguagemcadavezmaisuniversal.
ETC
BROWSER WEB APPS
MOBILE APPS DESKTOP APPS
SERVIDOR
Eumbomprofissionaldefront-
endtemqueentenderbemdas
seguintesdisciplinas...
SEGURANÇA
TESTES
ACESSIBILIDADE
SUPORTE MULTI-BROWSERS
SUPORTE MULTI-DEVICES
SUPORTE MULTI-TELAS
PERFORMANCE
CONHECIMENTOS DE SERVER
SEO
ALGUNSPASSOSPARAUMBOM
FRONT-END
NãouseIE
#pronto
Ajudaracomunidadetambémé
superimportante.
Escolhaumbom
EDITOR
SublimeText
http://www.sublimetext.com/
VIM
http://www.vim.org/
NÃOREIVENTEARODA
Useasmelhorespráticas
HTML5Boilerplate
http://html5boilerplate.com/
HTML5Boilerplate
HTMLEmailBoilerplate
http://htmlemailboilerplate.com/
HTMLEmailBoilerplate
TwitterBootstrap
http://twitter.github.io/bootstrap/
TwitterBootstrap
USEFRAMEWORKS
(commoderação)
AngularJS
http://angularjs.org
Backbone.JS
http://backbonejs.org/
Ember
http://emberjs.com/
Meteor
http://meteor.com/
7PRINCÍPIOS
doMeteor
Dataonthewire
NuncatrafegueHTML.
Envieainformaçãoedeixeo
clientedecidircomoapresentá-la.
1
OneLanguage
EscrevaJavaScriptnofronteno
back-end.
Reutilizeseuscódigos.
2
DatabaseEverywhere
UseamesmaAPIparaacessar
seubancodedadosnocliente
noserver.
3
LatencyCompensation
Simulalatênciazerocomo
bancodedadosnoservidor.4
FullStackReactivity
Façarealtimeporpadrão.
Todasascamadas,dobancoao
template,devemserorientadasaos
eventosdeinterface.
5
EmbracetheEcosystem
Meteoréopensourceeintegra,ao
invésdesubstituir,ferramentase
frameworksexistentes.
6
SimplicityEqualsProductivity
Amelhormaneiradefazeralgo
parecersimplesétorná-lorealmente
simples.Buscamosissoatravésde
umaAPIcleaneextremamentesfácil.
7
AUTOMATIZE
seusscripts
http://coffeescript.org/
http://sass-lang.com/
variáveis
http://sass-lang.com/
variáveis
expressões
http://sass-lang.com/
variáveis
expressões
herança
http://sass-lang.com/
códigodinâmico
http://lesscss.org/
EMMET.IO
http://www.emmet.io/
http://jade-lang.com/
http://www.jshint.com/
ENXUGUE
aomáximoseusite
http://yslow.org/
https://developers.google.com/speed/pagespeed/?hl=pt-BR
http://browserdiet.com/pt/
Comoperderpesonobrowser?
Preparebemseu
AMBIENTE
Yeomanconsisteemumconjuntodeferramentas
voltadasparacriarrapidamenteumnovoprojeto
webegerenciá-loduranteoprocesso.
http://yeoman.io/
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp
ElevaipassarumJSHintnocódigo,compilararquivos
CoffeeScripteSASS,utilizaror.jsparacompilareotimizar
módulosAMD,juntareminificararquivos.csse.js,comprimiras
imagensutilizandooOptiPNGpara.pngeJPEGtran-turbo
para.jpeg,vairodarostestesutilizandoPhantomJSeutilizaro
Confess.jsparacriaroarquivodecachedaaplicação.
$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
$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
Gerenciadependênciasdoseuprojeto.Baixa,adiciona
eatualizaocomponentedeformaautomatizada.
$bower install jquery
$bower update jquery
ExistealgumasoutrasopçõesaoYEOMAN
Brunch CodeKit
LiveReload
OGOOGLEquerlereentenderseusite
http://www.woorank.com/
Woorank
http://www.seomoz.org/tools
SEOMOZTools
www.slideshare.net/fabioricotta/seo-para-frontend-beagajs
Dicas-MestreSEO
TESTEsuaaplicação
http://www.youtube.com/watch?v=5z6eFve4TxI
QUnit
DEPLOY!esqueçaoftp
CAPISTRANO
http://capify.org
RSYNC
http://rsync.samba.org/
FABRIC
http://docs.fabfile.org/en/1.6/
defineoambientede
desenvolvimento
codeby@ruyadorno
defineoambientede
produção
codeby@ruyadorno
configuraoprojetono
ambienteescolhido
codeby@ruyadorno
atualizaoprojetono
ambienteescolhido
codeby@ruyadorno
$fab dev update
atualizaroprojetonoambientededesenvolvimento
$fab dev update
atualizaroprojetonoambientededesenvolvimento
$fab prod update
atualizaroprojetonoambientedeprodução
Participeativamenteda
COMUNIDADE
http://braziljs.org/
BrazilJS
http://www.facebook.com/groups/beagajs/
BeagaJS
http://zofe.com.br/
ZOFE
OBRIGADO
@marloscarmo

A (r)evolução do front-end