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

Front in Cuiabá 2015
Frontend Carioca 2014
Rupy Natal 2014
Front in Aracaju 2014
me
apresentada em

HTML ~ 2001
senior front-end engineer
globo.com ~ 2010
mais em fellipe.com
me

marvin,
Quer ser
front-end

ELE ERA
CURIOSO…

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

FRONTEND DEVELOPER
UI ENGINEER
WEB DEVELOPER
PROJETISTA DE INTERFACES
FRONTEND ENGINEER

FRONT-END UNICORN
FRONT-END UX NINJA
FRONT-END NINJA

MAS O QUÊ
FAZ UM?

HTML

html
começando do fazer de qualquer
jeito
ao código com sua devida
semântica

CSS

css
começando do remover
sublinhado de links
até sua relevância para
apresentar visual, animações e
interações e responsividade

JAVASCRIPT

javascript
da validação de formulários
até ferramenta de grande
relevância para melhoria da
experiência do usuário

diferentes navegadores
diferentes versões
diferentes resoluções
diferentes dispositivos
integração

começou
a seguir
referências…

GRANDES GRINGOS DA ÁREA
@leaverou
@paul_irish
@codepo8
@souders
@slicknet
@stoyanstefanov
@stubbornella
@addyosmani
@rauchg
@sindresorhus
@cowboy
@mathias
@valueof
@rmurphey

@zenorocha
@marcelduran
@maujor
@bergbrandt
@fabiomcosta
@eduardolundgren
@jaydson
@almirfilho
@leobalter
@millermedeiros
@caio_gondim
@felipenmoura
NOMES brazucas DA ÁREA
@sergio_caelum
@jcemer

O QUE PRECISO
APRENDER?

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?

HTTP://I1-
NEWS.SOFTPE

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

COMO POR
EM PRÁTICA?

ESCOLHENDO UM
EDITOR

CRIO UM PADRÃO?

BUSCO POR UM
PADRÃO?

http://html5boilerplate.com/

O que aprendo?
Boa organização de arquivos
Estrutura do HTML, CSS e JS
Projetos em constante evolução

GRANDES
PROBLEMAS

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

COMO
ORGANIZAR
MEU PROJETO?

definindo uma estrutura

padrões
ponto e vírgula;
espaços vs tabulações
aspas simples vs aspas duplas
nomenclaturas para functions, Object
Literal, conditional statement...

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

https://github.com/airbnb/javascript

COMO
ORGANIZAR
MEU CSS?

css nãããããããão

CSS
VS
PRÉ-PROCESSADOR

vantagens
produtividade
facilidade de trabalhar
com módulos e variáveis
uso de mixins e placeholders

PÉSSIMAS PRÁTICAS
COM CSS, PODEM SER
PIORADAS COM
PRÉ-PROCESSADORES

fazendo o mal com css
.bisavo {
.avo {
.pai {
#wtf {
color: #f60;
}
}
}
}
.bisavo .avo .pai #wtf {
color: #f60;
}
SCSS CSS

http://csslint.net/

COMO
ORGANIZAR
MEU JS?

APRENDA
ALGORITMOS!!!

http://eloquentjavascript.net/

https://github.com/braziljs/eloquente-javascript
também em português

HTTP://I1-
NEWS.SOFTPE
<3

NÃO DESPREZE OS
CUSTOS DO LADO
FRONT-END!

MUITAS VEZES
OS CUSTOS PODEM
SER MAIS ALTOS QUE
OS DO BACK-END!

aprenda
Design Patterns
Inheritance
Prototype e Promises
Memoize, Throttle e Debounce
Detalhes do JSLint
Escopo de variáveis

http://www.jshint.com/
JSHINT

ESQUEÇA
FTP COM GUI

ESQUEÇA
SVN

git, mercurial…
TRABALHAR COM REPOS
ENTENDER BRANCHES, TAGS
PULL REQUEST
ISSUES

https://github.com/

https://bitbucket.org/

COMO GERENCIO
MEU TEMPO?

https://trello.com/

http://www.yast.com/

https://wakatime.com/

https://www.rescuetime.com

COMO
MANTENHO
MEU PROJETO?

http://jasmine.github.io/

http://qunitjs.com/

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

INTEGRAÇÃO
CONTÍNUA

processo de deploy

TASK
RUNNERS

MAKE
ANT
RAKE
CAKE
GULP
GRUNT
SHELL
JAVA
RUBY
COFFEE
JS
JS

$ 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

tasks
testes
pré-processadores
js/css lint
criar sprites
concatenação
otimização de imagens

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

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

executando
$ grunt compass:dev
$ grunt compass:prod

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

http://bower.io/

http://yeoman.io/

automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles

PERFORMANCE

Qual impacto da
performance?
baixas conversões
baixo engajamento
altas taxas de rejeição

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

http://browserdiet.com/pt

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

OTIMIZAR A
EXPERIÊNCIA
DO USUÁRIO

QI
de 30 bilhões de
vezes superior ao
de um ser humano

COMO SE MANTER
ATUALIZADO?

http://braziljs.org/

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

http://html5weekly.com/

http://javascriptweekly.com

Aprenda com o
tempo
código limpo
testes
preocupação com
manutenibilidade e
extensibilidade

fellipe.com/talks
github.com/davidsonfellipe
twitter.com/davidsonfellipe
obrigado pelos peixes