Frontend Engineers: Passado, presente e futuro

Transcript

1. FRONT END ENGINEERS
   passado,
   presente
   e
   futuro
   

   View Slide

2. I’m
   DAVIDSON FELLIPE
   

   View Slide

3. WORKS
   

   View Slide

4. View Slide

5. OUTROS NOMES DA
   PROFISSÃO
   front end
   developer
   htmler
   web developer
   implementador
   de interfaces
   web
   UI engineer
   

   View Slide

6. http://www.youtube.com/watch?v=lXGDRrkaRgU
   I’m a
   front end
   engineer
   

   View Slide

7. O QUE FAZ UM
   FRONT END
   ENGINEER?
   

   View Slide

8. APTO A SE COMUNICAR
   Product Managers
   End Users
   Engineering Management
   User Interface Designers
   

   View Slide

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!
   

   View Slide

10. QUAL FORMAÇÃO
    ADEQUADA PARA
    FRONT END
    ENGINEER?
    

    View Slide

11. frontend-br no
    Y!
    iniciado por um
    grupo de devs
    de recife
    COMO COMEÇOU?
    

    View Slide

12. COMUNIDADE HOJE
    Vários evento na área
    + interação
    Projetos de código aberto conhecidos
    Pro!ssionais com destaque internacional
    

    View Slide

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
    

    View Slide

14. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.communityjs.org
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. ERA UMA VEZ...
    

    View Slide

20. http://www.oldversion.com/windows/macromedia-dreamweaver/
    E AINDA...
    

    View Slide

21. LAYOUT USANDO
    TABLE?
    

    View Slide

22. ENQUANTO ISSO EM 2000...
    

    View Slide

23. HTML
    CSS
    2006...
    

    View Slide

24. precisa saber
    JAVASCRIPT?
    2006...
    

    View Slide

25. ATUALMENTE...
    

    View Slide

26. + poderosas
    + complexas
    + ambiciosas
    2013...
    

    View Slide

27. www.igvita.com/slides/2012/devtools-tips-and-tricks/
    CICLO DE VIDA DE UMA
    WEBPAGE
    

    View Slide

28. ATUALMENTE...
    http://httparchive.org/trends.php
    

    View Slide

29. ATUALMENTE...
    http://httparchive.org/trends.php
    

    View Slide

30. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

31. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

32. http://ondeviceresearch.com/
    USUÁRIOS APENAS
    MOBILE
    

    View Slide

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
    

    View Slide

34. websites precisam ter exatamente o
    mesmo visual em todos os browsers?
    

    View Slide

35. View Slide

36. TECNOLOGIAS
    

    View Slide

37. https://twitter.com/slicknet/status/292103833327370240
    

    View Slide

38. MULTITASKING...
    @flavioribeiro na globo.com
    

    View Slide

39. SEMÂNTICA
    FERRAMENTAS
    FRAMEWORKS
    LIBRARIES
    PRÉ
    PROCESSADORES
    SEO
    TESTES
    PADRÕES
    WEB
    

    View Slide

40. DOTFILES
    

    View Slide

41. DOTFILES.GITHUB.IO
    http://dotfiles.github.io/
    backup
    compartilhe
    aprenda
    

    View Slide

42. automatize suas
    configurações
    https://github.com/davidsonfellipe/dotfiles
    

    View Slide

43. CONTROLE
    DE
    VERSÃO
    

    View Slide

44. https://bitbucket.org/
    

    View Slide

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
    

    View Slide

46. TASK RUNNER
    

    View Slide

47. http://gruntjs.com/
    

    View Slide

48. O QUE É O GRUNT?
    É um task runner baseado em linha de comando
    para projetos javascript
    

    View Slide

49. O QUE É O GRUNT?
    Testes
    JS linting
    Concatenando e Minificando
    Otimizando imagens
    Watchers para Pré-processadores
    

    View Slide

50. PRÉ-PROCESSADORES
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. QUALIDADE
    DE
    CÓDIGO
    

    View Slide

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

    View Slide

60. CSSLINT
    http://csslint.net/
    

    View Slide

61. TESTES
    

    View Slide

62. View Slide

63. View Slide

64. PERFORMANCE
    

    View Slide

65. performance de frontend?
    http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    

    View Slide

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
    

    View Slide

67. YSLOW
    http://developer.yahoo.com/yslow/
    

    View Slide

68. YSLOW, MANTENEDOR?
    https://twitter.com/marcelduran
    brasileiro
    @marcelduran
    

    View Slide

69. PAGE SPEED
    https://developers.google.com/speed/pagespeed/insights
    

    View Slide

70. +PERFORMANCE?
    http://browserdiet.com/pt
    

    View Slide

71. TEM ATÉ EM CHINÊS...
    http://browserdiet.com/zh
    

    View Slide

72. SPEEDLIMIT
    http://mschrag.github.io
    

    View Slide

73. JSLITMUS
    http://mschrag.github.io
    

    View Slide

74. WEBPAGETEST
    

    View Slide

75. WEBPAGETEST
    

    View Slide

76. WEBPAGETEST
    

    View Slide

77. MAIS TOOLS
    

    View Slide

78. GRADIENTES?
    http://www.colorzilla.com/gradient-editor/
    

    View Slide

79. GITIFIER
    http://psionides.github.io/Gitifier/
    

    View Slide

80. MICROJS
    http://microjs.com/#
    

    View Slide

81. http://html5boilerplate.com/
    

    View Slide

82. MAS O QUE
    ESTÁ VINDO
    POR AÍ?
    

    View Slide

83. SPDY
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    

    View Slide

84. WEB COMPONENTS
    http://www.w3.org/TR/2013/WD-components-intro-20130606/
    

    View Slide

85. POLYMER
    http://www.polymer-project.org/
    

    View Slide

86. SHOW
    YOUR
    CODE
    

    View Slide

87. CONTRIBUA
    EM
    PROJETOS
    OPENSOURCE
    

    View Slide

88. CONTRIBUA
    http://braziljs.org/projetos/
    http://contribute.jquery.org/
    http://gruntjs.com/contributing
    

    View Slide

89. COMO SE MANTER
    ATUALIZADO?
    

    View Slide

90. https://twitter.com/slicknet/status/292103833327370240
    

    View Slide

91. 6 SEMANAS?
    

    View Slide

92. http://html5weekly.com/
    

    View Slide

93. http://javascriptweekly.com
    

    View Slide

94. http://braziljs.org/
    

    View Slide

95. http://oswaldoacauan.github.io/keep-up-to-date-brazuca/
    

    View Slide

96. AH...
    É MUITA COISA
    PARA ESTUDAR...
    

    View Slide

97. View Slide

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

    View Slide

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

    View Slide

100. View Slide