Conhecendo o VanillaJS: e seu ecossistema

Transcript

1. 1.

   Conhecendo o VanillaJS: e seu ecossistema

2. 2.

   Bruno Pulis Frontend Developer, co-fundador do Minas Dev. Palestrante e

   evangelista de A11Y, Web Semântica, JS. Aspirante a escritor, teólogo e fã do Javascripto.
3. 3.

   Breve história

4. 4.

   Breve história 2006 jQuery Nasce o jQuery 1995 Criada a

   linguagem Desenvolvida por Brendan Eich, com suporte ao Netscape Navigator 2. Originalmente chamava Mocha, mudou para LiveScript e finalmente Javascript. 1997 Padronização do Javascript Foi enviado para o ECMA a fim de padronizar a linguagem, criaram o TC39 que foi responsável pela padronização. Nasce o padrão ECMA-262 2009 Nodejs Javascript rodando em server side.
5. 5.

   None
6. 6.

   None
7. 7.

   None
8. 8.

   mas os ventos mudaram com o...

9. 9.

   A Era jQuery

10. 10.

    A Era jQuery Criado em 2006 por John Resig, com

    o objetivo de simplificar o modo de escrita e acessar o DOM (Document Object Model). Com o slogan "escreva menos, faça mais". Foi uma revolução e popularizou o JS
11. 11.

    A Era jQuery • Manipulação de DOM; • Suporte cross

    browser; • AJAX; • Animações.
12. 12.

    exemplos...

13. 13.

    None
14. 14.

    None
15. 15.

    click event()

16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    será que precisamos dele até hoje?

20. 20.

    None
21. 21.

    addClass()

22. 22.

    addClass()

23. 23.

    toggle()

24. 24.

    bind() em um evento

25. 25.

    fadeTo()

26. 26.

    Modern Javascript

27. 27.

    Contexto atual Aplicações JS atuais: • Complexas; • Modulares; •

    Escaláveis; • Performáticas.
28. 28.

    ES5

29. 29.

    • use "strict"; • String.trim(); • Array.isArray(); • Array.forEach(); •

    Array.map(); • Array.filter(); • Array.reduce(); • Array.reduceRight(); • Array.every(); • Array.some(); • Array.index(); • Array.lastIndexOf(); • JSON.parse(); • JSON.stringify(); • Date.now(); ECMAScript Features 5
30. 30.

    map()

31. 31.

    Digamos que você tenha recebido uma matriz contendo vários objetos

    - cada um representando uma pessoa. A coisa que você realmente precisa, no final, é uma matriz contendo apenas o id de cada pessoa. Array map
32. 32.

    Array map

33. 33.

    Array map

34. 34.

    filter()

35. 35.

    None
36. 36.

    None
37. 37.

    reduce()

38. 38.

    Quero retornar o valor em anos de experiência dos pilotos.

    Array reduce
39. 39.

    None
40. 40.

    None
41. 41.

    ES6

42. 42.

    • const, let; • Arrow functions; • Template literals; •

    Shorthand properties; • Default Parameters; • Novos métodos para String; • Array.from(); • Array.of(); • Array.find(); • Array.findIndex(); • Array.fill(); • Destructuring; • ...Rest e ...Spread; • Promises; • Classes; • Symbols e Iterators; • Generators; • Proxies, Sets e Maps ECMAScript Features 6
43. 43.

    Classes

44. 44.

    A partir do ES6 é possível declararmos classes nativas com

    Javascript. Além disso, podemos herdar outras classes utilizando o extends logo após o nome da classe: Classes
45. 45.

    None
46. 46.

    None
47. 47.

    const, let

48. 48.

    Constantes são utilizadas quando seu valor não será reatribuído em

    nenhum momento. Ainda assim, as constantes podem sofrer mutação. const
49. 49.

    None
50. 50.

    Variáveis de escopo são variáveis definidas pelo prefixo let que

    existirão apenas dentro do bloco associado à ela e não ficarão visíveis externamente. let
51. 51.

    None
52. 52.

    None
53. 53.

    Arrow functions

54. 54.

    Permite buscar os dados de uma forma mais simples do

    que do jeito tradicional Destructuring
55. 55.

    None
56. 56.

    None
57. 57.

    None
58. 58.

    Destructuring

59. 59.

    Possui uma sintaxe mais curta, semelhante às expressões lambda presente

    em linguagens como Java, F# entre outras. Arrow Functions
60. 60.

    Possuem dois benefícios: • São menos verbosas do que as

    funções tradicionais; • Seu valor this é definido à partir de funções onde foram definidas. Não é mais necessário fazer bind() Arrow Functions
61. 61.

    None
62. 62.

    None
63. 63.

    Default Parameters

64. 64.

    A partir do ES6, podemos definir valores padrões para os

    parâmetros nas funções. Default Parameters
65. 65.

    None
66. 66.

    ....Rest e ...Spread

67. 67.

    Os operadores Rest e Spread são formas de recuperarmos o

    conteúdo de objetos, vetores e parâmetros de funções de forma rápida. Operadores Rest e Spread
68. 68.

    Operador Rest

69. 69.

    Operador Spread

70. 70.

    Template Literals

71. 71.

    No ES6 é possível repassar variáveis para strings utilizando, ao

    invés de aspas simples ou duplas. Template Literals
72. 72.

    Template Literals

73. 73.

    None
74. 74.

    Export e Import

75. 75.

    A importação e exportação de módulos permite a utilização de

    funções, variáveis e classes de um arquivo em outro. Export e Import
76. 76.

    None
77. 77.

    None
78. 78.

    None
79. 79.

    None
80. 80.

    ES7/8

81. 81.

    • Object.entries; • Object.values; • Array.prototype.includes; ECMAScript Features 7/8 •

    Exponentiation; • Trailling Commas; • async/await
82. 82.

    Trailling commas Javascript agora permite deixar uma vírgula sobrando.

83. 83.

    Trailling commas

84. 84.

    ajax()

85. 85.

    None
86. 86.

    None
87. 87.

    None
88. 88.

    fetchAPI Suporte

89. 89.

    None
90. 90.

    async/await

91. 91.

    Trabalha com requisições assíncronas sem o uso de then e

    catch. async/await
92. 92.

    async/await \

93. 93.

    Tools

94. 94.

    Tools

95. 95.

    Eslint Ferramenta para garantir padronização na escrita e qualidade do

    código JS. Etapas para instalação: $ npm install eslint --save-dev $ ./node_modules/.bin/eslint --init
96. 96.

    Babel Os browser não suportam completamente ES6 por isso devemos

    transpilar o código. $ npm i babel-cli babel-core babel-preset-es2015 --save-dev
97. 97.

    Libs/Frameworks

98. 98.

    None
99. 99.

    None
100. 100.

     Referências • https://pt.wikipedia.org/wiki/JavaScript • https://devheroes.io/javascript-s01e01-historia-javascript/ • https://forum.imasters.com.br/topic/223155-jquery/?tab=comments #comment-783209 • https://worldvectorlogo.com/

     • https://medium.com/poka-techblog/simplify-your-javascript-use-map- reduce-and-filter-bd02c593cc2d
101. 101.

     Referências • https://medium.com/poka-techblog/simplify-your-javascript-use-map- reduce-and-filter-bd02c593cc2d • https://github.com/axios/axios • https://github.com/nefe/You-Dont-Need-jQuery