Workflow Open Source para Frontend Developers

Transcript

1. WORKFLOW
   OPENSOURCE
   PARA FRONTEND
   DEVELOPERS
   por davidson fellipe
   www.fellipe.com
   

   View Slide

2. I’m
   DAVIDSON FELLIPE
   

   View Slide

3. WORKS
   

   View Slide

4. ERA UMA VEZ...
   

   View Slide

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

   View Slide

6. LAYOUT USANDO
   TABLE?
   

   View Slide

7. ENQUANTO ISSO EM 2000...
   

   View Slide

8. HTML
   CSS
   2006...
   

   View Slide

9. precisa saber
   JAVASCRIPT?
   2006...
   

   View Slide

10. ATUALMENTE...
    

    View Slide

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

    View Slide

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

    View Slide

13. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

14. XBROWSER
    XDEVICE
    XPLATFORM
    

    View Slide

15. MULTITASKING...
    @flavioribeiro na globo.com
    

    View Slide

16. VAMOS
    ARRUMAR
    A CASA?
    

    View Slide

17. View Slide

18. EDITORES
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. BRACKETS
    http://brackets.io/
    

    View Slide

23. DOTFILES
    

    View Slide

24. DOTFILES.GITHUB.IO
    http://dotfiles.github.io/
    

    View Slide

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

    View Slide

26. CONTROLE
    DE
    VERSÃO
    

    View Slide

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

    View Slide

28. https://bitbucket.org/
    

    View Slide

29. https://github.com/
    

    View Slide

30. BITBUCKET VS GITHUB
    repos privados
    ilimitados
    princing baseado no
    número de
    colaboradores
    número de
    colaboradores ilimitado
    princing baseado no
    número de
    colaboradores
    

    View Slide

31. TASK RUNNER
    

    View Slide

32. http://gruntjs.com/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. PRÉ-PROCESSADORES
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

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

    View Slide

51. QUALIDADE
    DE
    CÓDIGO
    

    View Slide

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

    View Slide

53. CSSLINT
    http://csslint.net/
    

    View Slide

54. TESTES
    

    View Slide

55. View Slide

56. View Slide

57. PERFORMANCE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

62. MAIS TOOLS
    

    View Slide

63. View Slide

64. View Slide

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

    View Slide

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

    View Slide

67. IMAGEOPTIM
    http://imageoptim.com/
    

    View Slide

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

    View Slide

69. http://html5boilerplate.com/
    

    View Slide

70. CONTRIBUA
    http://braziljs.org/projetos/
    http://contribute.jquery.org/
    http://gruntjs.com/contributing
    Pull requests em projetos no github ou bitbucket
    

    View Slide

71. COMO SE MANTER
    ATUALIZADO?
    

    View Slide

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

    View Slide

73. 6 SEMANAS?
    

    View Slide

74. http://html5weekly.com/
    

    View Slide

75. http://javascriptweekly.com
    

    View Slide

76. http://braziljs.org/
    

    View Slide

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

    View Slide

78. View Slide

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

    View Slide

80. ELE APENAS
    VAI TE DEIXA
    MAIS FELIZ
    

    View Slide

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

    View Slide

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

    View Slide