guia do front-end das galáxias

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

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

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