$30 off During Our Annual Pro Sale. View Details »

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.

Davidson Fellipe

July 28, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

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

    View Slide

  2. I’m
    DAVIDSON FELLIPE

    View Slide

  3. WORKS

    View Slide

  4. View Slide

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

    View Slide

  6. ERA UMA VEZ...

    View Slide

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

    View Slide

  8. LAYOUT USANDO
    TABLE?

    View Slide

  9. ENQUANTO ISSO EM 2000...

    View Slide

  10. HTML
    CSS
    2006...

    View Slide

  11. precisa saber
    JAVASCRIPT?
    2006...

    View Slide

  12. ATUALMENTE...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

  18. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

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

    View Slide

  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

    View Slide

  21. websites precisam ter exatamente o
    mesmo visual em todos os browsers?

    View Slide

  22. View Slide

  23. COMO MELHORAR
    MEU WORKFLOW
    DIANTE DESSES
    DESAFIOS?

    View Slide

  24. TECNOLOGIAS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. EDITORES

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. BRACKETS
    http://brackets.io/

    View Slide

  34. DOTFILES

    View Slide

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

    View Slide

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

    View Slide

  37. CONTROLE
    DE
    VERSÃO

    View Slide

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

    View Slide

  39. https://bitbucket.org/

    View Slide

  40. https://github.com/

    View Slide

  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

    View Slide

  42. TASK RUNNER

    View Slide

  43. http://gruntjs.com/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  54. PRÉ-PROCESSADORES

    View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

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

    View Slide

  63. QUALIDADE
    DE
    CÓDIGO

    View Slide

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

    View Slide

  65. CSSLINT
    http://csslint.net/

    View Slide

  66. TESTES

    View Slide

  67. View Slide

  68. View Slide

  69. PERFORMANCE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. WEBPAGETEST

    View Slide

  82. WEBPAGETEST

    View Slide

  83. WEBPAGETEST

    View Slide

  84. MAIS TOOLS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  88. http://html5boilerplate.com/

    View Slide

  89. BUSQUE
    SEU
    WORKFLOW

    View Slide

  90. MAS...

    View Slide

  91. NUNCA EXISTIRÁ
    WORKFLOW
    DEFINITIVO!!!

    View Slide

  92. LEMBRE-SE
    DAS
    6 SEMANAS...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  97. SHOW
    YOUR
    CODE

    View Slide

  98. CONTRIBUA
    EM
    PROJETOS
    OPENSOURCE

    View Slide

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

    View Slide

  100. COMO SE MANTER
    ATUALIZADO?

    View Slide

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

    View Slide

  102. 6 SEMANAS?

    View Slide

  103. http://html5weekly.com/

    View Slide

  104. http://javascriptweekly.com

    View Slide

  105. http://braziljs.org/

    View Slide

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

    View Slide

  107. View Slide

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

    View Slide

  109. ELE APENAS
    VAI TE DEIXA
    MAIS FELIZ

    View Slide

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

    View Slide

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

    View Slide