Upload
davidson-fellipe
View
9.117
Download
2
Embed Size (px)
DESCRIPTION
Guia do front end das galaxias
Citation preview
GUIA DO FRONT-END
DAS GALÁXIAS
Davidson Fellipe v4
Front in Cuiabá 2015
Frontend Carioca 2014
Rupy Natal 2014
Front in Aracaju 2014
meapresentada 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 trabalharcom 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!
aprendaDesign Patterns
Inheritance
Prototype e Promises
Memoize, Throttle e Debounce
Detalhes do JSLint
Escopo de variáveis
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
taskstestes
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