110
A (R)EVOLUÇÃO DO FRONT-END

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

Embed Size (px)

DESCRIPTION

 

Citation preview

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

A (R)EVOLUÇÃO DO

FRONT-END

Page 2: A (r)evolução do front-end
Page 3: A (r)evolução do front-end

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

[email protected]

twitter.com/marloscarmo

facebook.com/marloscarmo

github.com/marloscarmo

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

Há 15 anos atrás não “existia” a disciplina de front-end...

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

Ou você era:

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

Ou você era:

webmaster

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

Ou você era:

webmaster ou

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

Ou você era:

webmaster webdesignerou

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

No final das contas era quase a mesma coisa e o que os diferenciava era...

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

webmasterfazia sites com fundo

preto

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

webdesignerfazia sites com fundo

branco

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

Em 1998 os sites eram praticamente todos estáticos e os editores WYSIWYG reinavam.

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

FrontPage

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

Dreamweaver

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

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

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

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

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

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

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

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
Page 24: A (r)evolução do front-end

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

E o trabalho fica cada vez mais

COMPLEXO

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

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

Atualmente está se tornando uma linguagem cada vez mais universal.

Page 28: A (r)evolução do front-end
Page 29: A (r)evolução do front-end

ETC

BROWSER WEB APPS

MOBILE APPS DESKTOP APPS

SERVIDOR

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

E um bom profissional de front-end tem que entender bem das seguintes disciplinas...

Page 31: A (r)evolução do front-end
Page 32: 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

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

ALGUNS PASSOS PARA UM BOM

FRONT-END

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

Não use IE

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

#pronto

Ajudar a comunidade também é super importante.

Page 36: A (r)evolução do front-end
Page 37: A (r)evolução do front-end

Escolha um bom

EDITOR

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

Sublime Text

http://www.sublimetext.com/

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

VIM

http://www.vim.org/

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

NÃO REIVENTE A RODA Use as melhores práticas

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

HTML5 Boilerplate

http://html5boilerplate.com/

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

HTML5 Boilerplate

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

HTML Email Boilerplate

http://htmlemailboilerplate.com/

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

HTML Email Boilerplate

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

Twitter Bootstrap

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

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

Twitter Bootstrap

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

USE FRAMEWORKS(com moderação)

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

Angular JS

http://angularjs.org

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

Backbone.JS

http://backbonejs.org/

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

Ember

http://emberjs.com/

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

Meteor

http://meteor.com/

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

7 PRINCÍPIOSdo Meteor

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

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

One Language

Escreva JavaScript no front e no back-end. Reutilize seus códigos.

2

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

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

Latency Compensation

Simula latência zero com o banco de dados no servidor.4

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

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

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

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

AUTOMATIZEseus scripts

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

http://coffeescript.org/

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

http://sass-lang.com/

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

variáveis

http://sass-lang.com/

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

variáveis

expressões

http://sass-lang.com/

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

variáveis

expressões

herançahttp://sass-lang.com/

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

código dinâmico

http://lesscss.org/

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

EMMET.IO

http://www.emmet.io/

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

http://jade-lang.com/

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

http://www.jshint.com/

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

ENXUGUEao máximo seu site

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

http://yslow.org/

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

http://browserdiet.com/pt/

Como perder peso no browser?

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

Prepare bem seu

AMBIENTE

Page 75: A (r)evolução do front-end
Page 76: A (r)evolução do front-end

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
Page 78: A (r)evolução do front-end
Page 79: A (r)evolução do front-end
Page 80: A (r)evolução do front-end
Page 81: A (r)evolução do front-end
Page 82: A (r)evolução do front-end

Faz um scaffold da estrutura do seu projeto.

$yo webapp

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

Faz um scaffold da estrutura do seu projeto.

$yo webapp

Page 84: A (r)evolução do front-end
Page 85: A (r)evolução do front-end

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

$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

$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
Page 89: A (r)evolução do front-end

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

Existe algumas outras opções ao YEOMAN

Brunch CodeKit

LiveReload

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

O GOOGLEquer ler e entender seu site

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

http://www.woorank.com/

Woorank

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

http://www.seomoz.org/tools

SEOMOZ Tools

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

www.slideshare.net/fabioricotta/seo-para-frontend-beagajs

Dicas - MestreSEO

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

TESTEsua aplicação

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

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

QUnit

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

DEPLOY!esqueça o ftp

Page 98: A (r)evolução do front-end
Page 100: A (r)evolução do front-end

define o ambiente de desenvolvimento

code by @ruyadorno

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

define o ambiente de produção

code by @ruyadorno

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

configura o projeto no ambiente escolhido

code by @ruyadorno

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

atualiza o projeto no ambiente escolhido

code by @ruyadorno

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

$fab dev update

atualizar o projeto no ambiente de desenvolvimento

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

$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

Participe ativamente daCOMUNIDADE

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

http://braziljs.org/

BrazilJS

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

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

BeagaJS

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

http://zofe.com.br/

ZOFE

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

OBRIGADO@marloscarmo