115
GUIA DO FRONT-END DAS GALÁXIAS Davidson Fellipe v4

Guia do Front-end das Galáxias

Embed Size (px)

DESCRIPTION

Guia do front end das galaxias

Citation preview

Page 1: Guia do Front-end das Galáxias

GUIA DO FRONT-END

DAS GALÁXIAS

Davidson Fellipe v4

Page 2: Guia do Front-end das Galáxias

Front in Cuiabá 2015

Frontend Carioca 2014

Rupy Natal 2014

Front in Aracaju 2014

meapresentada em

Page 3: Guia do Front-end das Galáxias

HTML ~ 2001

senior front-end engineer

globo.com ~ 2010

mais em fellipe.com

me

Page 4: Guia do Front-end das Galáxias
Page 5: Guia do Front-end das Galáxias
Page 6: Guia do Front-end das Galáxias
Page 7: Guia do Front-end das Galáxias
Page 8: Guia do Front-end das Galáxias
Page 9: Guia do Front-end das Galáxias
Page 10: Guia do Front-end das Galáxias

marvin, Quer ser

front-end

Page 11: Guia do Front-end das Galáxias

ELE ERA CURIOSO…

Page 12: Guia do Front-end das Galáxias

curiosidade

É um importante combustível para aprender mais, testar coisas novas, e lidar com o tentativa e erro.

Page 13: Guia do Front-end das Galáxias

FRONTEND DEVELOPER

UI ENGINEER

WEB DEVELOPER

PROJETISTA DE INTERFACES

FRONTEND ENGINEER

Page 14: Guia do Front-end das Galáxias

FRONT-END UNICORN

FRONT-END UX NINJA

FRONT-END NINJA

Page 15: Guia do Front-end das Galáxias

MAS O QUÊ FAZ UM?

Page 16: Guia do Front-end das Galáxias

HTML

Page 17: Guia do Front-end das Galáxias

html

começando do fazer de qualquer jeito

ao código com sua devida semântica

Page 18: Guia do Front-end das Galáxias

CSS

Page 19: Guia do Front-end das Galáxias

css

começando do remover sublinhado de links

até sua relevância para apresentar visual, animações e interações e responsividade

Page 20: Guia do Front-end das Galáxias

JAVASCRIPT

Page 21: Guia do Front-end das Galáxias

javascript

da validação de formulários

até ferramenta de grande relevância para melhoria da experiência do usuário

Page 22: Guia do Front-end das Galáxias

diferentes navegadores

diferentes versões

diferentes resoluções

diferentes dispositivos

integração

Page 23: Guia do Front-end das Galáxias

começou a seguir

referências…

Page 24: Guia do Front-end das Galáxias

GRANDES GRINGOS DA ÁREA

@leaverou

@paul_irish

@codepo8@souders

@slicknet

@stoyanstefanov

@stubbornella @addyosmani

@rauchg

@sindresorhus

@cowboy

@mathias

@valueof

@rmurphey

Page 25: Guia do Front-end das Galáxias

@zenorocha

@marcelduran

@maujor

@bergbrandt

@fabiomcosta

@eduardolundgren

@jaydson

@almirfilho

@leobalter

@millermedeiros

@caio_gondim

@felipenmoura

NOMES brazucas DA ÁREA

@sergio_caelum

@jcemer

Page 26: Guia do Front-end das Galáxias

O QUE PRECISO APRENDER?

Page 27: Guia do Front-end das Galáxias

HTML, CSS, JAVASCRIPT, FEATURE DETECTION, REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP, CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES,

SVG, CANVAS, LOCALSTORAGE, WEBCOMPONENTS, WEBSOCKETS,

SHADOW DOM, FERRAMENTAS PARA DEBUG, SISTEMAS DE GRIDS, SCHEMA.ORG, SEO...

GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE CÓDIGO, TASK RUNNERS, PERFORMANCE...

E PORQUE NÃO?

Page 29: Guia do Front-end das Galáxias

https://twitter.com/slicknet/status/292103833327370240

Page 30: Guia do Front-end das Galáxias

COMO POR EM PRÁTICA?

Page 31: Guia do Front-end das Galáxias

