Turbinando seu workflow para o desenvolvimento de webapps

A área de desenvolvimento front-end é cheia de grandes desafios, sejam eles voltados para mobile, web ou desktop. Sendo assim quais frameworks, ferramentas e bibliotecas são relevantes? e quanto a performance? Venha conhecer dicas de como encarar seu dia-a-dia, amando seu workflow.

Transcript

1. TURBINANDO SEU
   WORKFLOW PARA O
   DESENVOLVIMENTO DE
   WEBAPPS
   por davidson fellipe
   www.fellipe.com
   http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
   

   View Slide

2. I’m
   DAVIDSON FELLIPE
   

   View Slide

3. WORKS
   

   View Slide

4. View Slide

5. ESCOLHAS...
   http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg
   

   View Slide

6. ERA UMA VEZ...
   

   View Slide

7. http://www.oldversion.com/windows/macromedia-dreamweaver/
   E AINDA...
   

   View Slide

8. LAYOUT USANDO
   TABLE?
   

   View Slide

9. ENQUANTO ISSO EM 2000...
   

   View Slide

10. HTML
    CSS
    2006...
    

    View Slide

11. precisa saber
    JAVASCRIPT?
    2006...
    

    View Slide

12. ATUALMENTE...
    

    View Slide

13. + poderosas
    + complexas
    + ambiciosas
    2013...
    

    View Slide

14. www.igvita.com/slides/2012/devtools-tips-and-tricks/
    CICLO DE VIDA DE UMA
    WEBPAGE
    

    View Slide

15. ATUALMENTE...
    http://httparchive.org/trends.php
    

    View Slide

16. ATUALMENTE...
    http://httparchive.org/trends.php
    

    View Slide

17. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

18. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

19. http://ondeviceresearch.com/
    USUÁRIOS APENAS
    MOBILE
    

    View Slide

20. Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
    CONSUMO ENERGIA
    DOS COMPONENTES
    outros - incluem conexões 3G e text rendering
    css e js - maior consumo relacionado a transmissão e rendering
    

    View Slide

21. websites precisam ter exatamente o
    mesmo visual em todos os browsers?
    

    View Slide

22. View Slide

23. COMO MELHORAR
    MEU WORKFLOW
    DIANTE DESSES
    DESAFIOS?
    

    View Slide

24. TECNOLOGIAS
    

    View Slide

25. MULTITASKING...
    @flavioribeiro na globo.com
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. EDITORES
    

    View Slide

30. VIM
    http://www.vim.org/
    

    View Slide

31. SUBLIME
    http://www.sublimetext.com/
    

    View Slide

32. SUBLIME
    http://www.sublimetext.com/
    NÃO É OPEN SOUCE
    NEM FREE
    

    View Slide

33. BRACKETS
    http://brackets.io/
    

    View Slide

34. DOTFILES
    

    View Slide

35. DOTFILES.GITHUB.IO
    http://dotfiles.github.io/
    backup
    compartilhe
    aprenda
    

    View Slide

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

    View Slide

37. CONTROLE
    DE
    VERSÃO
    

    View Slide

38. git
    trabalhar com repositórios
    entender branches
    pull request
    code review
    CONTROLE DE VERSÃO
    

    View Slide

39. https://bitbucket.org/
    

    View Slide

40. https://github.com/
    

    View Slide

41. BITBUCKET VS GITHUB
    repos privados
    ilimitados
    preço baseado no
    número de
    colaboradores
    número de
    colaboradores ilimitado
    preço baseado no
    número de repositórios
    privados
    

    View Slide

42. TASK RUNNER
    

    View Slide

43. http://gruntjs.com/
    

    View Slide

44. O QUE É O GRUNT?
    É um task runner baseado em linha de comando
    para projetos javascript
    

    View Slide

45. O QUE É O GRUNT?
    Testes
    JS linting
    Concatenando e Minificando
    Otimizando imagens
    Watches para Pré-processadores
    

    View Slide

46. Por que usar o GRUNT?
    Facil de usar
    Grande número de plugins
    Imensa comunidade
    Open source
    

    View Slide

47. Instalados e gerenciados via NPM (node.js)
    Adiciona grunt command no system path
    INICIANDO COM GRUNT
    $ npm install -g grunt-cli
    

    View Slide

48. package.json
    {
    "name": "project-name",
    "version": "0.1.0",
    "description": "Project description"
    }
    

    View Slide

