Guia do Front-end das galáxias

Transcript

1. GUIA DO
   FRONT-END
   DAS
   GALÁXIAS
   Davidson Fellipe v4
   

   View Slide

2. Front in Cuiabá 2015
   Frontend Carioca 2014
   Rupy Natal 2014
   Front in Aracaju 2014
   me
   apresentada em
   

   View Slide

3. HTML ~ 2001
   senior front-end engineer
   globo.com ~ 2010
   mais em fellipe.com
   me
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. marvin,
    Quer ser
    front-end
    

    View Slide

11. ELE ERA
    CURIOSO…
    

    View Slide

12. curiosidade
    É um importante combustível
    para aprender mais, testar coisas
    novas, e lidar com o tentativa e
    erro.
    

    View Slide

13. FRONTEND DEVELOPER
    UI ENGINEER
    WEB DEVELOPER
    PROJETISTA DE INTERFACES
    FRONTEND ENGINEER
    

    View Slide

14. FRONT-END UNICORN
    FRONT-END UX NINJA
    FRONT-END NINJA
    

    View Slide

15. MAS O QUÊ
    FAZ UM?
    

    View Slide

16. HTML
    

    View Slide

17. html
    começando do fazer de qualquer
    jeito
    ao código com sua devida
    semântica
    

    View Slide

18. CSS
    

    View Slide

19. css
    começando do remover
    sublinhado de links
    até sua relevância para
    apresentar visual, animações e
    interações e responsividade
    

    View Slide

20. JAVASCRIPT
    

    View Slide

21. javascript
    da validação de formulários
    até ferramenta de grande
    relevância para melhoria da
    experiência do usuário
    

    View Slide

22. diferentes navegadores
    diferentes versões
    diferentes resoluções
    diferentes dispositivos
    integração
    

    View Slide

23. começou
    a seguir
    referências…
    

    View Slide

24. GRANDES GRINGOS DA ÁREA
    @leaverou
    @paul_irish
    @codepo8
    @souders
    @slicknet
    @stoyanstefanov
    @stubbornella
    @addyosmani
    @rauchg
    @sindresorhus
    @cowboy
    @mathias
    @valueof
    @rmurphey
    

    View Slide

25. @zenorocha
    @marcelduran
    @maujor
    @bergbrandt
    @fabiomcosta
    @eduardolundgren
    @jaydson
    @almirfilho
    @leobalter
    @millermedeiros
    @caio_gondim
    @felipenmoura
    NOMES brazucas DA ÁREA
    @sergio_caelum
    @jcemer
    

    View Slide

26. O QUE PRECISO
    APRENDER?
    

    View Slide

27. HTML, CSS, JAVASCRIPT, FEATURE DETECTION,
    REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP,
    CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES,
    SVG, CANVAS, LOCALSTORAGE,
    WEBCOMPONENTS, WEBSOCKETS,
    SHADOW DOM, FERRAMENTAS PARA DEBUG,
    SISTEMAS DE GRIDS, SCHEMA.ORG, SEO...
    GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC,
    TESTES, ANALISADORES DE QUALIDADE DE
    CÓDIGO, TASK RUNNERS, PERFORMANCE...
    E PORQUE NÃO?
    

    View Slide

28. HTTP://I1-
    NEWS.SOFTPE
    

    View Slide

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

    View Slide

30. COMO POR
    EM PRÁTICA?
    

    View Slide

31. ESCOLHENDO UM
    EDITOR
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. CRIO UM PADRÃO?
    

    View Slide

37. BUSCO POR UM
    PADRÃO?
    

    View Slide

38. View Slide

39. View Slide

40. http://html5boilerplate.com/
    

    View Slide

41. O que aprendo?
    Boa organização de arquivos
    Estrutura do HTML, CSS e JS
    Projetos em constante evolução
    

    View Slide

42. GRANDES
    PROBLEMAS
    

    View Slide

43. http://cubic-bezier.com/#.17,.67,.83,.67
    

    View Slide

44. COMO
    ORGANIZAR
    MEU PROJETO?
    

    View Slide

45. definindo uma estrutura
    

    View Slide

46. padrões
    ponto e vírgula;
    espaços vs tabulações
    aspas simples vs aspas duplas
    nomenclaturas para functions, Object
    Literal, conditional statement...
    

    View Slide

47. https://github.com/rwaldron/idiomatic.js/
    

    View Slide

48. https://github.com/airbnb/javascript
    

    View Slide

49. COMO
    ORGANIZAR
    MEU CSS?
    

    View Slide

50. css nãããããããão
    

    View Slide

51. CSS
    VS
    PRÉ-PROCESSADOR
    

    View Slide

52. vantagens
    produtividade
    facilidade de trabalhar

    com módulos e variáveis
    uso de mixins e placeholders
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. PÉSSIMAS PRÁTICAS
    COM CSS, PODEM SER
    PIORADAS COM
    PRÉ-PROCESSADORES
    

    View Slide

