Frontend Engineers: passado, presente e futuro

FRONT END ENGINEERS
passado,
presente
e
futuro

OUTROS NOMES DA
PROFISSÃO
front end
developer
htmler
web developerimplementador
de interfaces
web
UI engineer

http://www.youtube.com/watch?v=lXGDRrkaRgU
I’m a
front end
engineer

O QUE FAZ UM
FRONT END
ENGINEER?

APTO A SE COMUNICAR
Product Managers
End Users
Engineering Management
User Interface Designers

“é o pro!ssional capaz de explorar o
front-end de uma aplicação web não só
como layout, mas como interface móvel,
mutante, interativa, proporcionando,
assim, uma experiência de uso mais rica”
Berg Brandt
Senior Frontend Engineer no Yahoo!

QUAL FORMAÇÃO
ADEQUADA PARA
FRONT END
ENGINEER?

frontend-br no
Y!
iniciado por um
grupo de devs
de recife
COMO COMEÇOU?

COMUNIDADE HOJE
Vários evento na área
+ interação
Projetos de código aberto conhecidos
Pro!ssionais com destaque internacional

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.communityjs.org

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.communityjs.org

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.braziljs.org

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.braziljs.com.br

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.frontinbh.com.br

http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.riojs.org/conf

http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...

precisa saber
JAVASCRIPT?
2006...

+ poderosas
+ complexas
+ ambiciosas
2013...

www.igvita.com/slides/2012/devtools-tips-and-tricks/
CICLO DE VIDA DE UMA
WEBPAGE

ATUALMENTE...
http://httparchive.org/trends.php

http://ondeviceresearch.com/
USUÁRIOS APENAS
MOBILE

Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIA
DOS COMPONENTES
outros - incluem conexões 3G e text rendering
css e js - maior consumo relacionado a transmissão e rendering

websites precisam ter exatamente o
mesmo visual em todos os browsers?

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

MULTITASKING...
@flavioribeiro na globo.com

SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB

DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda

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

BITBUCKET VS GITHUB
repos privados
ilimitados
preço baseado no
número de
colaboradores
número de
colaboradores ilimitado
preço baseado no
número de repositórios
privados

O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript

O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watchers para Pré-processadores

performance de frontend?
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

PRINCIPAIS CUIDADOS
● Minificar CSS, JavaScript e HTML
● Inline imagens, CSS, e JavaScript
● Cache de assets
● Defer JavaScript
● Concatenar CSS e JavaScript
● Compressão de imagens & resizing

YSLOW
http://developer.yahoo.com/yslow/

YSLOW, MANTENEDOR?
https://twitter.com/marcelduran
brasileiro
@marcelduran

PAGE SPEED
https://developers.google.com/speed/pagespeed/insights

+PERFORMANCE?
http://browserdiet.com/pt

TEM ATÉ EM CHINÊS...
http://browserdiet.com/zh

SPEEDLIMIT
http://mschrag.github.io

JSLITMUS
http://mschrag.github.io

GRADIENTES?
http://www.colorzilla.com/gradient-editor/

GITIFIER
http://psionides.github.io/Gitifier/

MAS O QUE
ESTÁ VINDO
POR AÍ?

SPDY
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

WEB COMPONENTS
http://www.w3.org/TR/2013/WD-components-intro-20130606/

POLYMER
http://www.polymer-project.org/

CONTRIBUA
EM
PROJETOS
OPENSOURCE

CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing

http://oswaldoacauan.github.io/keep-up-to-date-brazuca/

AH...
É MUITA COISA
PARA ESTUDAR...

www.fellipe.com/talks
slides disponíveis em...

obrigado
CONVESCOTE!
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com/talks

Frontend Engineers: passado, presente e futuro

Apresentações relacionadas

Mais conteúdo relacionado

Frontend Engineers: passado, presente e futuro