Nas Entranhas do JavaScript: Meta Programação

Nas Entranhas do JavaScript: Meta Programação

Talk apresentada no Front In POA 2016.
Nela explico um pouco sobre as features disponíveis em JavaScript para fazermos meta programação e tento apresentar casos de uso reais e exemplos simples.

5a3b0043a07f45bba968c22b7e7bf296?s=128

Lucas Fernandes da Costa

December 10, 2016
Tweet

Transcript

  1. META PROGRAMAÇÃO NAS ENTRANHAS DO JAVASCRIPT: LUCASFCOSTA LFERNANDESCOSTA

  2. O QUE É META PROGRAMAÇÃO?

  3. É A CAPACIDADE DE UM PROGRAMA LER E ALTERAR À

    SI MESMO OU OUTROS EM TEMPO DE EXECUÇÃO
  4. SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT

  5. SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT CHIMARRÃO

    DA META PROGRAMAÇÃO
  6. None
  7. Isso é Meta Programação

  8. Mas não é disso que vamos falar Isso é Meta

    Programação
  9. Mas não é disso que vamos falar Isso é Meta

    Programação Meta Level JavaScript
  10. Mas não é disso que vamos falar Isso é Meta

    Programação Meta Level JavaScript Base Level Java
  11. Reflective Meta Programming

  12. Reflective Meta Programming Introspecção

  13. Reflective Meta Programming Introspecção Auto-modificação

  14. Reflective Meta Programming Introspecção Auto-modificação Intercessão

  15. Meta Object Protocol

  16. Meta Object Protocol Prevê um vocabulário (um protocolo) que define

    como são feitas as operações sobre objetos
  17. Meta Object Protocol ecma-international.org/ecma-262

  18. Meta Object Protocol ecma-international.org/ecma-262

  19. PROPERTY DESCRIPTORS

  20. Property Descriptors Descrevem características de propriedades

  21. Property Descriptors meuObjeto propriedade

  22. Property Descriptors meuObjeto value enumerable writable configurable get set any

    boolean boolean boolean function function propriedade
  23. Indica o valor da propriedade value enumerable writable configurable get

    set any boolean boolean boolean function function Property Descriptors
  24. Indica se ela será listada por funções como Object.keys value

    enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  25. Indica se ela pode ser definida com o operador de

    atribuição (=) value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  26. Indica se o descritor dessa propriedade pode ser alterado value

    enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  27. É a função que será invocada para acessar a propriedade

    value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  28. É a função que será invocada ao atribuir um valor

    para a propriedade (operador de atribuição) value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
  29. value enumerable writable configurable get set any boolean boolean boolean

    function function Property Descriptors
  30. Getters Lazy Properties

  31. Getters Lazy Properties Propriedades calculadas apenas quando solicitado

  32. Getters Lazy Properties cesta frutas {banana: 1, morango: 1}

  33. Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso 400 frutas

    {banana: 1, morango: 1}
  34. Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso 600 frutas

    {banana: 2, morango: 1}
  35. Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso 800 frutas

    {banana: 3, morango: 1}
  36. Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso 800 frutas

    {banana: 3, morango: 1} Muitas atribuições ao peso! Poucos acessos!
  37. Getters Lazy Properties cesta dataNasc value: 08/05/1995 peso get: function

    frutas {banana: 1, morango: 1}
  38. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function

    cesta peso frutas {banana: 1, morango: 1} get: function cesta.peso
  39. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function

    pessoa dataNasc value: 08/05/1995 idade get: function cesta peso frutas {banana: 1, morango: 1} get: function invoca a função get cesta.peso
  40. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 invoca a função

    get idade get: function 200 pessoa dataNasc value: 08/05/1995 idade get: function pessoa dataNasc value: 08/05/1995 cesta.peso idade get: function cesta peso frutas {banana: 1, morango: 1} get: function
  41. Getters APIs Fluídas expect('word').to.be.a('string'); expect([1, 2, 3]).to.have.length(3);

  42. Getters APIs Fluídas pega.o(chimas).e.adiciona('erva')

  43. Setters Múltiplas Atribuições pessoa nomeCompleto set: function primeiroNome value: ''

    sobrenome value: ''
  44. Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' set:

    function primeiroNome value: '' sobrenome value: ''
  45. Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: ''
  46. Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: '' pessoa nomeCompleto set: function primeiroNome value: '' sobrenome value: ''
  47. Setters Múltiplas Atribuições pessoa nomeCompleto pessoa.nomeCompleto = ‘João Silva' invoca

    a função set passando ‘João Silva’ set: function primeiroNome value: '' sobrenome value: '' pessoa nomeCompleto set: function primeiroNome value: 'João' sobrenome value: 'Silva'
  48. SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT *Live

    coding begins*
  49. PROXIES

  50. O que são Proxies? Proxies são wrappers que permitem interceptar

    operações
  51. COMPOSIÇÃO DE UM PROXY Proxy Wrapper handler get set: function

    set set: function target nome value: ‘João' sobrenome value: ‘Silva' Traps
  52. FUNCIONAMENTO DE UM PROXY Proxy Wrapper const p = new

    Proxy(target, handler);
  53. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' const p = new Proxy(target, handler);
  54. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler);
  55. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p
  56. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p.nome Pede a propriedade ao wrapper
  57. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘João' handler get function set function const p = new Proxy(target, handler); p.nome Chama a trap get passando target e nome da propriedade
  58. FUNCIONAMENTO DE UM PROXY Proxy Wrapper target nome value: ‘João'

    sobrenome value: ‘Silva' handler get function set function const p = new Proxy(target, handler); p.nome Devolve o retorno da função da trap get
  59. List Comprehensions Arrays Infinitos

  60. 0 1 2 0 2 4 pares[0] Arrays Infinitos Array

    Infinito get function
  61. 0 1 2 0 2 4 pares[0] Arrays Infinitos Array

    Infinito get function
  62. 0 1 2 0 2 4 pares[0] Arrays Infinitos Array

    Infinito get function
  63. 0 1 2 0 2 4 pares[0] Arrays Infinitos Array

    Infinito get function
  64. 0 1 2 0 2 4 pares[0] Arrays Infinitos Array

    Infinito get function
  65. 0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  66. 0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  67. 0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function
  68. 0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function Calcula o valor que deveria estar no índice 3
  69. 0 1 2 3 0 2 4 undefined pares[3] Arrays

    Infinitos Proxy Wrapper get function Calcula o valor que deveria estar no índice 3
  70. Arrays Infinitos

  71. Sugestões de Propriedades Indicar ao utilizador da API qual a

    maneira correta de utilizá-la
  72. Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function
  73. Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  74. Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  75. Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome
  76. Sugestões de Propriedades pessoa target nome value: ‘João' sobrenome value:

    ‘João' handler get function set function pessoa.seuNome Você quis dizer: "nome"?
  77. “Refletindo" Operações ES6 Reflect

  78. “Refletindo" Operações ES6 Reflect Reflect.get

  79. “Refletindo" Operações ES6 Reflect Reflect.get Reflect.set

  80. “Refletindo" Operações ES6 Reflect Reflect.get Reflect.set Reflect.[[trapName]]

  81. SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT *Live

    coding begins*
  82. SYMBOLS

  83. O que são symbols? Novo tipo primitivo

  84. O que são symbols? Novo tipo primitivo "Symbols are all

    about Reflection within implementation" Keith Cirkel
  85. symbol Symbol !==

  86. symbol Symbol !== Tipo Primitivo

  87. symbol Symbol !== Tipo Primitivo Objeto Wrapper

  88. symbols new Symbol('description')

  89. symbols new Symbol('description')

  90. symbols new Symbol('description') new denota a criação de um novo

    objeto
  91. symbols new Symbol('description') Symbol('description') new denota a criação de um

    novo objeto
  92. symbols new Symbol('description') Symbol('description') new denota a criação de um

    novo objeto retorna um símbolo (primitivo)
  93. SÍMBOLOS PRIMITIVOS SÃO ÚNICOS

  94. Um symbol é unico Symbol('id') !== Symbol('id')

  95. Um symbol é unico Symbol('id') !== Symbol('id') Symbol.for('id') === Symbol.for('id')

    Cuidado com o registro global!
  96. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva'
  97. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa)
  98. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' timestamp value: 1481236691
  99. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' timestamp value: 1481236691 Facilmente sobrescrito por engano
  100. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva'
  101. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa)
  102. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' symbol(time) value: 1481236691
  103. symbols no mundo real pessoa nome value: 'João' sobrenome value:

    'Silva' marcaTimestamp(pessoa) pessoa nome value: 'João' sobrenome value: 'Silva' value: 1481236691 symbol(time) nunca haverá conflito!
  104. Símbolos usados para dirigir as operações nativas da linguagem Well

    Known Symbols
  105. Utilizado por um objeto para verificar se outro objeto é

    considerado uma instância sua Well Known Symbols Symbol.hasInstance
  106. Well Known Symbols Symbol.hasInstance portoAlegre instanceof lugarTri

  107. Well Known Symbols Symbol.hasInstance portoAlegre instanceof lugarTri lugarTri[Symbol.hasInstance](portoAlegre)

  108. Well Known Symbols

  109. Well Known Symbols Symbol.toPrimitive

  110. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag

  111. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag Symbol.iterator

  112. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag Symbol.iterator E muitos mais…

  113. SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT *Live

    coding begins*
  114. OBRIGADO! MUITO MAIS EM LUCASFCOSTA.COM LUCASFCOSTA LFERNANDESCOSTA