$30 off During Our Annual Pro Sale. View Details »

Frontend Engineers: Passado, presente e futuro

Frontend Engineers: Passado, presente e futuro

Davidson Fellipe

August 29, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

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