Conhecendo o VanillaJS: e seu ecossistema

Nesta talk no programa de capacitação da Monetizze chamado Flight Academy, dou um overview sobre a evolução do Javascript e como está o estado atual da linguagem e o que com ele é possível de desenvolver.

Transcript

1. Conhecendo o VanillaJS: e seu ecossistema
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. Breve história
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.
8. mas os ventos mudaram com o...
9. A Era jQuery
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. A Era jQuery • Manipulação de DOM; • Suporte cross browser; • AJAX; • Animações.
12. exemplos...
15. click event()
19. será que precisamos dele até hoje?
21. addClass()
22. addClass()
23. toggle()
24. bind() em um evento
25. fadeTo()
26. Modern Javascript
27. Contexto atual Aplicações JS atuais: • Complexas; • Modulares; • Escaláveis; • Performáticas.
28. ES5
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. map()
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. Array map
33. Array map
34. filter()
37. reduce()
38. Quero retornar o valor em anos de experiência dos pilotos. Array reduce
41. ES6
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. Classes
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
47. const, let
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
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
53. Arrow functions
54. Permite buscar os dados de uma forma mais simples do que do jeito tradicional Destructuring
58. Destructuring
59. Possui uma sintaxe mais curta, semelhante às expressões lambda presente em linguagens como Java, F# entre outras. Arrow Functions
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
63. Default Parameters
64. A partir do ES6, podemos definir valores padrões para os parâmetros nas funções. Default Parameters
66. ....Rest e ...Spread
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. Operador Rest
69. Operador Spread
70. Template Literals
71. No ES6 é possível repassar variáveis para strings utilizando, ao invés de aspas simples ou duplas. Template Literals
72. Template Literals
74. Export e Import
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
80. ES7/8
81. • Object.entries; • Object.values; • Array.prototype.includes; ECMAScript Features 7/8 • Exponentiation; • Trailling Commas; • async/await
82. Trailling commas Javascript agora permite deixar uma vírgula sobrando.
83. Trailling commas
84. ajax()
88. fetchAPI Suporte
90. async/await
91. Trabalha com requisições assíncronas sem o uso de then e catch. async/await
92. async/await \
93. Tools
94. Tools
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. 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. Libs/Frameworks
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. 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