Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Os segredos dos Front end Engineers

Os segredos dos Front end Engineers

Davidson Fellipe

April 14, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. OS SEGREDOS DOS
    FRONT END
    ENGINEERS
    por davidson fellipe
    www.fellipe.com

    View Slide

  2. comecei estudar html em 2000
    front end engineer na globo.com desde 2010
    co-fundador do braziljs foundation
    organizador do rio.js, front in bh, pernambucojs
    mestrando na puc-rio

    View Slide

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

    View Slide

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

    View Slide

  5. O QUE FAZ UM
    FRONT END
    ENGINEER?

    View Slide

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

    View Slide

  7. “é o profissional 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

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

    View Slide

  9. INÍCIO NO BRASIL
    frontend-br no Y!
    iniciado por um
    grupo de devs de
    recife

    View Slide

  10. 13
    anos atrás

    View Slide

  11. ÉRAMOS ASSIM...

    View Slide

  12. HTML
    CSS
    2006...

    View Slide

  13. precisa saber
    JAVASCRIPT?
    2006...

    View Slide

  14. HTML
    CONTEÚDO

    View Slide

  15. CSS
    APRESENTAÇÃO

    View Slide

  16. JAVASCRIPT
    INTERAÇÃO

    View Slide

  17. RICH INTERNET
    APPLICATIONS
    AJAX
    MOBILE
    HTML5
    WEB 2.0
    BUZZWORDS

    View Slide

  18. E AGORA?

    View Slide

  19. View Slide

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

    View Slide

  21. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

  22. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

  23. “engineer”
    cada vez mais forte

    View Slide

  24. O QUE PRECISO
    APRENDER?

    View Slide

  25. JAVASCRIPT RAW
    PROTOTYPE
    XHR
    JSON
    FORMAS DE CARREGAMENTO
    JAVASCRIPT

    View Slide

  26. CSS RAW
    MEDIA QUERIES
    COMPASS
    LESS/SCSS/SASS
    CSS
    PRÉ PROCESSADORES

    View Slide

  27. GIT
    TRABALHAR COM REPOS
    ENTENDER BRANCHES
    PULL REQUEST
    CODE REVIEW
    CONTROLE DE VERSÃO

    View Slide

  28. YSLOW
    PAGESPEED
    BROWSERDIET.COM
    UI THREAD
    JSLITMUS
    WEBPAGE TESTE
    PERFORMANCE

    View Slide

  29. CSSLINT
    JSHINT
    QUALIDADE DE CÓDIGO

    View Slide

  30. COMO SE MANTER
    ATUALIZADO?

    View Slide

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

    View Slide

  32. 6 SEMANAS?

    View Slide

  33. http://web-design-weekly.com/

    View Slide

  34. http://html5weekly.com/

    View Slide

  35. http://javascriptweekly.com

    View Slide

  36. http://braziljs.org/

    View Slide

  37. AH...
    É MUITA COISA
    PARA ESTUDAR...

    View Slide

  38. View Slide

  39. COMO ESCOLHER
    O QUE
    ESTUDAR?

    View Slide

  40. View Slide

  41. View Slide

  42. COMEÇANDO
    PROJETO NOVO?
    QUANDO ESTOU...

    View Slide

  43. QUERENDO MELHORAR
    UM PROCESSO?
    QUANDO ESTOU...

    View Slide

  44. FAZENDO
    BENCHMARK?
    QUANDO ESTOU...

    View Slide

  45. PROVA NA
    FACULDADE

    View Slide

  46. FERRAMENTAS

    View Slide

  47. SOCIAL CODING

    View Slide

  48. View Slide

  49. View Slide

  50. WORKFLOW

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. http://html5boilerplate.com/

    View Slide

  55. PRÉ
    PROCESSADORES

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. TESTES

    View Slide

  61. View Slide

  62. View Slide

  63. FUNDAMENTE
    SUAS
    DECISÕES

    View Slide

  64. SCSS
    OU
    LESS
    ?
    SITUAÇÃO

    View Slide

  65. ENUMERE QUESTÕES
    Qual tem menos bugs?
    Qual tem uma comunidade mais ativa?
    Qual tem a menor curva de aprendizado?
    Qual tem melhor performance?
    Quais tem as melhores ferramentas?

    View Slide

  66. FOLLOW
    REFERÊNCIAS
    DO MERCADO

    View Slide

  67. GRANDES NOMES GRINGOS DA ÁREA
    @leaverou
    @paul_irish
    @codepo8
    @souders
    @slicknet
    @stoyanstefanov
    @stubbornella
    @addyosmani
    @firt
    @jeresig
    @cowboy @bergbrandt
    @valueof
    @rmurphey

    View Slide

  68. ALGUNS NOMES BRAZUCAS DA ÁREA
    @zenorocha
    @marcelduran
    @maujor
    @bergbrandt
    @fabiomcosta
    @eduardolundgren
    @bernarddeluna
    @jaydson
    @irae
    @leobalter
    @millermedeiros
    @keppelen
    @felipenmoura

    View Slide

  69. o que faço
    para ser um bom
    frontend?

    View Slide

  70. “Leia muito, saiba trabalhar em
    equipe, tenha noções de design e
    seja um excelente programador”
    Fábio Costa
    Front end Engineer no Facebook

    View Slide

  71. “Precisa ter paixão por conectar
    pessoas a projetos, ter paixão por levar
    a informação da melhor forma possível
    ao usuário, precisa ser a interface,
    como o macarrão em ‘A Dama e o
    Vagabundo’, você é o macarrão!”
    Bernard de Luna
    Product Designer na Estante Virtual

    View Slide

  72. “Mantenha-se curioso e faminto
    por conhecimento, dê valor ao
    poder da comunidade e saiba
    tornar seu trabalho em diversão”
    Felipe N. Moura
    Front end Engineer no Terra

    View Slide

  73. “Ser faminto por comunidades e ajudar
    pessoas, criar projetos próprios ou open
    source. Ame o que faz e será o melhor
    Front end do Planeta”
    Giovanni Keppelen
    Front end Engineer na Mobicare

    View Slide

  74. “Seja bom no que faz. Seja um bom programador.
    Estude lógica. Estude tecnologias diferentes. Leia
    diariamente. Saiba tudo que está acontecendo no
    mundo front-end. Participe de projetos open-
    source. Assista palestras. Dê palestras. Converse
    com outras pessoas. Estude mais. Estude mais um
    pouco. Trabalhe bastante. Trabalhe anos na área.
    Muitos anos. Só assim, tu pode te considerar um
    bom front-end”
    Jaydson Gomes
    Front end Engineer no Terra

    View Slide

  75. INGLÊS
    PENSAR NO PRODUTO
    RESOLVER PROBLEMAS
    SOFTWARE ENGINEERING
    TRANSMITIR CONHECIMENTO
    UX
    DIFERENCIAIS

    View Slide

  76. FAÇA SEU
    MELHOR!

    View Slide

  77. View Slide

  78. OBRIGADO
    NOVO HAMBURGO!
    github.com/davidsonfellipe
    twitter.com/davidsonfellipe
    facebook.com/fellipe
    fellipe.com

    View Slide

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

    View Slide