WORKFLOW
OPENSOURCE
PARA FRONTEND
DEVELOPERS
por davidson fellipe
www.fellipe.com
I’mDAVIDSON FELLIPE
WORKS
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...
LAYOUT USANDO
TABLE?
ENQUANTO ISSO EM 2000...
HTML
CSS
2006...
precisa saber
JAVASCRIPT?
2006...
ATUALMENTE...
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
XBROWSER
XDEVICE
XPLATFORM
XBROWSER
XDEVICE
XPLATFORM
MULTITASKING...
@flavioribeiro na globo.com
VAMOS
ARRUMAR
A CASA?
EDITORES
VIM
http://www.vim.org/
SUBLIME
http://www.sublimetext.com/
SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCE
NEM FREE
BRACKETS
http://brackets.io/
DOTFILES
DOTFILES.GITHUB.IO
http://dotfiles.github.io/
automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles
CONTROLE
DE
VERSÃO
git
trabalhar com repositórios
entender branches
pull request
code review
CONTROLE DE VERSÃO
https://bitbucket.org/
https://github.com/
BITBUCKET VS GITHUB
repos privados
ilimitados
princing baseado no
número de
colaboradores
número de
colaboradores ilimitad...
TASK RUNNER
http://gruntjs.com/
O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript
O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watches para Pré-processadores
Por que usar o GRUNT?
Facil de usar
Grande número de plugins
Imensa comunidade
Open source
Instalados e gerenciados via NPM (node.js)
Adiciona grunt command no system path
INICIANDO COM GRUNT
$ npm install -g grun...
package.json
{
"name": "project-name",
"version": "0.1.0",
"description": "Project description"
}
gruntfile.js
module.exports = function( grunt ) {
grunt.initConfig({
// configuracoes
});
//plugins
grunt.loadNpmTasks( 'p...
INSTALANDO GRUNT
$ npm install grunt --save-dev
Instala a ultima versão no seu folder
Adiciona ao package.json
ANT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
RAKE
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
GRUNT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
PRÉ-PROCESSADORES
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADE
DE
CÓDIGO
JSHINT
http://www.jshint.com/
CSSLINT
http://csslint.net/
TESTES
PERFORMANCE
YSLOW
http://developer.yahoo.com/yslow/
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE?
http://browserdiet.com/pt
SPEEDLIMIT
http://mschrag.github.io
MAIS TOOLS
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
GITIFIER
http://psionides.github.io/Gitifier/
IMAGEOPTIM
http://imageoptim.com/
MICROJS
http://microjs.com/#
http://html5boilerplate.com/
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
Pull requests em pro...
COMO SE MANTER
ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
http://html5weekly.com/
http://javascriptweekly.com
http://braziljs.org/
AH...
É MUITA COISA
PARA ESTUDAR...
O SUCESSO DE SUA APP
NÃO DEPENDE APENAS
DE SEU WORKFLOW
ELE APENAS
VAI TE DEIXA
MAIS FELIZ
OBRIGADO
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com
www.fellipe.com/talks
slides disponíveis em...
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Workflow Open Source para Frontend Developers
Próximos SlideShares
Carregando em…5
×

Workflow Open Source para Frontend Developers

1.526 visualizações

Publicada em

Um Workflow Open Source para Frontend Developers

Publicada em: Tecnologia
0 comentários
16 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.526
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
16
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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...

×