58. fazendo o mal com css
    .bisavo {
    .avo {
    .pai {
    #wtf {
    color: #f60;
    }
    }
    }
    }
    .bisavo .avo .pai #wtf {
    color: #f60;
    }
    SCSS CSS
    

    View Slide

59. http://csslint.net/
    

    View Slide

60. COMO
    ORGANIZAR
    MEU JS?
    

    View Slide

61. APRENDA
    ALGORITMOS!!!
    

    View Slide

62. http://eloquentjavascript.net/
    

    View Slide

63. https://github.com/braziljs/eloquente-javascript
    também em português
    

    View Slide

64. HTTP://I1-
    NEWS.SOFTPE
    <3
    

    View Slide

65. NÃO DESPREZE OS
    CUSTOS DO LADO
    FRONT-END!
    

    View Slide

66. MUITAS VEZES
    OS CUSTOS PODEM
    SER MAIS ALTOS QUE
    OS DO BACK-END!
    

    View Slide

67. aprenda
    Design Patterns
    Inheritance
    Prototype e Promises
    Memoize, Throttle e Debounce
    Detalhes do JSLint
    Escopo de variáveis
    

    View Slide

68. http://www.jshint.com/
    JSHINT
    

    View Slide

69. ESQUEÇA
    FTP COM GUI
    

    View Slide

70. ESQUEÇA
    SVN
    

    View Slide

71. git, mercurial…
    TRABALHAR COM REPOS
    ENTENDER BRANCHES, TAGS
    PULL REQUEST
    ISSUES
    

    View Slide

72. https://github.com/
    

    View Slide

73. https://bitbucket.org/
    

    View Slide

74. COMO GERENCIO
    MEU TEMPO?
    

    View Slide

75. https://trello.com/
    

    View Slide

76. http://www.yast.com/
    

    View Slide

77. https://wakatime.com/
    

    View Slide

78. https://www.rescuetime.com
    

    View Slide

79. COMO
    MANTENHO
    MEU PROJETO?
    

    View Slide

80. http://jasmine.github.io/
    

    View Slide

81. http://qunitjs.com/
    

    View Slide

82. http://visionmedia.github.io/mocha/
    

    View Slide

83. INTEGRAÇÃO
    CONTÍNUA
    

    View Slide

84. View Slide

85. processo de deploy
    

    View Slide

86. TASK
    RUNNERS
    

    View Slide

87. View Slide

88. MAKE
    ANT
    RAKE
    CAKE
    GULP
    GRUNT
    SHELL
    JAVA
    RUBY
    COFFEE
    JS
    JS
    

    View Slide

89. $ make grunt-config
    MAKEFILE
    grunt-config:
    @echo '✖ installing node'; brew install node;
    @echo '✖ installing grunt'; sudo npm install -g grunt-cli;
    @sudo npm i --save-dev
    make
    

    View Slide

90. tasks
    testes
    pré-processadores
    js/css lint
    criar sprites
    concatenação
    otimização de imagens
    

    View Slide

91. task
    compass:prod
    MAKEFILE
    grunt.initConfig({
    compass: {
    dev: { /* ... */ },
    prod: {
    options: {
    sassDir: 'src/scss',
    cssDir: 'build/css',
    imagesDir: 'src/img',
    generatedImagesDir: 'build/img',
    outputStyle: 'compressed',
    noLineComments: true
    }}}}); js
    

    View Slide

92. https://github.com/vigetlabs/grunt-complexity
    

    View Slide

93. executando
    $ grunt compass:dev
    $ grunt compass:prod
    

    View Slide

94. https://github.com/davidsonfellipe/grunt-workflow
    

    View Slide

95. http://bower.io/
    

    View Slide

96. http://yeoman.io/
    

    View Slide

97. automatize suas
    configurações
    https:/
    /github.com/davidsonfellipe/dotfiles
    

    View Slide

98. PERFORMANCE
    

    View Slide

99. Qual impacto da
    performance?
    baixas conversões
    baixo engajamento
    altas taxas de rejeição
    

    View Slide

100. https://github.com/davidsonfellipe/awesome-wpo
     

     View Slide

101. http://browserdiet.com/pt
     

     View Slide

102. https://github.com/davidsonfellipe/keepfast/
     

     View Slide

103. OTIMIZAR A
     EXPERIÊNCIA
     DO USUÁRIO
     

     View Slide

104. View Slide

105. QI
     de 30 bilhões de
     vezes superior ao
     de um ser humano
     

     View Slide

106. COMO SE MANTER
     ATUALIZADO?
     

     View Slide

107. http://braziljs.org/
     

     View Slide

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

     View Slide

109. http://html5weekly.com/
     

     View Slide

110. http://javascriptweekly.com
     

     View Slide

111. View Slide

112. View Slide

113. Aprenda com o
     tempo
     código limpo
     testes
     preocupação com
     manutenibilidade e
     extensibilidade
     

     View Slide

114. View Slide

115. fellipe.com/talks
     github.com/davidsonfellipe
     twitter.com/davidsonfellipe
     obrigado pelos peixes
     

     View Slide