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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  5. O QUE FAZ UM
    FRONT END
    ENGINEER?

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 13
    anos atrás

    View full-size slide

  11. ÉRAMOS ASSIM...

    View full-size slide

  12. HTML
    CSS
    2006...

    View full-size slide

  13. precisa saber
    JAVASCRIPT?
    2006...

    View full-size slide

  14. HTML
    CONTEÚDO

    View full-size slide

  15. CSS
    APRESENTAÇÃO

    View full-size slide

  16. JAVASCRIPT
    INTERAÇÃO

    View full-size slide

  17. RICH INTERNET
    APPLICATIONS
    AJAX
    MOBILE
    HTML5
    WEB 2.0
    BUZZWORDS

    View full-size slide

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

    View full-size slide

  19. XBROWSER
    XDEVICE
    XPLATFORM

    View full-size slide

  20. XBROWSER
    XDEVICE
    XPLATFORM

    View full-size slide

  21. “engineer”
    cada vez mais forte

    View full-size slide

  22. O QUE PRECISO
    APRENDER?

    View full-size slide

  23. JAVASCRIPT RAW
    PROTOTYPE
    XHR
    JSON
    FORMAS DE CARREGAMENTO
    JAVASCRIPT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. CSSLINT
    JSHINT
    QUALIDADE DE CÓDIGO

    View full-size slide

  28. COMO SE MANTER
    ATUALIZADO?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. http://html5weekly.com/

    View full-size slide

  32. http://javascriptweekly.com

    View full-size slide

  33. http://braziljs.org/

    View full-size slide

  34. AH...
    É MUITA COISA
    PARA ESTUDAR...

    View full-size slide

  35. COMO ESCOLHER
    O QUE
    ESTUDAR?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. FAZENDO
    BENCHMARK?
    QUANDO ESTOU...

    View full-size slide

  39. PROVA NA
    FACULDADE

    View full-size slide

  40. SOCIAL CODING

    View full-size slide

  41. http://html5boilerplate.com/

    View full-size slide

  42. PRÉ
    PROCESSADORES

    View full-size slide

  43. FUNDAMENTE
    SUAS
    DECISÕES

    View full-size slide

  44. SCSS
    OU
    LESS
    ?
    SITUAÇÃO

    View full-size slide

  45. 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 full-size slide

  46. FOLLOW
    REFERÊNCIAS
    DO MERCADO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. “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 full-size slide

  51. “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 full-size slide

  52. “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 full-size slide

  53. “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 full-size slide

  54. “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 full-size slide

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

    View full-size slide

  56. FAÇA SEU
    MELHOR!

    View full-size slide

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

    View full-size slide

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

    View full-size slide