Turbinando seu workflow para o desenvolvimento de webapps

Turbinando seu workflow para o desenvolvimento de webapps

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.

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

July 28, 2013
Tweet

Transcript

  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. I’m DAVIDSON FELLIPE

  3. WORKS

  4. None
  5. ESCOLHAS... http://pher.ch/photos/landscapes/newzealand/Many%20Ways%20to%20Reach%20Rome%20from%20Cape%20Reinga.jpg

  6. ERA UMA VEZ...

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

  8. LAYOUT USANDO TABLE?

  9. ENQUANTO ISSO EM 2000...

  10. HTML CSS 2006...

  11. precisa saber JAVASCRIPT? 2006...

  12. ATUALMENTE...

  13. + poderosas + complexas + ambiciosas 2013...

  14. www.igvita.com/slides/2012/devtools-tips-and-tricks/ CICLO DE VIDA DE UMA WEBPAGE

  15. ATUALMENTE... http://httparchive.org/trends.php

  16. ATUALMENTE... http://httparchive.org/trends.php

  17. XBROWSER XDEVICE XPLATFORM

  18. XBROWSER XDEVICE XPLATFORM

  19. http://ondeviceresearch.com/ USUÁRIOS APENAS MOBILE

  20. 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
  21. websites precisam ter exatamente o mesmo visual em todos os

    browsers?
  22. None
  23. COMO MELHORAR MEU WORKFLOW DIANTE DESSES DESAFIOS?

  24. TECNOLOGIAS

  25. MULTITASKING... @flavioribeiro na globo.com

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

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

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

  29. EDITORES

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

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

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

  33. BRACKETS http://brackets.io/

  34. DOTFILES

  35. DOTFILES.GITHUB.IO http://dotfiles.github.io/ backup compartilhe aprenda

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

  37. CONTROLE DE VERSÃO

  38. git trabalhar com repositórios entender branches pull request code review

    CONTROLE DE VERSÃO
  39. https://bitbucket.org/

  40. https://github.com/

  41. 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
  42. TASK RUNNER

  43. http://gruntjs.com/

  44. O QUE É O GRUNT? É um task runner baseado

    em linha de comando para projetos javascript
  45. O QUE É O GRUNT? Testes JS linting Concatenando e

    Minificando Otimizando imagens Watches para Pré-processadores
  46. Por que usar o GRUNT? Facil de usar Grande número

    de plugins Imensa comunidade Open source
  47. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no

    system path INICIANDO COM GRUNT $ npm install -g grunt-cli
  48. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }

  49. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes

    }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
  50. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima

    versão no seu folder Adiciona ao package.json
  51. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

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

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

  54. PRÉ-PROCESSADORES

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. http://usablica.github.io/front-end-frameworks/compare.html

  63. QUALIDADE DE CÓDIGO

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

  65. CSSLINT http://csslint.net/

  66. TESTES

  67. None
  68. None
  69. PERFORMANCE

  70. http://www.akamai.com/stateoftheinternet/

  71. http://www.akamai.com/stateoftheinternet/ SÓ QUE NÃO!!!!!

  72. performance de frontend? http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

  73. 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
  74. YSLOW http://developer.yahoo.com/yslow/

  75. YSLOW, MANTENEDOR? https://twitter.com/marcelduran brasileiro @marcelduran

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

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

  78. TEM ATÉ EM CHINÊS... http://browserdiet.com/zh

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

  80. JSLITMUS http://mschrag.github.io

  81. WEBPAGETEST

  82. WEBPAGETEST

  83. WEBPAGETEST

  84. MAIS TOOLS

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

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

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

  88. http://html5boilerplate.com/

  89. BUSQUE SEU WORKFLOW

  90. MAS...

  91. NUNCA EXISTIRÁ WORKFLOW DEFINITIVO!!!

  92. LEMBRE-SE DAS 6 SEMANAS...

  93. MAS O QUE ESTÁ VINDO POR AÍ?

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

  95. WEB COMPONENTS http://www.w3.org/TR/2013/WD-components-intro-20130606/

  96. POLYMER http://www.polymer-project.org/

  97. SHOW YOUR CODE

  98. CONTRIBUA EM PROJETOS OPENSOURCE

  99. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing

  100. COMO SE MANTER ATUALIZADO?

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

  102. 6 SEMANAS?

  103. http://html5weekly.com/

  104. http://javascriptweekly.com

  105. http://braziljs.org/

  106. AH... É MUITA COISA PARA ESTUDAR...

  107. None
  108. O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU

    WORKFLOW
  109. ELE APENAS VAI TE DEIXA MAIS FELIZ

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

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