It's Javascript Time

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