SlideShare uma empresa Scribd logo
A(R)EVOLUÇÃODO
FRONT-END
A (r)evolução do 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.
A (r)evolução do front-end
Enosdiasdehojeacoisamudoumuito.
OmeninodoHTMLagoratematénome:
FRONT-ENDENGINEER
Eotrabalhoficacadavezmais
COMPLEXO
Antes,oJavaScriptquenãoera
levadoasérioeeraconsideradouma
TOYLANGUAGE
Atualmenteestásetornandouma
linguagemcadavezmaisuniversal.
A (r)evolução do front-end
ETC
BROWSER WEB APPS
MOBILE APPS DESKTOP APPS
SERVIDOR
Eumbomprofissionaldefront-
endtemqueentenderbemdas
seguintesdisciplinas...
A (r)evolução do front-end
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.
A (r)evolução do front-end
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
A (r)evolução do front-end
Yeomanconsisteemumconjuntodeferramentas
voltadasparacriarrapidamenteumnovoprojeto
webegerenciá-loduranteoprocesso.
http://yeoman.io/
A (r)evolução do front-end
A (r)evolução do front-end
A (r)evolução do front-end
A (r)evolução do front-end
A (r)evolução do front-end
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp
Fazumscaffoldda
estruturadoseuprojeto.
$yo webapp
A (r)evolução do front-end
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
A (r)evolução do front-end
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
A (r)evolução do front-end
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

Mais conteúdo relacionado

PDF
Futura
PDF
Diagrama de Portas para otimização de UX de sites
PPTX
Apresentação FEMUG-ABC
PPTX
Web 2.0
TXT
PPT
Oficina De Twitter
PDF
TALK LESS AND DO MORE: O que aprendi nos últimos 18 anos
PDF
Impacto2013
Futura
Diagrama de Portas para otimização de UX de sites
Apresentação FEMUG-ABC
Web 2.0
Oficina De Twitter
TALK LESS AND DO MORE: O que aprendi nos últimos 18 anos
Impacto2013

Destaque (20)

PDF
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
PPT
Front-end Development
PDF
Engenharia de front end de alta performance
ODP
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
PPTX
Mercado Front-End no Brasil e no mundo
PDF
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
PPTX
Minicurso Web. Front-end e HTML5 (parte 2)
PPT
SASS + COMPASS - Alta Produtividade no Front-end
PPTX
Minicurso Web. Front-end e HTML5 (parte 1)
PDF
SEO para Front-End
PDF
Os mitos do desenvolvimento front-end
PDF
O Papel do desenvolvedor Front End
PPTX
Evoluindo a arquitetura de uma aplicação com AngularJS
PDF
AngularJS Abraçando o MVC Client-Side
PDF
Criando uma arquitetura de front-end do zero
PDF
Estrutura de um Front-End eficiente (para iniciantes)
PPTX
Criando aplicações Single-Page com AngularJS
PDF
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
PPTX
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
PDF
O papel do Front-End na UX
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
Front-end Development
Engenharia de front end de alta performance
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Mercado Front-End no Brasil e no mundo
Hugo Brioso | Website Design, Development & Internet Marketing | Graphic Desi...
Minicurso Web. Front-end e HTML5 (parte 2)
SASS + COMPASS - Alta Produtividade no Front-end
Minicurso Web. Front-end e HTML5 (parte 1)
SEO para Front-End
Os mitos do desenvolvimento front-end
O Papel do desenvolvedor Front End
Evoluindo a arquitetura de uma aplicação com AngularJS
AngularJS Abraçando o MVC Client-Side
Criando uma arquitetura de front-end do zero
Estrutura de um Front-End eficiente (para iniciantes)
Criando aplicações Single-Page com AngularJS
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
O papel do Front-End na UX
Anúncio

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

PDF
Workflow Open Source para Frontend Developers
PDF
It's Javascript Time
PPTX
Hackers Pensando
PDF
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
KEY
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
PDF
O que você precisa saber para se tornar um dev front-end
PDF
Flash + WordPress = Amantes
Workflow Open Source para Frontend Developers
It's Javascript Time
Hackers Pensando
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
O que você precisa saber para se tornar um dev front-end
Flash + WordPress = Amantes
Anúncio

