Os segredos dos Front end Engineers

Transcript

1. 1.

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

2. 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
3. 3.

   OUTROS NOMES DA PROFISSÃO front end developer htmler web developer

   implementador de interfaces web UI engineer
4. 4.

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

5. 5.

   O QUE FAZ UM FRONT END ENGINEER?

6. 6.

   APTO A SE COMUNICAR Product Managers End Users Engineering Management

   User Interface Designers
7. 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!
8. 8.

   QUAL FORMAÇÃO ADEQUADA PARA FRONT END ENGINEER?

9. 9.

   INÍCIO NO BRASIL frontend-br no Y! iniciado por um grupo

   de devs de recife
10. 10.

    13 anos atrás

11. 11.

    ÉRAMOS ASSIM...

12. 12.

    HTML CSS 2006...

13. 13.

    precisa saber JAVASCRIPT? 2006...

14. 14.

    HTML CONTEÚDO

15. 15.

    CSS APRESENTAÇÃO

16. 16.

    JAVASCRIPT INTERAÇÃO

17. 17.

    RICH INTERNET APPLICATIONS AJAX MOBILE HTML5 WEB 2.0 BUZZWORDS

18. 18.

    E AGORA?

19. 19.

    None
20. 20.

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

21. 21.

    XBROWSER XDEVICE XPLATFORM

22. 22.

    XBROWSER XDEVICE XPLATFORM

23. 23.

    “engineer” cada vez mais forte

24. 24.

    O QUE PRECISO APRENDER?

25. 25.

    JAVASCRIPT RAW PROTOTYPE XHR JSON FORMAS DE CARREGAMENTO JAVASCRIPT

26. 26.

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

27. 27.

    GIT TRABALHAR COM REPOS ENTENDER BRANCHES PULL REQUEST CODE REVIEW

    CONTROLE DE VERSÃO
28. 28.

    YSLOW PAGESPEED BROWSERDIET.COM UI THREAD JSLITMUS WEBPAGE TESTE PERFORMANCE

29. 29.

    CSSLINT JSHINT QUALIDADE DE CÓDIGO

30. 30.

    COMO SE MANTER ATUALIZADO?

31. 31.

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

32. 32.

    6 SEMANAS?

33. 33.

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

34. 34.

    http://html5weekly.com/

35. 35.

    http://javascriptweekly.com

36. 36.

    http://braziljs.org/

37. 37.

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

38. 38.

    None
39. 39.

    COMO ESCOLHER O QUE ESTUDAR?

40. 40.

    None
41. 41.

    None
42. 42.

    COMEÇANDO PROJETO NOVO? QUANDO ESTOU...

43. 43.

    QUERENDO MELHORAR UM PROCESSO? QUANDO ESTOU...

44. 44.

    FAZENDO BENCHMARK? QUANDO ESTOU...

45. 45.

    PROVA NA FACULDADE

46. 46.

    FERRAMENTAS

47. 47.

    SOCIAL CODING

48. 48.

    None
49. 49.

    None
50. 50.

    WORKFLOW

51. 51.

    None
52. 52.

    None
53. 53.

    None
54. 54.

    http://html5boilerplate.com/

55. 55.

    PRÉ PROCESSADORES

56. 56.

    None
57. 57.

    None
58. 58.

    None
59. 59.

    None
60. 60.

    TESTES

61. 61.

    None
62. 62.

    None
63. 63.

    FUNDAMENTE SUAS DECISÕES

64. 64.

    SCSS OU LESS ? SITUAÇÃO

65. 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?
66. 66.

    FOLLOW REFERÊNCIAS DO MERCADO

67. 67.

    GRANDES NOMES GRINGOS DA ÁREA @leaverou @paul_irish @codepo8 @souders @slicknet

    @stoyanstefanov @stubbornella @addyosmani @firt @jeresig @cowboy @bergbrandt @valueof @rmurphey
68. 68.

    ALGUNS NOMES BRAZUCAS DA ÁREA @zenorocha @marcelduran @maujor @bergbrandt @fabiomcosta

    @eduardolundgren @bernarddeluna @jaydson @irae @leobalter @millermedeiros @keppelen @felipenmoura
69. 69.

    o que faço para ser um bom frontend?

70. 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
71. 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
72. 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
73. 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
74. 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
75. 75.

    INGLÊS PENSAR NO PRODUTO RESOLVER PROBLEMAS SOFTWARE ENGINEERING TRANSMITIR CONHECIMENTO

    UX DIFERENCIAIS
76. 76.

    FAÇA SEU MELHOR!

77. 77.

    None
78. 78.

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

79. 79.

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