a (r)evolução do front-end
DESCRIPTION
TRANSCRIPT
![Page 1: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/1.jpg)
A (R)EVOLUÇÃO DO
FRONT-END
![Page 2: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/2.jpg)
![Page 3: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/3.jpg)
MARLOS CARMOGERENTE DE OPERAÇÕES DIGITAIS
NA RC COMUNICAÇÃO
#SOUDEV HÁ 15 ANOS / #SOUCHEFE HÁ 8 ANOS
![Page 4: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/4.jpg)
twitter.com/marloscarmo
facebook.com/marloscarmo
github.com/marloscarmo
![Page 5: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/5.jpg)
Há 15 anos atrás não “existia” a disciplina de front-end...
![Page 6: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/6.jpg)
Ou você era:
![Page 7: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/7.jpg)
Ou você era:
webmaster
![Page 8: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/8.jpg)
Ou você era:
webmaster ou
![Page 9: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/9.jpg)
Ou você era:
webmaster webdesignerou
![Page 10: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/10.jpg)
No final das contas era quase a mesma coisa e o que os diferenciava era...
![Page 11: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/11.jpg)
webmasterfazia sites com fundo
preto
![Page 12: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/12.jpg)
webdesignerfazia sites com fundo
branco
![Page 13: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/13.jpg)
Em 1998 os sites eram praticamente todos estáticos e os editores WYSIWYG reinavam.
![Page 14: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/14.jpg)
FrontPage
![Page 15: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/15.jpg)
Dreamweaver
![Page 16: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/16.jpg)
Não existia nenhuma preocupação com o código e sua manutenção.
“Desenhou” o site no FrontPage e rodou no IE. #pronto
![Page 17: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/17.jpg)
Os códigos ficavam “uma beleza”.Imaginem todo o HTML, o CSS e o JavaScript no mesmo arquivo.
![Page 18: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/18.jpg)
A arte do CTRL + C/ Ctrl + V prevalecia.
Existiam diretórios com vários tipos de menus, gifs animados, DHTMLs, Applets e tudo mais. Era só copiar e colar no seu código.
![Page 19: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/19.jpg)
Com o passar do tempo a divisão dos cargos foi aumentando junto com a popularização das tecnologias.
webdesigner
webdeveloper
webwriter
programador ASP
programador PHP
![Page 20: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/20.jpg)
webdesigner
webdeveloper
webwriter
programador ASP
programador PHP
menino do HTML
Com o passar do tempo a divisão dos cargos foi aumentando junto com a popularização das tecnologias.
![Page 21: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/21.jpg)
Os programadores que se especializavam seguiam o caminho do back-end, pois lá estava toda a magia.
“Você, menino do HTML, um dia será um programador back-end”(mas enquanto isso recorte estas 42 telas aqui para hoje)
![Page 22: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/22.jpg)
Isso se tornou mais forte ainda com a popularização do Flash.
Os sites não precisavam ter muito conteúdo, desde que tivessem uma animação de abertura.
![Page 23: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/23.jpg)
![Page 24: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/24.jpg)
E nos dias de hoje a coisa mudou muito. O menino do HTML agora tem até nome:
FRONT-END ENGINEER
![Page 25: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/25.jpg)
E o trabalho fica cada vez mais
COMPLEXO
![Page 26: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/26.jpg)
Antes, o JavaScript que não era levado a sério e era considerado uma
TOY LANGUAGE
![Page 27: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/27.jpg)
Atualmente está se tornando uma linguagem cada vez mais universal.
![Page 28: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/28.jpg)
![Page 29: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/29.jpg)
ETC
BROWSER WEB APPS
MOBILE APPS DESKTOP APPS
SERVIDOR
![Page 30: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/30.jpg)
E um bom profissional de front-end tem que entender bem das seguintes disciplinas...
![Page 31: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/31.jpg)
![Page 32: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/32.jpg)
SEGURANÇA
TESTES
ACESSIBILIDADE
SUPORTE MULTI-BROWSERS
SUPORTE MULTI-DEVICES
SUPORTE MULTI-TELAS
PERFORMANCE
CONHECIMENTOS DE SERVER
SEO
![Page 33: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/33.jpg)
ALGUNS PASSOS PARA UM BOM
FRONT-END
![Page 34: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/34.jpg)
Não use IE
![Page 35: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/35.jpg)
#pronto
Ajudar a comunidade também é super importante.
![Page 36: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/36.jpg)
![Page 37: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/37.jpg)
Escolha um bom
EDITOR
![Page 40: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/40.jpg)
NÃO REIVENTE A RODA Use as melhores práticas
![Page 41: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/41.jpg)
HTML5 Boilerplate
http://html5boilerplate.com/
![Page 42: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/42.jpg)
HTML5 Boilerplate
![Page 43: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/43.jpg)
HTML Email Boilerplate
http://htmlemailboilerplate.com/
![Page 44: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/44.jpg)
HTML Email Boilerplate
![Page 45: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/45.jpg)
Twitter Bootstrap
http://twitter.github.io/bootstrap/
![Page 46: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/46.jpg)
Twitter Bootstrap
![Page 47: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/47.jpg)
USE FRAMEWORKS(com moderação)
![Page 52: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/52.jpg)
7 PRINCÍPIOSdo Meteor
![Page 53: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/53.jpg)
Data on the wire
Nunca trafegue HTML.Envie a informação e deixe o cliente decidir como apresentá-la.
1
![Page 54: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/54.jpg)
One Language
Escreva JavaScript no front e no back-end. Reutilize seus códigos.
2
![Page 55: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/55.jpg)
Database Everywhere
Use a mesma API para acessar seu banco de dados no client e no server.
3
![Page 56: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/56.jpg)
Latency Compensation
Simula latência zero com o banco de dados no servidor.4
![Page 57: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/57.jpg)
Full Stack Reactivity
Faça realtime por padrão.Todas as camadas, do banco ao template, devem ser orientadas aos eventos de interface.
5
![Page 58: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/58.jpg)
Embrace the Ecosystem
Meteor é open source e integra, ao invés de substituir, ferramentas e frameworks existentes.
6
![Page 59: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/59.jpg)
Simplicity Equals Productivity
A melhor maneira de fazer algo parecer simples é torná-lo realmente simples. Buscamos isso através de uma API clean e extremamentes fácil.
7
![Page 60: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/60.jpg)
AUTOMATIZEseus scripts
![Page 70: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/70.jpg)
ENXUGUEao máximo seu site
![Page 72: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/72.jpg)
https://developers.google.com/speed/pagespeed/?hl=pt-BR
![Page 73: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/73.jpg)
http://browserdiet.com/pt/
Como perder peso no browser?
![Page 74: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/74.jpg)
Prepare bem seu
AMBIENTE
![Page 75: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/75.jpg)
![Page 76: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/76.jpg)
Yeoman consiste em um conjunto de ferramentas voltadas para criar rapidamente um novo projeto web e gerenciá-lo durante o processo.
http://yeoman.io/
![Page 77: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/77.jpg)
![Page 78: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/78.jpg)
![Page 79: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/79.jpg)
![Page 80: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/80.jpg)
![Page 81: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/81.jpg)
![Page 82: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/82.jpg)
Faz um scaffold da estrutura do seu projeto.
$yo webapp
![Page 83: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/83.jpg)
Faz um scaffold da estrutura do seu projeto.
$yo webapp
![Page 84: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/84.jpg)
![Page 85: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/85.jpg)
Ele vai passar um JSHint no código, compilar arquivos CoffeeScript e SASS, utilizar o r.js para compilar e otimizar módulos AMD, juntar e minificar arquivos .css e .js, comprimir as imagens utilizando o OptiPNG para .png e JPEGtran-turbo para .jpeg, vai rodar os testes utilizando PhantomJS e utilizar o Confess.js para criar o arquivo de cache da aplicação.
![Page 86: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/86.jpg)
$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
![Page 87: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/87.jpg)
$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
![Page 88: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/88.jpg)
![Page 89: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/89.jpg)
Gerencia dependências do seu projeto. Baixa, adiciona e atualiza o componente de forma automatizada.
$bower install jquery
$bower update jquery
![Page 90: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/90.jpg)
Existe algumas outras opções ao YEOMAN
Brunch CodeKit
LiveReload
![Page 91: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/91.jpg)
O GOOGLEquer ler e entender seu site
![Page 94: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/94.jpg)
www.slideshare.net/fabioricotta/seo-para-frontend-beagajs
Dicas - MestreSEO
![Page 95: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/95.jpg)
TESTEsua aplicação
![Page 96: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/96.jpg)
http://www.youtube.com/watch?v=5z6eFve4TxI
QUnit
![Page 97: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/97.jpg)
DEPLOY!esqueça o ftp
![Page 98: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/98.jpg)
![Page 99: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/99.jpg)
CAPISTRANOhttp://capify.org
RSYNChttp://rsync.samba.org/
FABRIChttp://docs.fabfile.org/en/1.6/
![Page 100: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/100.jpg)
define o ambiente de desenvolvimento
code by @ruyadorno
![Page 101: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/101.jpg)
define o ambiente de produção
code by @ruyadorno
![Page 102: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/102.jpg)
configura o projeto no ambiente escolhido
code by @ruyadorno
![Page 103: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/103.jpg)
atualiza o projeto no ambiente escolhido
code by @ruyadorno
![Page 104: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/104.jpg)
$fab dev update
atualizar o projeto no ambiente de desenvolvimento
![Page 105: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/105.jpg)
$fab dev update
atualizar o projeto no ambiente de desenvolvimento
$fab prod update
atualizar o projeto no ambiente de produção
![Page 106: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/106.jpg)
Participe ativamente daCOMUNIDADE
![Page 108: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/108.jpg)
http://www.facebook.com/groups/beagajs/
BeagaJS
![Page 110: A (r)evolução do front-end](https://reader033.vdocuments.site/reader033/viewer/2022042521/548b9defb47959f2248b4578/html5/thumbnails/110.jpg)
OBRIGADO@marloscarmo