49. gruntfile.js
    module.exports = function( grunt ) {
    grunt.initConfig({
    // configuracoes
    });
    //plugins
    grunt.loadNpmTasks( 'plugin-name' );
    //tarefas
    grunt.registerTask( 'default', [ 'watch' ] );
    };
    

    View Slide

50. INSTALANDO GRUNT
    $ npm install grunt --save-dev
    Instala a ultima versão no seu folder
    Adiciona ao package.json
    

    View Slide

51. ANT
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    

    View Slide

52. RAKE
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    

    View Slide

53. GRUNT
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    

    View Slide

54. PRÉ-PROCESSADORES
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. http://usablica.github.io/front-end-frameworks/compare.html
    

    View Slide

63. QUALIDADE
    DE
    CÓDIGO
    

    View Slide

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

    View Slide

65. CSSLINT
    http://csslint.net/
    

    View Slide

66. TESTES
    

    View Slide

67. View Slide

68. View Slide

69. PERFORMANCE
    

    View Slide

70. http://www.akamai.com/stateoftheinternet/
    

    View Slide

71. http://www.akamai.com/stateoftheinternet/
    SÓ QUE
    NÃO!!!!!
    

    View Slide

72. performance de frontend?
    http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    

    View Slide

73. PRINCIPAIS CUIDADOS
    ● Minificar CSS, JavaScript e HTML
    ● Inline images, CSS, e JavaScript
    ● Cache de assets
    ● Defer JavaScript
    ● Concatenar CSS e JavaScript
    ● Compressão de imagens & resizing
    

    View Slide

74. YSLOW
    http://developer.yahoo.com/yslow/
    

    View Slide

75. YSLOW, MANTENEDOR?
    https://twitter.com/marcelduran
    brasileiro
    @marcelduran
    

    View Slide

76. PAGE SPEED
    https://developers.google.com/speed/pagespeed/insights
    

    View Slide

77. +PERFORMANCE?
    http://browserdiet.com/pt
    

    View Slide

78. TEM ATÉ EM CHINÊS...
    http://browserdiet.com/zh
    

    View Slide

79. SPEEDLIMIT
    http://mschrag.github.io
    

    View Slide

80. JSLITMUS
    http://mschrag.github.io
    

    View Slide

81. WEBPAGETEST
    

    View Slide

82. WEBPAGETEST
    

    View Slide

83. WEBPAGETEST
    

    View Slide

84. MAIS TOOLS
    

    View Slide

85. GRADIENTES?
    http://www.colorzilla.com/gradient-editor/
    

    View Slide

86. GITIFIER
    http://psionides.github.io/Gitifier/
    

    View Slide

87. MICROJS
    http://microjs.com/#
    

    View Slide

88. http://html5boilerplate.com/
    

    View Slide

89. BUSQUE
    SEU
    WORKFLOW
    

    View Slide

90. MAS...
    

    View Slide

91. NUNCA EXISTIRÁ
    WORKFLOW
    DEFINITIVO!!!
    

    View Slide

92. LEMBRE-SE
    DAS
    6 SEMANAS...
    

    View Slide

93. MAS O QUE
    ESTÁ VINDO
    POR AÍ?
    

    View Slide

94. SPDY
    http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
    

    View Slide

95. WEB COMPONENTS
    http://www.w3.org/TR/2013/WD-components-intro-20130606/
    

    View Slide

96. POLYMER
    http://www.polymer-project.org/
    

    View Slide

97. SHOW
    YOUR
    CODE
    

    View Slide

98. CONTRIBUA
    EM
    PROJETOS
    OPENSOURCE
    

    View Slide

99. CONTRIBUA
    http://braziljs.org/projetos/
    http://contribute.jquery.org/
    http://gruntjs.com/contributing
    

    View Slide

100. COMO SE MANTER
     ATUALIZADO?
     

     View Slide

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

     View Slide

102. 6 SEMANAS?
     

     View Slide

103. http://html5weekly.com/
     

     View Slide

104. http://javascriptweekly.com
     

     View Slide

105. http://braziljs.org/
     

     View Slide

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

     View Slide

107. View Slide

108. O SUCESSO DE SUA APP
     NÃO DEPENDE APENAS
     DE SEU WORKFLOW
     

     View Slide

109. ELE APENAS
     VAI TE DEIXA
     MAIS FELIZ
     

     View Slide

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

     View Slide

111. OBRIGADO
     github.com/davidsonfellipe
     twitter.com/davidsonfellipe
     facebook.com/fellipe
     fellipe.com
     

     View Slide