TURBINANDO SEU
WORKFLOW PARA O
DESENVOLVIMENTO DE
WEBAPPS
por davidson fellipe
www.fellipe.com
http://blog.stalker.com.br/...
I’mDAVIDSON FELLIPE
WORKS
ESCOLHAS...
http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg
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...
+ poderosas
+ complexas
+ ambiciosas
2013...
www.igvita.com/slides/2012/devtools-tips-and-tricks/
CICLO DE VIDA DE UMA
WEBPAGE
ATUALMENTE...
http://httparchive.org/trends.php
ATUALMENTE...
http://httparchive.org/trends.php
XBROWSER
XDEVICE
XPLATFORM
XBROWSER
XDEVICE
XPLATFORM
http://ondeviceresearch.com/
USUÁRIOS APENAS
MOBILE
Who Killed My Battery: Analyzing Mobile Browser Energy Consumption
CONSUMO ENERGIA
DOS COMPONENTES
outros - incluem conexõ...
websites precisam ter exatamente o
mesmo visual em todos os browsers?
COMO MELHORAR
MEU WORKFLOW
DIANTE DESSES
DESAFIOS?
TECNOLOGIAS
MULTITASKING...
@flavioribeiro na globo.com
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB
https://twitter.com/slicknet/status/292103833327370240
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/
backup
compartilhe
aprenda
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
preço baseado no
número de
colaboradores
número de
colaboradores ilimitado
p...
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
http://www.akamai.com/stateoftheinternet/
http://www.akamai.com/stateoftheinternet/
SÓ QUE
NÃO!!!!!
performance de frontend?
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
PRINCIPAIS CUIDADOS
● Minificar CSS, JavaScript e HTML
● Inline images, CSS, e JavaScript
● Cache de assets
● Defer JavaSc...
YSLOW
http://developer.yahoo.com/yslow/
YSLOW, MANTENEDOR?
https://twitter.com/marcelduran
brasileiro
@marcelduran
PAGE SPEED
https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE?
http://browserdiet.com/pt
TEM ATÉ EM CHINÊS...
http://browserdiet.com/zh
SPEEDLIMIT
http://mschrag.github.io
JSLITMUS
http://mschrag.github.io
WEBPAGETEST
WEBPAGETEST
WEBPAGETEST
MAIS TOOLS
GRADIENTES?
http://www.colorzilla.com/gradient-editor/
GITIFIER
http://psionides.github.io/Gitifier/
MICROJS
http://microjs.com/#
http://html5boilerplate.com/
BUSQUE
SEU
WORKFLOW
MAS...
NUNCA EXISTIRÁ
WORKFLOW
DEFINITIVO!!!
LEMBRE-SE
DAS
6 SEMANAS...
MAS O QUE
ESTÁ VINDO
POR AÍ?
SPDY
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
WEB COMPONENTS
http://www.w3.org/TR/2013/WD-components-intro-20130606/
POLYMER
http://www.polymer-project.org/
SHOW
YOUR
CODE
CONTRIBUA
EM
PROJETOS
OPENSOURCE
CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
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
www.fellipe.com/talks
slides disponíveis em...
OBRIGADO
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Turbinando seu workflow para o desenvolvimento de webapps
Upcoming SlideShare
Loading in …5
×

Turbinando seu workflow para o desenvolvimento de webapps

1,718 views

Published on

A área de desenvolvimento front-end é cheia de grandes desafios, sejam eles voltados para mobile, web ou desktop. Sendo assim quais frameworks, ferramentas e bibliotecas são relevantes? e quanto a performance? Venha conhecer dicas de como encarar seu dia-a-dia, amando seu workflow.

Published in: Technology

