O documento discute a evolução do workflow de desenvolvimento frontend ao longo do tempo, desde a era do Dreamweaver e HTML com tabelas até as ferramentas, frameworks e padrões atuais. Também apresenta diversas ferramentas como editores de código, sistemas de controle de versão, task runners e ferramentas de qualidade de código que podem ser usadas para tornar o desenvolvimento frontend mais eficiente.

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

2. I’mDAVIDSON FELLIPE

3. WORKS

4. ERA UMA VEZ...

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

6. LAYOUT USANDO
TABLE?

7. ENQUANTO ISSO EM 2000...

8. HTML
CSS
2006...

9. precisa saber
JAVASCRIPT?
2006...

10. ATUALMENTE...

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

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

13. XBROWSER
XDEVICE
XPLATFORM

14. XBROWSER
XDEVICE
XPLATFORM

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

16. VAMOS
ARRUMAR
A CASA?

18. EDITORES

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

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

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

22. BRACKETS
http://brackets.io/

23. DOTFILES

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

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

26. CONTROLE
DE
VERSÃO

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

28. https://bitbucket.org/

29. https://github.com/

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

31. TASK RUNNER

32. http://gruntjs.com/

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

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

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

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

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

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

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

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

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

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

43. PRÉ-PROCESSADORES

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

51. QUALIDADE
DE
CÓDIGO

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

53. CSSLINT
http://csslint.net/

54. TESTES

57. PERFORMANCE

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

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

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

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

62. MAIS TOOLS

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

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

67. IMAGEOPTIM
http://imageoptim.com/

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

69. http://html5boilerplate.com/

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

71. COMO SE MANTER
ATUALIZADO?

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

73. 6 SEMANAS?

74. http://html5weekly.com/

75. http://javascriptweekly.com

76. http://braziljs.org/

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

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

80. ELE APENAS
VAI TE DEIXA
MAIS FELIZ

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

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