guia do

front-end
das
galáxias
davidson fellipe
senior front-end engineer na globo.com
me
HTML ~ 2001
senior front-end engineer
globo.com ~ 2010
mais em fellipe.com
 marvin,
Quer ser
front-end
 ELE ERA
CURIOSO…
 FRONTEND DEVELOPER

UI ENGINEER
FRONTEND ENGINEER

WEB DEVELOPER

PROJETISTA DE INTERFACES
MAS O QUÊ
FAZ UM?
HTML
CSS
JAVASCRIPT
integração
diferentes navegadores
diferentes versões
diferentes resoluções
diferentes dispositivos
 começou
a seguir
referências
GRANDES GRINGOS DA ÁREA

@mathias @sindresorhus
@stoyanstefanov
@paul_irish
@rmurphey
@valueof @codepo8
@souders
@addyosmani
@stubbornella @slicknet

@cowboy @rauchg
@leaverou
NOMES brazucas DA ÁREA

@marcelduran @bergbrandt
@leobalter

@millermedeiros @zenorocha

@jaydson @fabiomcosta
@felipenmoura
@jcemer
@almirfilho
@eduardolundgren
@maujor
@caio_gondim
@sergio_caelum
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...
!
!
E PORQUE
! NÃO?
!
GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC,
TESTES, ANALISADORES DE QUALIDADE DE
CÓDIGO, TASK RUNNERS, PERFORMANCE...
 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/
GRANDES
PROBLEMAS
 COMO
ORGANIZAR
MEU PROJETO?
definindo uma estrutura
padrões
aspas, chaves, 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, variáveis
uso de mixins
PÉSSIMAS PRÁTICAS
COM CSS, PODEM SER
PIORADAS COM
PRÉ-PROCESSADORES
 fazendo o mal com css
.bisavo { .bisavo .avo .pai #wtf {

.avo { color: #f60;

.pai { }

#wtf {

color: #f60;

}
SCSS CSS
http://csslint.net/
 COMO
ORGANIZAR
MEU JS?
 APRENDA
ALGORITMOS!!!
http://eloquentjavascript.net/
 HTTP://I1-
NEWS.SOFTPE
<3
aprenda
Design Patterns
Inheritance
Prototype, Promises
Memoize, Throttle and Debounce
Detalhes do JSLint
Escopo de variáveis
JSHINT

http://www.jshint.com/
ESQUEÇA
FTP
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/
 COMO
MANTENHO
MEU PROJETO?
INTEGRAÇÃO
CONTÍNUA
Que pode está integrado a
um ciclo de deploy
 TASK
RUNNERS
MAKE SHELL
ANT JAVA
RAKE RUBY
CAKE COFFEE
GULP JS
GRUNT JS
automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles
 $ make grunt-config

grunt-config:

@echo "✖ installing node..."; brew install node;

@echo '✖ installing npm...'; sudo curl https://npmjs.org/install.sh -k | sh;

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

@sudo npm i --save-dev

MAKEFILE make
tasks
testes
pré-processadores
js/css lint
criar sprites
concatenação
otimização de imagens
 task
compass:prod
grunt.initConfig({

compass: {

dev: { /* ... */ },

prod: {

options: {

sassDir: 'src/scss',

cssDir: 'build/css',

imagesDir: 'src/img',

generatedImagesDir: 'build/img',

outputStyle: 'compressed',

noLineComments: true

}}}});
MAKEFILE js
https://github.com/vigetlabs/grunt-complexity
 executando
$ grunt compass:dev

$ grunt compass:prod
http://bower.io/
http://yeoman.io/
OTIMIZAR A
EXPERIÊNCIA
DO USUÁRIO
PERFORMANCE
Qual impacto da
performance?
baixas conversões
baixo engajamento
altas taxas de rejeição
http://mir.aculo.us/dom-monster/
http://www.broofa.com/Tools/JSLitmus/
https://github.com/davidsonfellipe/keepfast/
http://browserdiet.com/pt
 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
até mais, e
obrigado pelos peixes

fellipe.com/talks
github.com/davidsonfellipe
twitter.com/davidsonfellipe