Workflow Open Source para Frontend Developers

1,489 views

Published on

Um Workflow Open Source para Frontend Developers

Published in: Technology

Workflow Open Source para Frontend Developers

  1. 1. WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com
  2. 2. I’mDAVIDSON FELLIPE
  3. 3. WORKS
  4. 4. ERA UMA VEZ...
  5. 5. http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
  6. 6. LAYOUT USANDO TABLE?
  7. 7. ENQUANTO ISSO EM 2000...
  8. 8. HTML CSS 2006...
  9. 9. precisa saber JAVASCRIPT? 2006...
  10. 10. ATUALMENTE...
  11. 11. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
  12. 12. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
  13. 13. XBROWSER XDEVICE XPLATFORM
  14. 14. XBROWSER XDEVICE XPLATFORM
  15. 15. MULTITASKING... @flavioribeiro na globo.com
  16. 16. VAMOS ARRUMAR A CASA?
  17. 17. EDITORES
  18. 18. VIM http://www.vim.org/
  19. 19. SUBLIME http://www.sublimetext.com/
  20. 20. SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE
  21. 21. BRACKETS http://brackets.io/
  22. 22. DOTFILES
  23. 23. DOTFILES.GITHUB.IO http://dotfiles.github.io/
  24. 24. automatize suas configurações https://github.com/davidsonfellipe/dotfiles
  25. 25. CONTROLE DE VERSÃO
  26. 26. git trabalhar com repositórios entender branches pull request code review CONTROLE DE VERSÃO
  27. 27. https://bitbucket.org/
  28. 28. https://github.com/
  29. 29. 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
  30. 30. TASK RUNNER
  31. 31. http://gruntjs.com/
  32. 32. O QUE É O GRUNT? É um task runner baseado em linha de comando para projetos javascript
  33. 33. O QUE É O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pré-processadores
  34. 34. Por que usar o GRUNT? Facil de usar Grande número de plugins Imensa comunidade Open source
  35. 35. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli
  36. 36. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }
  37. 37. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
  38. 38. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima versão no seu folder Adiciona ao package.json
  39. 39. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  40. 40. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  41. 41. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  42. 42. PRÉ-PROCESSADORES
  43. 43. http://usablica.github.io/front-end-frameworks/compare.html
  44. 44. QUALIDADE DE CÓDIGO
  45. 45. JSHINT http://www.jshint.com/
  46. 46. CSSLINT http://csslint.net/
  47. 47. TESTES
  48. 48. PERFORMANCE
  49. 49. YSLOW http://developer.yahoo.com/yslow/
  50. 50. PAGE SPEED https://developers.google.com/speed/pagespeed/insights
  51. 51. +PERFORMANCE? http://browserdiet.com/pt
  52. 52. SPEEDLIMIT http://mschrag.github.io
  53. 53. MAIS TOOLS
  54. 54. GRADIENTES? http://www.colorzilla.com/gradient-editor/
  55. 55. GITIFIER http://psionides.github.io/Gitifier/
  56. 56. IMAGEOPTIM http://imageoptim.com/
  57. 57. MICROJS http://microjs.com/#
  58. 58. http://html5boilerplate.com/
  59. 59. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing Pull requests em projetos no github ou bitbucket
  60. 60. COMO SE MANTER ATUALIZADO?
  61. 61. https://twitter.com/slicknet/status/292103833327370240
  62. 62. 6 SEMANAS?
  63. 63. http://html5weekly.com/
  64. 64. http://javascriptweekly.com
  65. 65. http://braziljs.org/
  66. 66. AH... É MUITA COISA PARA ESTUDAR...
  67. 67. O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU WORKFLOW
  68. 68. ELE APENAS VAI TE DEIXA MAIS FELIZ
  69. 69. OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com
  70. 70. www.fellipe.com/talks slides disponíveis em...

×