JavaScript Behind the Scenes: Meta Programming

Infinite sequences, lazy properties and changing your program’s structure in runtime. Yes, JavaScript is that powerful. In this talk, I demonstrate how to solve problems in a smarter way and with better performance and readability by redefining how the language’s features work behind the scenes.

Transcript

1. JAVASCRIPT BEHIND THE SCENES META PROGRAMMING LUCASFCOSTA LFERNANDESCOSTA
2. WHAT IS META PROGRAMMING?
3. META PROGRAMMING IS A PROGRAMMING TECHNIQUE IN WHICH PROGRAMS CAN TREAT PROGRAMS AS INPUT
5. This is Meta Programming
6. But this is not exactly what we will be talking about This is Meta Programming
7. Meta Level JavaScript But this is not exactly what we will be talking about This is Meta Programming
8. Meta Level JavaScript Base Level Java But this is not exactly what we will be talking about But this is not exactly what we will be talking about This is Meta Programming
9. Reflective Meta Programming
10. Reflective Meta Programming Introspection
11. Reflective Meta Programming Introspection Self-modification
12. Reflective Meta Programming Introspection Self-modification Intercession
13. Meta Object Protocol
14. Meta Object Protocol Provides a vocabulary to access and manipulate the structure and behavior of systems of objects https://en.wikipedia.org/wiki/Metaobject
15. Meta Object Protocol ecma-international.org/ecma-262
16. Meta Object Protocol ecma-international.org/ecma-262
17. Meta Object Protocol ecma-international.org/ecma-262
18. Object.* METHODS
19. Object.* Methods
20. Object.* Methods Object.keys()
21. Object.* Methods Object.keys() Object.assign()
22. Object.* Methods Object.keys() Object.assign() Object.hasOwnProperty()
23. Object.* Methods Object.keys() Object.assign() Object.hasOwnProperty() Object.getPrototypeOf()
24. PROPERTY DESCRIPTORS
25. Property Descriptors Objects that describe properties’ characteristics
26. Property Descriptors myObject myProperty
27. Property Descriptors myObject value enumerable writable configurable get set any boolean boolean boolean function function myProperty
28. Property Descriptors myObject value enumerable writable configurable get set any boolean boolean boolean function function myProperty This is a Property Descriptor
29. Indicates the property’s value value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
30. Indicates if this property shows up when enumerating properties value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
31. Indicates if this property’s value can be changed using the assignment operator value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
32. Indicates if this property’s descriptor can be changed and if this property can be deleted value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
33. The function which will be invoked when accessing the property value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
34. The function which will be called when trying to assign to this property value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
35. value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors
36. Property Descriptors Object.defineProperty
37. Property Descriptors Object.defineProperty Parameters
38. Property Descriptors Object.defineProperty obj Parameters
39. Property Descriptors Object.defineProperty obj propName Parameters
40. Property Descriptors Object.defineProperty obj propName descriptor Parameters
41. Property Descriptors Object.getOwnPropertyDescriptor
42. Property Descriptors Object.getOwnPropertyDescriptor Parameters
43. Property Descriptors Object.getOwnPropertyDescriptor obj Parameters
44. Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters
45. Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters Does not work for inherited properties!
46. Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters Use Object.getPrototypeOf to go up the chain
47. Getters Lazy Properties
48. Getters Lazy Properties Properties calculated only when needed
49. Getters Lazy Properties basket fruits {bananas: 1, oranges: 1}
50. Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 400 fruits {bananas: 1, oranges: 1}
51. Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 600 fruits {bananas: 2, oranges: 1}
52. Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 800 fruits {bananas: 3, oranges: 1}
53. Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 800 fruits {bananas: 3, oranges: 1} Too many assignments to the weight property!
54. Getters Lazy Properties basket dataNasc value: 08/05/1995 weight fruits {bananas: 1, oranges: 1} get: function
55. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function basket weight fruits {bananas: 1, oranges: 1} get: function basket.weight
56. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function pessoa dataNasc value: 08/05/1995 idade get: function basket weight fruits {bananas: 1, oranges: 1} get: function calls the get function basket.weight
57. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function 200 pessoa dataNasc value: 08/05/1995 idade get: function pessoa dataNasc value: 08/05/1995 basket.weight idade get: function basket weight fruits {bananas: 1, oranges: 1} get: function calls the get function
58. Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function 300 pessoa dataNasc value: 08/05/1995 idade get: function pessoa dataNasc value: 08/05/1995 basket.weight idade get: function basket weight fruits {bananas: 2, oranges: 1} get: function calls the get function
59. Getters Fluid APIs expect('word').to.be.a('string'); expect([1, 2, 3]).to.have.length(3);
60. Getters Fluid APIs expect('word').to.be.a('string'); Wraps expect's arguments into an Assertion object
61. Getters Fluid APIs expect('word').to.be.a('string'); These properties have getter functions that just return the Assertion itself
62. Getters Fluid APIs expect('word').to.be.a('string'); This is a method in the Assertion object which actually does the check
63. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: ''
64. Setters person fullName set: function firstName value: '' lastName value: '' Multiple Assignments person.fullName = 'John Doe'
65. Setters person fullName Calls the set function passing 'John Doe' to it set: function firstName value: '' lastName value: '' person.fullName = 'John Doe' Multiple Assignments
66. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' person fullName set: function firstName value: 'John' lastName value: 'Doe' Calls the set function passing 'John Doe' to it person.fullName = 'John Doe'
67. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' person fullName set: function firstName value: 'John' lastName value: 'Doe' Calls the set function passing 'John Doe' to it person.fullName = 'John Doe'
68. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' Be careful not to set fullName again inside the setter fullName set: function
69. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' Be careful not to set fullName again inside the setter fullName set: function INFINITE RECURSION!
70. Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' Be careful not to set fullName again inside the setter You can use a getter to concatenate firstName and lastName
71. PROXIES
72. What are Proxies? Proxies are object wrappers which allow us to intercept operations
73. Proxy Wrapper handler get set: function set set: function target firstName value: 'John' lastName value: 'Doe' Traps A PROXY’S COMPOSITION
74. HOW PROXIES WORK Proxy Wrapper const p = new Proxy(target, handler);
75. Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' const p = new Proxy(target, handler); HOW PROXIES WORK
76. Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' handler get function set function const p = new Proxy(target, handler); HOW PROXIES WORK
77. const p = new Proxy(target, handler); p Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' handler get function set function HOW PROXIES WORK
78. const p = new Proxy(target, handler); p.name Asks the wrapper for this property Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' handler get function set function HOW PROXIES WORK
79. handler get set function const p = new Proxy(target, handler); p.name Calls the get trap passing target and the property’s name target firstName value: 'John' lastName value: 'Doe' Proxy Wrapper function HOW PROXIES WORK
80. Proxy Wrapper handler get function set function const p = new Proxy(target, handler); p.name Returns the value returned by the get trap target firstName value: 'John' lastName value: 'Doe' HOW PROXIES WORK
81. List Comprehensions Infinite Arrays
82. 0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays
83. 0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays
84. 0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays
85. 0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays
86. 0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays
87. 0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Infinite Arrays
88. 0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Infinite Arrays
89. 0 1 2 3 0 2 4 undefined evens[3] Infinite Arrays Proxy Wrapper get function
90. 0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Calculates the value that should have been in the index 3 Infinite Arrays
91. 0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Calculates the value that should have been in the index 3 Infinite Arrays
92. Infinite Arrays
93. Property Suggestions Helps your API's users figure out what is the correct way to use it
94. person target firstName value: 'John' lastName value: 'Doe' handler get function set function Property Suggestions
95. Property Suggestions person target firstName value: 'John' lastName value: 'Doe' handler get function set function typo! person.firstNsme
96. person target firstName value: 'John' lastName value: 'Doe' handler get function set function Property Suggestions person.firstNsme
97. person target firstName value: ‘John' lastName value: ‘Doe' handler get function set function person.firstNsme Property Suggestions
98. person target firstName value: 'John' lastName value: 'Doe' handler get function set function pessoa.seuNome Perhaps you meant: "firstName"? Property Suggestions
99. Property Suggestions expect({}).to.be.a.strng TYPO!
100. Property Suggestions expect({}).to.be.a.strng Trying to access a non-existing property returns undefined
101. Property Suggestions expect({}).to.be.a.strng assertion target handler get function set function Checks if property assertion exists here
102. Property Suggestions expect({}).to.be.a.strng assertion target handler get function set function Checks if property assertion exists here This does not exist Perhaps you meant: 'string'
103. “Reflecting" Operations ES6 Reflect
104. ES6 Reflect Reflect.get “Reflecting" Operations
105. ES6 Reflect Reflect.get Reflect.set “Reflecting" Operations
106. ES6 Reflect Reflect.get Reflect.set Reflect.[[trapName]] “Reflecting" Operations
107. const p = new Proxy(obj, { get: (target, propName) => { console.log('[GET] ' + propName); return Reflect.get(target, propName);
 } }); “Reflecting" Operations
