Save 37% off PRO during our Black Friday Sale! »

Frontend Engineers: Passado, presente e futuro

054c583ad5dc09a861874e14dcb43e4c?s=47 Davidson Fellipe
August 29, 2013
Programming
2
170

Frontend Engineers: Passado, presente e futuro

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

August 29, 2013
Tweet

More Decks by Davidson Fellipe

See All by Davidson Fellipe
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
1
76
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
0
320
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
3
210
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
2
86
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
3
78
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
1
110
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
0
51
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
9
500
054c583ad5dc09a861874e14dcb43e4c?s=48 fellipe
6
410

Other Decks in Programming

See All in Programming
87e6be3b5dcac822e5dfd974ba65045a?s=48 sammy7th
0
230
2e43817e39d87da5d9d4efd6310c0d44?s=48 kafumi
1
300
C400a6dc29b681f0284fd33c468e396e?s=48 shimotaroo
0
220
Fe9968bc3922faa77939286afda905de?s=48 chloe463
0
1.4k
Fe05cd1ac317a2b94eedc0f45cacc424?s=48 akiroom
0
520
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
180
B5c79b428fca86c70fd59d1c27a980d8?s=48 kkuchta
0
200
E3c2bac7a4a04823dda122cf243edd01?s=48 claudioed
0
180
62a14b322f22ab9588702ab2064df63f?s=48 shanpu
0
280
E505897a79eede1a676f92740261e8f8?s=48 kubode
0
310
6362c07dc6c77f281f73285cea2f2d5c?s=48 kzkn
0
100
0ecada41f471c45033ee166c37819915?s=48 artoy
0
180

Featured

See All Featured
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
21k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
980k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
44
3.5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
497
110k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
100
15k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
5.4k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
2.9k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
123
8.3k

Transcript

  1. FRONT END ENGINEERS passado, presente e futuro

  2. I’m DAVIDSON FELLIPE

  3. WORKS

  4. None

  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?
  35. None

  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

  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None

  58. QUALIDADE DE CÓDIGO

  59. JSHINT http://www.jshint.com/

  60. CSSLINT http://csslint.net/

  61. TESTES

  62. None
  63. None

  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...

  97. None

  98. www.fellipe.com/talks slides disponíveis em...

  99. obrigado CONVESCOTE! github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com/talks

  100. None