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.

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
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