ESCOLHENDO UM EDITOR

Page 32: Guia do Front-end das Galáxias
Page 33: Guia do Front-end das Galáxias
Page 34: Guia do Front-end das Galáxias
Page 35: Guia do Front-end das Galáxias
Page 36: Guia do Front-end das Galáxias

CRIO UM PADRÃO?

Page 37: Guia do Front-end das Galáxias

BUSCO POR UM PADRÃO?

Page 38: Guia do Front-end das Galáxias
Page 39: Guia do Front-end das Galáxias
Page 40: Guia do Front-end das Galáxias

http://html5boilerplate.com/

Page 41: Guia do Front-end das Galáxias

O que aprendo?

Boa organização de arquivos

Estrutura do HTML, CSS e JS

Projetos em constante evolução

Page 42: Guia do Front-end das Galáxias

GRANDES PROBLEMAS

Page 43: Guia do Front-end das Galáxias

http://cubic-bezier.com/#.17,.67,.83,.67

Page 44: Guia do Front-end das Galáxias

COMO ORGANIZAR

MEU PROJETO?

Page 45: Guia do Front-end das Galáxias

definindo uma estrutura

Page 46: Guia do Front-end das Galáxias

padrões

ponto e vírgula;

espaços vs tabulações

aspas simples vs aspas duplas

nomenclaturas para functions, Object Literal, conditional statement...

Page 47: Guia do Front-end das Galáxias

https://github.com/rwaldron/idiomatic.js/

Page 48: Guia do Front-end das Galáxias

https://github.com/airbnb/javascript

Page 49: Guia do Front-end das Galáxias

COMO ORGANIZAR

MEU CSS?

Page 50: Guia do Front-end das Galáxias

css nãããããããão

Page 51: Guia do Front-end das Galáxias

CSS VS

PRÉ-PROCESSADOR

Page 52: Guia do Front-end das Galáxias

vantagens

produtividade

facilidade de trabalharcom módulos e variáveis

uso de mixins e placeholders

Page 53: Guia do Front-end das Galáxias
Page 54: Guia do Front-end das Galáxias
Page 55: Guia do Front-end das Galáxias
Page 56: Guia do Front-end das Galáxias
Page 57: Guia do Front-end das Galáxias

PÉSSIMAS PRÁTICAS COM CSS, PODEM SER

PIORADAS COM PRÉ-PROCESSADORES

Page 58: Guia do Front-end das Galáxias

fazendo o mal com css

.bisavo {

.avo {

.pai {

#wtf {

color: #f60;

}

}

}

}

.bisavo .avo .pai #wtf {

color: #f60;

}

SCSS CSS

Page 59: Guia do Front-end das Galáxias

http://csslint.net/

Page 60: Guia do Front-end das Galáxias

COMO ORGANIZAR

MEU JS?

Page 61: Guia do Front-end das Galáxias

APRENDA ALGORITMOS!!!

Page 62: Guia do Front-end das Galáxias

http://eloquentjavascript.net/

Page 63: Guia do Front-end das Galáxias

https://github.com/braziljs/eloquente-javascript

também em português

Page 65: Guia do Front-end das Galáxias

NÃO DESPREZE OS CUSTOS DO LADO

FRONT-END!

Page 66: Guia do Front-end das Galáxias

MUITAS VEZES OS CUSTOS PODEM

SER MAIS ALTOS QUE OS DO BACK-END!

Page 67: Guia do Front-end das Galáxias

aprendaDesign Patterns

Inheritance

Prototype e Promises

Memoize, Throttle e Debounce

Detalhes do JSLint

Escopo de variáveis

Page 68: Guia do Front-end das Galáxias

http://www.jshint.com/

JSHINT

Page 69: Guia do Front-end das Galáxias

ESQUEÇA FTP COM GUI

Page 70: Guia do Front-end das Galáxias

ESQUEÇA SVN

Page 71: Guia do Front-end das Galáxias

git, mercurial…

TRABALHAR COM REPOS

ENTENDER BRANCHES, TAGS

PULL REQUEST

ISSUES

Page 72: Guia do Front-end das Galáxias

https://github.com/

