Os segredos dos Front end Engineers

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