FRONT END ENGINEERS
passado,
presente
e
futuro
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 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,...
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 internaci...
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/too...
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/too...
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/too...
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/too...
http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpghttp://blog.stalker.com.br/wp-content/uploads//2013/04/too...
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
LAYOUT USANDO
TABLE?
ENQUANTO ISSO EM 2000...
HTML
CSS
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
XBROWSER
XDEVICE
XPLATFORM
XBROWSER
XDEVICE
XPLATFORM
http://ondeviceresearch.com/
USUÁRIOS APENAS
MOBILE
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIA
DOS COMPONENTES
outros - incluem conexõ...
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ÕES
WEB
DOTFILES
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
backup
compartilhe
aprenda
automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles
CONTROLE
DE
VERSÃO
https://bitbucket.org/
BITBUCKET VS GITHUB
repos privados
ilimitados
preço baseado no
número de
colaboradores
número de
colaboradores ilimitado
p...
TASK RUNNER
http://gruntjs.com/
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
QUALIDADE
DE
CÓDIGO
JSHINT
http://www.jshint.com/
CSSLINT
http://csslint.net/
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 JavaS...
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
WEBPAGETEST
WEBPAGETEST
WEBPAGETEST
MAIS TOOLS
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
GITIFIER
http://psionides.github.io/Gitifier/
MICROJS
http://microjs.com/#
http://html5boilerplate.com/
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/
SHOW
YOUR
CODE
CONTRIBUA
EM
PROJETOS
OPENSOURCE
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://html5weekly.com/
http://javascriptweekly.com
http://braziljs.org/
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
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Frontend Engineers: passado, presente e futuro
Upcoming SlideShare
Loading in …5
×

Frontend Engineers: passado, presente e futuro

950 views
863 views

Published on

Published in: Technology

Frontend Engineers: passado, presente e futuro

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

×