Page 73: Guia do Front-end das Galáxias

https://bitbucket.org/

Page 74: Guia do Front-end das Galáxias

COMO GERENCIO MEU TEMPO?

Page 75: Guia do Front-end das Galáxias

https://trello.com/

Page 76: Guia do Front-end das Galáxias

http://www.yast.com/

Page 77: Guia do Front-end das Galáxias

https://wakatime.com/

Page 78: Guia do Front-end das Galáxias

https://www.rescuetime.com

Page 79: Guia do Front-end das Galáxias

COMO MANTENHO

MEU PROJETO?

Page 80: Guia do Front-end das Galáxias

http://jasmine.github.io/

Page 81: Guia do Front-end das Galáxias

http://qunitjs.com/

Page 82: Guia do Front-end das Galáxias

http://visionmedia.github.io/mocha/

Page 83: Guia do Front-end das Galáxias

INTEGRAÇÃO CONTÍNUA

Page 84: Guia do Front-end das Galáxias
Page 85: Guia do Front-end das Galáxias

processo de deploy

Page 86: Guia do Front-end das Galáxias

TASK

RUNNERS

Page 87: Guia do Front-end das Galáxias
Page 88: Guia do Front-end das Galáxias

MAKE ANT

RAKE CAKE GULP

GRUNT

SHELL JAVA RUBY COFFEE JS JS

Page 89: Guia do Front-end das Galáxias

$ make grunt-config

MAKEFILE

grunt-config:

@echo '✖ installing node'; brew install node;

@echo '✖ installing grunt'; sudo npm install -g grunt-cli;

@sudo npm i --save-dev

make

Page 90: Guia do Front-end das Galáxias

taskstestes

pré-processadores

js/css lint

criar sprites

concatenação

otimização de imagens

Page 91: Guia do Front-end das Galáxias

task compass:prod

MAKEFILE

grunt.initConfig({ compass: { dev: { /* ... */ }, prod: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); js

Page 92: Guia do Front-end das Galáxias

https://github.com/vigetlabs/grunt-complexity

Page 93: Guia do Front-end das Galáxias

executando

$ grunt compass:dev

$ grunt compass:prod

Page 94: Guia do Front-end das Galáxias

https://github.com/davidsonfellipe/grunt-workflow

Page 95: Guia do Front-end das Galáxias

http://bower.io/

Page 96: Guia do Front-end das Galáxias

http://yeoman.io/

Page 97: Guia do Front-end das Galáxias

automatize suas configurações

https://github.com/davidsonfellipe/dotfiles

Page 98: Guia do Front-end das Galáxias

PERFORMANCE

Page 99: Guia do Front-end das Galáxias

Qual impacto da performance?

baixas conversões

baixo engajamento

altas taxas de rejeição

Page 100: Guia do Front-end das Galáxias

https://github.com/davidsonfellipe/awesome-wpo

Page 102: Guia do Front-end das Galáxias

https://github.com/davidsonfellipe/keepfast/

Page 103: Guia do Front-end das Galáxias

OTIMIZAR A EXPERIÊNCIA DO USUÁRIO

Page 104: Guia do Front-end das Galáxias
Page 105: Guia do Front-end das Galáxias

QI de 30 bilhões de

vezes superior ao de um ser humano

Page 106: Guia do Front-end das Galáxias

COMO SE MANTER ATUALIZADO?

Page 107: Guia do Front-end das Galáxias

http://braziljs.org/

Page 108: Guia do Front-end das Galáxias

http://web-design-weekly.com/

Page 109: Guia do Front-end das Galáxias

http://html5weekly.com/

Page 110: Guia do Front-end das Galáxias

http://javascriptweekly.com

Page 111: Guia do Front-end das Galáxias
Page 112: Guia do Front-end das Galáxias
Page 113: Guia do Front-end das Galáxias

Aprenda com o tempo

código limpo

testes

preocupação com manutenibilidade e extensibilidade

Page 114: Guia do Front-end das Galáxias
Page 115: Guia do Front-end das Galáxias

fellipe.com/talks

github.com/davidsonfellipe

twitter.com/davidsonfellipe

obrigado pelos peixes