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 full-size slide

  2. I’m
    DAVIDSON FELLIPE

    View full-size slide

  3. ERA UMA VEZ...

    View full-size slide

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

    View full-size slide

  5. LAYOUT USANDO
    TABLE?

    View full-size slide

  6. ENQUANTO ISSO EM 2000...

    View full-size slide

  7. HTML
    CSS
    2006...

    View full-size slide

  8. precisa saber
    JAVASCRIPT?
    2006...

    View full-size slide

  9. ATUALMENTE...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. XBROWSER
    XDEVICE
    XPLATFORM

    View full-size slide

  13. XBROWSER
    XDEVICE
    XPLATFORM

    View full-size slide

  14. MULTITASKING...
    @flavioribeiro na globo.com

    View full-size slide

  15. VAMOS
    ARRUMAR
    A CASA?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. BRACKETS
    http://brackets.io/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. CONTROLE
    DE
    VERSÃO

    View full-size slide

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

    View full-size slide

  24. https://bitbucket.org/

    View full-size slide

  25. https://github.com/

    View full-size slide

  26. 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 full-size slide

  27. http://gruntjs.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. PRÉ-PROCESSADORES

    View full-size slide

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

    View full-size slide

  40. QUALIDADE
    DE
    CÓDIGO

    View full-size slide

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

    View full-size slide

  42. CSSLINT
    http://csslint.net/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. IMAGEOPTIM
    http://imageoptim.com/

    View full-size slide

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

    View full-size slide

  51. http://html5boilerplate.com/

    View full-size slide

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

    View full-size slide

  53. COMO SE MANTER
    ATUALIZADO?

    View full-size slide

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

    View full-size slide

  55. http://html5weekly.com/

    View full-size slide

  56. http://javascriptweekly.com

    View full-size slide

  57. http://braziljs.org/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. ELE APENAS
    VAI TE DEIXA
    MAIS FELIZ

    View full-size slide

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

    View full-size slide

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

    View full-size slide