Turbinando seu workflow para o desenvolvimento de webapps

  1. 1. TURBINANDO SEU WORKFLOW PARA O DESENVOLVIMENTO DE WEBAPPS por davidson fellipe www.fellipe.com http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
  2. 2. I’mDAVIDSON FELLIPE
  3. 3. WORKS
  4. 4. ESCOLHAS... http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg
  5. 5. ERA UMA VEZ...
  6. 6. http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
  7. 7. LAYOUT USANDO TABLE?
  8. 8. ENQUANTO ISSO EM 2000...
  9. 9. HTML CSS 2006...
  10. 10. precisa saber JAVASCRIPT? 2006...
  11. 11. ATUALMENTE...
  12. 12. + poderosas + complexas + ambiciosas 2013...
  13. 13. www.igvita.com/slides/2012/devtools-tips-and-tricks/ CICLO DE VIDA DE UMA WEBPAGE
  14. 14. ATUALMENTE... http://httparchive.org/trends.php
  15. 15. ATUALMENTE... http://httparchive.org/trends.php
  16. 16. XBROWSER XDEVICE XPLATFORM
  17. 17. XBROWSER XDEVICE XPLATFORM
  18. 18. http://ondeviceresearch.com/ USUÁRIOS APENAS MOBILE
  19. 19. Who Killed My Battery: Analyzing Mobile Browser Energy Consumption CONSUMO ENERGIA DOS COMPONENTES outros - incluem conexões 3G e text rendering css e js - maior consumo relacionado a transmissão e rendering
  20. 20. websites precisam ter exatamente o mesmo visual em todos os browsers?
  21. 21. COMO MELHORAR MEU WORKFLOW DIANTE DESSES DESAFIOS?
  22. 22. TECNOLOGIAS
  23. 23. MULTITASKING... @flavioribeiro na globo.com
  24. 24. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
  25. 25. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
  26. 26. https://twitter.com/slicknet/status/292103833327370240
  27. 27. EDITORES
  28. 28. VIM http://www.vim.org/
  29. 29. SUBLIME http://www.sublimetext.com/
  30. 30. SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE
  31. 31. BRACKETS http://brackets.io/
  32. 32. DOTFILES
  33. 33. DOTFILES.GITHUB.IO http://dotfiles.github.io/ backup compartilhe aprenda
  34. 34. automatize suas configurações https://github.com/davidsonfellipe/dotfiles
  35. 35. CONTROLE DE VERSÃO
  36. 36. git trabalhar com repositórios entender branches pull request code review CONTROLE DE VERSÃO
  37. 37. https://bitbucket.org/
  38. 38. https://github.com/
  39. 39. BITBUCKET VS GITHUB repos privados ilimitados preço baseado no número de colaboradores número de colaboradores ilimitado preço baseado no número de repositórios privados
  40. 40. TASK RUNNER
  41. 41. http://gruntjs.com/
  42. 42. O QUE É O GRUNT? É um task runner baseado em linha de comando para projetos javascript
  43. 43. O QUE É O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pré-processadores
  44. 44. Por que usar o GRUNT? Facil de usar Grande número de plugins Imensa comunidade Open source
  45. 45. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli
  46. 46. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }
  47. 47. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
  48. 48. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima versão no seu folder Adiciona ao package.json
  49. 49. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  50. 50. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  51. 51. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  52. 52. PRÉ-PROCESSADORES
  53. 53. http://usablica.github.io/front-end-frameworks/compare.html
  54. 54. QUALIDADE DE CÓDIGO
  55. 55. JSHINT http://www.jshint.com/
  56. 56. CSSLINT http://csslint.net/
  57. 57. TESTES
  58. 58. PERFORMANCE
  59. 59. http://www.akamai.com/stateoftheinternet/
  60. 60. http://www.akamai.com/stateoftheinternet/ SÓ QUE NÃO!!!!!
  61. 61. performance de frontend? http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  62. 62. PRINCIPAIS CUIDADOS ● Minificar CSS, JavaScript e HTML ● Inline images, CSS, e JavaScript ● Cache de assets ● Defer JavaScript ● Concatenar CSS e JavaScript ● Compressão de imagens & resizing
  63. 63. YSLOW http://developer.yahoo.com/yslow/
  64. 64. YSLOW, MANTENEDOR? https://twitter.com/marcelduran brasileiro @marcelduran
  65. 65. PAGE SPEED https://developers.google.com/speed/pagespeed/insights
  66. 66. +PERFORMANCE? http://browserdiet.com/pt
  67. 67. TEM ATÉ EM CHINÊS... http://browserdiet.com/zh
  68. 68. SPEEDLIMIT http://mschrag.github.io
  69. 69. JSLITMUS http://mschrag.github.io
  70. 70. WEBPAGETEST
  71. 71. WEBPAGETEST
  72. 72. WEBPAGETEST
  73. 73. MAIS TOOLS
  74. 74. GRADIENTES? http://www.colorzilla.com/gradient-editor/
  75. 75. GITIFIER http://psionides.github.io/Gitifier/
  76. 76. MICROJS http://microjs.com/#
  77. 77. http://html5boilerplate.com/
  78. 78. BUSQUE SEU WORKFLOW
  79. 79. MAS...
  80. 80. NUNCA EXISTIRÁ WORKFLOW DEFINITIVO!!!
  81. 81. LEMBRE-SE DAS 6 SEMANAS...
  82. 82. MAS O QUE ESTÁ VINDO POR AÍ?
  83. 83. SPDY http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  84. 84. WEB COMPONENTS http://www.w3.org/TR/2013/WD-components-intro-20130606/
  85. 85. POLYMER http://www.polymer-project.org/
  86. 86. SHOW YOUR CODE
  87. 87. CONTRIBUA EM PROJETOS OPENSOURCE
  88. 88. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing
  89. 89. COMO SE MANTER ATUALIZADO?
  90. 90. https://twitter.com/slicknet/status/292103833327370240
  91. 91. 6 SEMANAS?
  92. 92. http://html5weekly.com/
  93. 93. http://javascriptweekly.com
  94. 94. http://braziljs.org/
  95. 95. AH... É MUITA COISA PARA ESTUDAR...
  96. 96. O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU WORKFLOW
  97. 97. ELE APENAS VAI TE DEIXA MAIS FELIZ
  98. 98. www.fellipe.com/talks slides disponíveis em...
  99. 99. OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com

×