Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend Engineers: passado, presente e futuro

1,200 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

×