Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's Javascript Time

It's Javascript Time

Davidson Fellipe

November 16, 2013
Tweet

More Decks by Davidson Fellipe

Other Decks in Programming

Transcript

  1. It's Javascript TIME
    Por davidson fellipe

    View Slide

  2. It's time !!!

    View Slide

  3. davidson fellipe
    front end engineer na globo.com

    View Slide

  4. ex-dev
    php
    davidson fellipe
    front end engineer na globo.com

    View Slide

  5. /davidsonfellipe
    /davidsonfellipe
    /fellipe
    fellipe.com/talks

    View Slide

  6. Mocha
    maio 1995 - 10 dias
    LiveScript
    setembro 1995
    JavaScript
    dezembro 1995

    View Slide

  7. O criador:
    Brendan Eich
    acervo pessoal

    View Slide

  8. ano 1996

    View Slide

  9. ano 1999

    View Slide

  10. ano 2000

    View Slide

  11. ATUALMENTE...

    View Slide

  12. Tenho que
    aprender javascript?

    View Slide

  13. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

  14. XBROWSER
    XDEVICE
    XPLATFORM

    View Slide

  15. js
    no browser

    View Slide

  16. por que javascript?
    presente na maioria dos browsers
    performance
    simples?

    View Slide

  17. js
    é pop

    View Slide

  18. top linguagens em 2012 no github

    View Slide

  19. top linguagens em 2013 no github

    View Slide

  20. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://httparchive.org/trends.php#numurls
    evolução do tamanho das js requests

    View Slide

  21. js
    libs

    View Slide

  22. http://jquery.com/

    View Slide

  23. http://zeptojs.com/

    View Slide

  24. http://underscorejs.org/

    View Slide

  25. http://mootools.net

    View Slide

  26. http://yuilibrary.com/

    View Slide

  27. http://microjs.com/#

    View Slide

  28. js
    no servidor

    View Slide

  29. por que javascript no servidor?
    mesma linguagem do lado cliente
    simples?
    grande quantidade de pacotes disponíveis

    View Slide

  30. https://nodejs.org/

    View Slide

  31. https://npmjs.org/

    View Slide

  32. js
    sem browser

    View Slide

  33. http://phantomjs.org

    View Slide

  34. http://zombie.labnotes.org/

    View Slide

  35. DOCUMENTAÇÃO

    View Slide

  36. JAVASCRIPT
    NÃO TEM BOA
    DOCUMENTAÇÃO?

    View Slide

  37. https://developer.mozilla.org/en-US/

    View Slide

  38. e frameworks?

    View Slide

  39. http://angularjs.org/

    View Slide

  40. http://backbonejs.org/

    View Slide

  41. http://knockoutjs.com/

    View Slide

  42. http://emberjs.com/

    View Slide

  43. GESTÃO DE
    PACOTES

    View Slide

  44. http://bower.io/

    View Slide

  45. task
    runner

    View Slide

  46. http://gruntjs.com/

    View Slide

  47. Por que usar o GRUNT?
    Fácil de usar
    Grande número de plugins
    Imensa comunidade
    Open source

    View Slide

  48. Testes
    JS linting
    Concatenar e Minificar arquivos
    Otimizar imagens
    live reload
    Watches para Pré-processadores
    Por que usar o GRUNT?

    View Slide

  49. workflow

    View Slide

  50. View Slide

  51. Loaders

    View Slide

  52. por que loaders?
    utilizados para carregar módulos
    podem melhorar a performance e
    qualidade do seu código.

    View Slide

  53. http://requirejs.org/

    View Slide

  54. http://headjs.com/

    View Slide

  55. qualidade
    de
    código

    View Slide

  56. http://www.jshint.com/

    View Slide

  57. http://www.jslint.com/

    View Slide

  58. TESTES

    View Slide

  59. View Slide

  60. View Slide

  61. http://visionmedia.github.io/mocha/

    View Slide

  62. padrão de
    codificação

    View Slide

  63. vamos criar um padrão de
    codificação?

    View Slide

  64. aspas, chaves, ponto e vírgula
    Space vs Tab
    Single quote vs double quotes
    nomenclaturas para functions, Object Literal,
    conditional statement...

    View Slide

  65. https://github.com/rwaldron/idiomatic.js/

    View Slide

  66. https://github.com/airbnb/javascript

    View Slide

  67. http://sideeffect.kr/popularconvention/

    View Slide

  68. performance

    View Slide

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

  70. http://www.broofa.com/Tools/JSLitmus/

    View Slide

  71. http://jsperf.com/

    View Slide

  72. http://browserdiet.com/pt

    View Slide

  73. https://github.com/davidsonfellipe/keepfast/
    monitoramento de
    indicadores de
    performance

    View Slide

  74. http://fellipe.com/slides/performance-javascript/

    View Slide

  75. js
    everywhere

    View Slide

  76. http://phonegap.com/
    CONVERTENDO PARA
    APPS MOBILE

    View Slide

  77. http://www.mozilla.org/pt-BR/firefox/os/
    ...ou criando nativas

    View Slide

  78. https://github.com/davidsonfellipe/lena.js/ | http://fellipe.com/demos/lena-js/
    processamento
    digital de imagens

    View Slide

  79. http://trackingjs.com/examples.html | http://vimeo.com/48428772
    realidade
    aumentada

    View Slide

  80. http://nodecopter.com/ | http://vimeo.com/48428772
    drones

    View Slide

  81. https://developer.mozilla.org/en/demos/detail/bananabread
    games

    View Slide

  82. como se manter
    atualizado?

    View Slide

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

    View Slide

  84. 6 SEMANAS?

    View Slide

  85. http://javascriptweekly.com

    View Slide

  86. http://braziljs.org/

    View Slide

  87. É MUITA COISA
    PARA ESTUDAR...

    View Slide

  88. View Slide

  89. comunidade
    js

    View Slide

  90. COMUNIDADE JAVASCRIPT
    há Vários eventos no brasil
    Projetos de código aberto conhecidos
    Profissionais com destaque
    internacional

    View Slide

  91. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    https://github.com/davidsonfellipe
    tenha o seu github

    View Slide

  92. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.communityjs.org

    View Slide

  93. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.communityjs.org

    View Slide

  94. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.braziljs.org

    View Slide

  95. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.frontinbh.com.br

    View Slide

  96. http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://blog.stalker.com.br/wp-content/uploads//2013/04/tools.jpg
    http://www.riojs.org/conf

    View Slide

  97. Seja
    bem vindo
    ao mundo do js

    View Slide

  98. the winner...
    will be...
    ...You

    View Slide

  99. /davidsonfellipe
    /davidsonfellipe
    /fellipe
    fellipe.com/talks
    Obrigado!

    View Slide