Mais de Marlos Carmo (7)

PDF
Startup Weekend Education - 2018
PPTX
Pesquisa Nacional para Educação Básica - ANEC
PDF
Gente - Geração Alpha
PDF
Pesquisa Nacional de Educação Básica - ANEC
PDF
Produção de Conteúdo para Publicidade de Marcas
PDF
Marketing de Resultado
PDF
Porque os $19 bi pagos ao WhatsApp pelo Facebook pode ter sido um grande negó...
Startup Weekend Education - 2018
Pesquisa Nacional para Educação Básica - ANEC
Gente - Geração Alpha
Pesquisa Nacional de Educação Básica - ANEC
Produção de Conteúdo para Publicidade de Marcas
Marketing de Resultado
Porque os $19 bi pagos ao WhatsApp pelo Facebook pode ter sido um grande negó...

Último (19)

PDF
Fullfilment AI - Forum ecommerce 2025 // Distrito e Total Express
PDF
Apple Pippin Uma breve introdução. - David Glotz
PDF
Processos na gestão de transportes, TM100 Col18
PDF
Gestão de transportes básica no SAP S/4HANA, S4611 Col20
PDF
Custos e liquidação no SAP Transportation Management, TM130 Col18
PDF
20250805_ServiceNow e a Arquitetura Orientada a Serviços (SOA) A Base para Ap...
PDF
Mergulho profundo técnico para gestão de transportes no SAP S/4HANA, S4TM6 Col14
PDF
Otimizador de planejamento e execução no SAP Transportation Management, TM120...
PPTX
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
PPTX
Aula 18 - Manipulacao De Arquivos python
PPTX
Como-se-implementa-um-softwareeeeeeeeeeeeeeeeeeeeeeeee.pptx
PDF
Aula04-Academia Heri- Tecnologia Geral 2025
PPTX
Aula16ManipulaçãoDadosssssssssssssssssssssssssssss
PPTX
Programação - Linguagem C - Variáveis, Palavras Reservadas, tipos de dados, c...
PDF
Fundamentos de gerenciamento de ordens e planejamento no SAP TransportationMa...
PDF
COBITxITIL-Entenda as diferença em uso governança TI
PPTX
Gestao-de-Bugs-em-Software-Introducao.pptxxxxxxxx
PPTX
BANCO DE DADOS - AULAS INICIAIS-sgbd.pptx
PDF
Custos e faturamento no SAP S/4HANA Transportation Management, S4TM3 Col26
Fullfilment AI - Forum ecommerce 2025 // Distrito e Total Express
Apple Pippin Uma breve introdução. - David Glotz
Processos na gestão de transportes, TM100 Col18
Gestão de transportes básica no SAP S/4HANA, S4611 Col20
Custos e liquidação no SAP Transportation Management, TM130 Col18
20250805_ServiceNow e a Arquitetura Orientada a Serviços (SOA) A Base para Ap...
Mergulho profundo técnico para gestão de transportes no SAP S/4HANA, S4TM6 Col14
Otimizador de planejamento e execução no SAP Transportation Management, TM120...
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
Aula 18 - Manipulacao De Arquivos python
Como-se-implementa-um-softwareeeeeeeeeeeeeeeeeeeeeeeee.pptx
Aula04-Academia Heri- Tecnologia Geral 2025
Aula16ManipulaçãoDadosssssssssssssssssssssssssssss
Programação - Linguagem C - Variáveis, Palavras Reservadas, tipos de dados, c...
Fundamentos de gerenciamento de ordens e planejamento no SAP TransportationMa...
COBITxITIL-Entenda as diferença em uso governança TI
Gestao-de-Bugs-em-Software-Introducao.pptxxxxxxxx
BANCO DE DADOS - AULAS INICIAIS-sgbd.pptx
Custos e faturamento no SAP S/4HANA Transportation Management, S4TM3 Col26

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