Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workflow Open Source para Frontend Developers

Workflow Open Source para Frontend Developers

Davidson Fellipe

July 20, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

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