frontend engineers: passado, presente e futuro
TRANSCRIPT
![Page 1: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/1.jpg)
FRONT END ENGINEERS
passado, presenteefuturo
![Page 2: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/2.jpg)
I’mDAVIDSON FELLIPE
![Page 3: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/3.jpg)
WORKS
![Page 4: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/4.jpg)
![Page 5: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/5.jpg)
OUTROS NOMES DA PROFISSÃO
front end developer
htmler
web developerimplementador de interfaces
web
UI engineer
![Page 6: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/6.jpg)
http://www.youtube.com/watch?v=lXGDRrkaRgU
I’m a front end engineer
![Page 7: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/7.jpg)
O QUE FAZ UM
FRONT ENDENGINEER?
![Page 8: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/8.jpg)
APTO A SE COMUNICAR
Product Managers
End Users
Engineering Management
User Interface Designers
![Page 9: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/9.jpg)
“é 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!
![Page 10: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/10.jpg)
QUAL FORMAÇÃO ADEQUADA PARA
FRONT ENDENGINEER?
![Page 11: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/11.jpg)
frontend-br no Y!
iniciado por um grupo de devs de recife
COMO COMEÇOU?
![Page 12: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/12.jpg)
COMUNIDADE HOJE
Vários evento na área
+ interação
Projetos de código aberto conhecidos
Pro!ssionais com destaque internacional
![Page 13: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/13.jpg)
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
![Page 14: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/14.jpg)
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://www.communityjs.org
![Page 15: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/15.jpg)
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
![Page 16: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/16.jpg)
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
![Page 17: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/17.jpg)
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
![Page 18: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/18.jpg)
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
![Page 19: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/19.jpg)
ERA UMA VEZ...
![Page 20: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/20.jpg)
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
![Page 21: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/21.jpg)
LAYOUT USANDO TABLE?
![Page 22: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/22.jpg)
ENQUANTO ISSO EM 2000...
![Page 23: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/23.jpg)
HTMLCSS
2006...
![Page 24: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/24.jpg)
precisa saber
JAVASCRIPT?
2006...
![Page 25: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/25.jpg)
ATUALMENTE...
![Page 26: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/26.jpg)
+ poderosas+ complexas+ ambiciosas
2013...
![Page 27: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/27.jpg)
www.igvita.com/slides/2012/devtools-tips-and-tricks/
CICLO DE VIDA DE UMA WEBPAGE
![Page 28: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/28.jpg)
ATUALMENTE...
http://httparchive.org/trends.php
![Page 29: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/29.jpg)
ATUALMENTE...
http://httparchive.org/trends.php
![Page 30: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/30.jpg)
XBROWSERXDEVICEXPLATFORM
![Page 31: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/31.jpg)
XBROWSERXDEVICEXPLATFORM
![Page 32: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/32.jpg)
http://ondeviceresearch.com/
USUÁRIOS APENAS MOBILE
![Page 33: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/33.jpg)
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
![Page 34: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/34.jpg)
websites precisam ter exatamente o mesmo visual em todos os browsers?
![Page 35: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/35.jpg)
![Page 36: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/36.jpg)
TECNOLOGIAS
![Page 37: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/37.jpg)
https://twitter.com/slicknet/status/292103833327370240
![Page 38: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/38.jpg)
MULTITASKING...
@flavioribeiro na globo.com
![Page 39: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/39.jpg)
SEMÂNTICA
FERRAMENTAS FRAMEWORKS
LIBRARIES
PRÉPROCESSADORES
SEO
TESTES
PADRÕESWEB
![Page 40: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/40.jpg)
DOTFILES
![Page 41: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/41.jpg)
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda
![Page 42: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/42.jpg)
automatize suasconfigurações
https://github.com/davidsonfellipe/dotfiles
![Page 43: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/43.jpg)
CONTROLEDE
VERSÃO
![Page 45: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/45.jpg)
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
![Page 46: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/46.jpg)
TASK RUNNER
![Page 48: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/48.jpg)
O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript
![Page 49: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/49.jpg)
O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watchers para Pré-processadores
![Page 50: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/50.jpg)
PRÉ-PROCESSADORES
![Page 51: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/51.jpg)
![Page 52: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/52.jpg)
![Page 53: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/53.jpg)
![Page 54: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/54.jpg)
![Page 55: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/55.jpg)
![Page 56: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/56.jpg)
![Page 57: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/57.jpg)
![Page 58: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/58.jpg)
QUALIDADEDE
CÓDIGO
![Page 61: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/61.jpg)
TESTES
![Page 62: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/62.jpg)
![Page 63: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/63.jpg)
![Page 64: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/64.jpg)
PERFORMANCE
![Page 65: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/65.jpg)
performance de frontend?
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
![Page 66: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/66.jpg)
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
![Page 67: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/67.jpg)
YSLOW
http://developer.yahoo.com/yslow/
![Page 68: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/68.jpg)
YSLOW, MANTENEDOR?
https://twitter.com/marcelduran
brasileiro
@marcelduran
![Page 69: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/69.jpg)
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
![Page 70: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/70.jpg)
+PERFORMANCE?
http://browserdiet.com/pt
![Page 71: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/71.jpg)
TEM ATÉ EM CHINÊS...
http://browserdiet.com/zh
![Page 74: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/74.jpg)
WEBPAGETEST
![Page 75: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/75.jpg)
WEBPAGETEST
![Page 76: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/76.jpg)
WEBPAGETEST
![Page 77: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/77.jpg)
MAIS TOOLS
![Page 78: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/78.jpg)
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
![Page 79: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/79.jpg)
GITIFIER
http://psionides.github.io/Gitifier/
![Page 82: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/82.jpg)
MAS O QUE ESTÁ VINDO
POR AÍ?
![Page 83: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/83.jpg)
SPDY
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
![Page 84: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/84.jpg)
WEB COMPONENTS
http://www.w3.org/TR/2013/WD-components-intro-20130606/
![Page 85: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/85.jpg)
POLYMER
http://www.polymer-project.org/
![Page 86: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/86.jpg)
SHOWYOURCODE
![Page 87: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/87.jpg)
CONTRIBUAEM
PROJETOSOPENSOURCE
![Page 88: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/88.jpg)
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
![Page 89: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/89.jpg)
COMO SE MANTER ATUALIZADO?
![Page 90: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/90.jpg)
https://twitter.com/slicknet/status/292103833327370240
![Page 91: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/91.jpg)
6 SEMANAS?
![Page 95: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/95.jpg)
http://oswaldoacauan.github.io/keep-up-to-date-brazuca/
![Page 96: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/96.jpg)
AH...É MUITA COISA
PARA ESTUDAR...
![Page 97: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/97.jpg)
![Page 98: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/98.jpg)
www.fellipe.com/talks
slides disponíveis em...
![Page 99: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/99.jpg)
obrigadoCONVESCOTE!github.com/davidsonfellipetwitter.com/davidsonfellipefacebook.com/fellipefellipe.com/talks
![Page 100: Frontend Engineers: passado, presente e futuro](https://reader036.vdocuments.net/reader036/viewer/2022081514/554f6589b4c905bb178b4a02/html5/thumbnails/100.jpg)