Frontend Engineers: Passado, presente e futuro

Transcript

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