Conhecendo o VanillaJS: e seu ecossistema

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.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

January 30, 2019
Tweet

Transcript

  1. 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.
  2. 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.
  3. 5.
  4. 6.
  5. 7.
  6. 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
  7. 11.

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

    browser; • AJAX; • Animações.
  8. 13.
  9. 14.
  10. 16.
  11. 17.
  12. 18.
  13. 20.
  14. 23.
  15. 25.
  16. 28.

    ES5

  17. 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
  18. 30.
  19. 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
  20. 32.
  21. 33.
  22. 34.
  23. 35.
  24. 36.
  25. 37.
  26. 39.
  27. 40.
  28. 41.

    ES6

  29. 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
  30. 43.
  31. 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
  32. 45.
  33. 46.
  34. 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
  35. 49.
  36. 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
  37. 51.
  38. 52.
  39. 54.

    Permite buscar os dados de uma forma mais simples do

    que do jeito tradicional Destructuring
  40. 55.
  41. 56.
  42. 57.
  43. 59.

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

    em linguagens como Java, F# entre outras. Arrow Functions
  44. 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
  45. 61.
  46. 62.
  47. 64.

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

    parâmetros nas funções. Default Parameters
  48. 65.
  49. 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
  50. 71.

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

    invés de aspas simples ou duplas. Template Literals
  51. 73.
  52. 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
  53. 76.
  54. 77.
  55. 78.
  56. 79.
  57. 80.
  58. 84.
  59. 85.
  60. 86.
  61. 87.
  62. 89.
  63. 93.
  64. 94.
  65. 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
  66. 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
  67. 98.
  68. 99.