108. const p = new Proxy(obj, { get: (target, propName) => { console.log('[GET] ' + propName); return Reflect.get(target, propName);
 } }); “Reflecting" Operations Trap Name == Reflect Method’s Name
109. SYMBOLS
110. What are symbols? A new primitive type
111. "Symbols are all about Reflection within implementation" Keith Cirkel What are symbols? A new primitive type
112. symbol Symbol !==
113. symbol Symbol !== Primitive Type
114. symbol Symbol !== Primitive Type Object Wrapper
115. symbols new Symbol('description')
116. symbols new Symbol('description')
117. symbols new Symbol('description') the new keyword denotes the creation of a new object
118. symbols new Symbol('description') the new keyword denotes the creation of a new object returns a symbol (primitive) Symbol('description')
119. symbols new Symbol('description') Symbol('description') the new keyword denotes the creation of a new object returns a symbol (primitive)
120. PRIMITIVE SYMBOLS ARE UNIQUE
121. A symbol is unique Symbol('id') !== Symbol('id')
122. Symbol('id') !== Symbol('id') A symbol is unique Symbol.for('id') === Symbol.for('id') Be careful with the global registry
123. Symbol('id') !== Symbol('id') Symbol.for('id') === Symbol.for('id') Be careful with the global registry A symbol is unique These two return the exact same primitive
124. symbols in the real world person firstName value: 'John' lastName value: 'Doe'
125. markTimestamp(person) symbols in the real world person firstName value: 'John' lastName value: 'Doe'
126. markTimestamp(person) person firstName value: 'John' lastName value: 'Doe' timestamp value: 1481236691 symbols in the real world person firstName value: 'John' lastName value: 'Doe'
127. Easily overwritten by mistake/namespace clash symbols in the real world markTimestamp(person) person firstName value: 'John' lastName value: 'Doe' timestamp value: 1481236691 person firstName value: 'John' lastName value: 'Doe'
128. pessoa nome value: 'João' sobrenome value: 'Silva' person firstName value: 'John' lastName value: 'Doe' symbols in the real world
129. symbols in the real world markTimestamp(person) person firstName value: 'John' lastName value: 'Doe'
130. person firstName value: 'John' lastName value: 'Doe' symbol(time) value: 1481236691 symbols in the real world markTimestamp(person) person firstName value: 'John' lastName value: 'Doe'
131. We will never have an unintentional assignment person firstName value: 'John' lastName value: 'Doe' symbol(time) value: 1481236691 symbols in the real world markTimestamp(person) person firstName value: 'John' lastName value: 'Doe'
132. Symbols used to drive the language’s native implementations Well Known Symbols
133. Indexes the function used to check if an object is an instance of a constructor Well Known Symbols Symbol.hasInstance
134. Well Known Symbols Symbol.hasInstance bristol instanceof AwesomePlace
135. Well Known Symbols Symbol.hasInstance AwesomePlace[Symbol.hasInstance](bristol) bristol instanceof AwesomePlace
136. Well Known Symbols Symbol.hasInstance
137. Well Known Symbols
138. Well Known Symbols Symbol.toPrimitive
139. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag
140. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag Symbol.iterator
141. Well Known Symbols Symbol.toPrimitive Symbol.toStringTag Symbol.iterator And many others…
142. THANK YOU! MORE DETAILS AT LUCASFCOSTA.COM LUCASFCOSTA LFERNANDESCOSTA