frontend engineers: passado, presente e futuro
TRANSCRIPT
FRONT END ENGINEERS
passado, presenteefuturo
I’mDAVIDSON FELLIPE
WORKS
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 ENDENGINEER?
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 BrandtSenior Frontend Engineer no Yahoo!
QUAL FORMAÇÃO ADEQUADA PARA
FRONT ENDENGINEER?
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
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
LAYOUT USANDO TABLE?
ENQUANTO ISSO EM 2000...
HTMLCSS
2006...
precisa saber
JAVASCRIPT?
2006...
ATUALMENTE...
+ 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
ATUALMENTE...
http://httparchive.org/trends.php
XBROWSERXDEVICEXPLATFORM
XBROWSERXDEVICEXPLATFORM
http://ondeviceresearch.com/
USUÁRIOS APENAS MOBILE
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIADOS 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?
TECNOLOGIAS
https://twitter.com/slicknet/status/292103833327370240
MULTITASKING...
@flavioribeiro na globo.com
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
DOTFILES
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda
automatize suasconfigurações
https://github.com/davidsonfellipe/dotfiles
CONTROLEDE
VERSÃO
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
TASK RUNNER
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
PRÉ-PROCESSADORES
QUALIDADEDE
CÓDIGO
TESTES
PERFORMANCE
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
WEBPAGETEST
WEBPAGETEST
WEBPAGETEST
MAIS TOOLS
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/
SHOWYOURCODE
CONTRIBUAEM
PROJETOSOPENSOURCE
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
COMO SE MANTER ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
http://oswaldoacauan.github.io/keep-up-to-date-brazuca/
AH...É MUITA COISA
PARA ESTUDAR...
www.fellipe.com/talks
slides disponíveis em...
obrigadoCONVESCOTE!github.com/davidsonfellipetwitter.com/davidsonfellipefacebook.com/fellipefellipe.com/talks
