Tweet
Tweet

Slide 1

Slide 1 text

JAVASCRIPT BEHIND THE SCENES META PROGRAMMING LUCASFCOSTA LFERNANDESCOSTA

Slide 2

Slide 2 text

WHAT IS META PROGRAMMING?

Slide 3

Slide 3 text

META PROGRAMMING IS A PROGRAMMING TECHNIQUE IN WHICH PROGRAMS CAN TREAT PROGRAMS AS INPUT

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

This is Meta Programming

Slide 6

Slide 6 text

But this is not exactly what we will be talking about This is Meta Programming

Slide 7

Slide 7 text

Meta Level JavaScript But this is not exactly what we will be talking about This is Meta Programming

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Reflective Meta Programming

Slide 10

Slide 10 text

Reflective Meta Programming Introspection

Slide 11

Slide 11 text

Reflective Meta Programming Introspection Self-modification

Slide 12

Slide 12 text

Reflective Meta Programming Introspection Self-modification Intercession

Slide 13

Slide 13 text

Meta Object Protocol

Slide 14

Slide 14 text

Meta Object Protocol Provides a vocabulary to access and manipulate the structure and behavior of systems of objects https://en.wikipedia.org/wiki/Metaobject

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Object.* METHODS

Slide 19

Slide 19 text

Object.* Methods

Slide 20

Slide 20 text

Object.* Methods Object.keys()

Slide 21

Slide 21 text

Object.* Methods Object.keys() Object.assign()

Slide 22

Slide 22 text

Object.* Methods Object.keys() Object.assign() Object.hasOwnProperty()

Slide 23

Slide 23 text

Object.* Methods Object.keys() Object.assign() Object.hasOwnProperty() Object.getPrototypeOf()

Slide 24

Slide 24 text

PROPERTY DESCRIPTORS

Slide 25

Slide 25 text

Property Descriptors Objects that describe properties’ characteristics

Slide 26

Slide 26 text

Property Descriptors myObject myProperty

Slide 27

Slide 27 text

Property Descriptors myObject value enumerable writable configurable get set any boolean boolean boolean function function myProperty

Slide 28

Slide 28 text

Property Descriptors myObject value enumerable writable configurable get set any boolean boolean boolean function function myProperty This is a Property Descriptor

Slide 29

Slide 29 text

Indicates the property’s value value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors

Slide 30

Slide 30 text

Indicates if this property shows up when enumerating properties value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

The function which will be invoked when accessing the property value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

value enumerable writable configurable get set any boolean boolean boolean function function Property Descriptors

Slide 36

Slide 36 text

Property Descriptors Object.defineProperty

Slide 37

Slide 37 text

Property Descriptors Object.defineProperty Parameters

Slide 38

Slide 38 text

Property Descriptors Object.defineProperty obj Parameters

Slide 39

Slide 39 text

Property Descriptors Object.defineProperty obj propName Parameters

Slide 40

Slide 40 text

Property Descriptors Object.defineProperty obj propName descriptor Parameters

Slide 41

Slide 41 text

Property Descriptors Object.getOwnPropertyDescriptor

Slide 42

Slide 42 text

Property Descriptors Object.getOwnPropertyDescriptor Parameters

Slide 43

Slide 43 text

Property Descriptors Object.getOwnPropertyDescriptor obj Parameters

Slide 44

Slide 44 text

Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters

Slide 45

Slide 45 text

Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters Does not work for inherited properties!

Slide 46

Slide 46 text

Property Descriptors Object.getOwnPropertyDescriptor obj propName Parameters Use Object.getPrototypeOf to go up the chain

Slide 47

Slide 47 text

Getters Lazy Properties

Slide 48

Slide 48 text

Getters Lazy Properties Properties calculated only when needed

Slide 49

Slide 49 text

Getters Lazy Properties basket fruits {bananas: 1, oranges: 1}

Slide 50

Slide 50 text

Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 400 fruits {bananas: 1, oranges: 1}

Slide 51

Slide 51 text

Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 600 fruits {bananas: 2, oranges: 1}

Slide 52

Slide 52 text

Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 800 fruits {bananas: 3, oranges: 1}

Slide 53

Slide 53 text

Getters Lazy Properties basket dataNasc value: 08/05/1995 weight 800 fruits {bananas: 3, oranges: 1} Too many assignments to the weight property!

Slide 54

Slide 54 text

Getters Lazy Properties basket dataNasc value: 08/05/1995 weight fruits {bananas: 1, oranges: 1} get: function

Slide 55

Slide 55 text

Getters Lazy Properties pessoa dataNasc value: 08/05/1995 idade get: function basket weight fruits {bananas: 1, oranges: 1} get: function basket.weight

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Getters Fluid APIs expect('word').to.be.a('string'); expect([1, 2, 3]).to.have.length(3);

Slide 60

Slide 60 text

Getters Fluid APIs expect('word').to.be.a('string'); Wraps expect's arguments into an Assertion object

Slide 61

Slide 61 text

Getters Fluid APIs expect('word').to.be.a('string'); These properties have getter functions that just return the Assertion itself

Slide 62

Slide 62 text

Getters Fluid APIs expect('word').to.be.a('string'); This is a method in the Assertion object which actually does the check

Slide 63

Slide 63 text

Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: ''

Slide 64

Slide 64 text

Setters person fullName set: function firstName value: '' lastName value: '' Multiple Assignments person.fullName = 'John Doe'

Slide 65

Slide 65 text

Setters person fullName Calls the set function passing 'John Doe' to it set: function firstName value: '' lastName value: '' person.fullName = 'John Doe' Multiple Assignments

Slide 66

Slide 66 text

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'

Slide 67

Slide 67 text

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'

Slide 68

Slide 68 text

Setters Multiple Assignments person fullName set: function firstName value: '' lastName value: '' Be careful not to set fullName again inside the setter fullName set: function

Slide 69

Slide 69 text

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!

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

PROXIES

Slide 72

Slide 72 text

What are Proxies? Proxies are object wrappers which allow us to intercept operations

Slide 73

Slide 73 text

Proxy Wrapper handler get set: function set set: function target firstName value: 'John' lastName value: 'Doe' Traps A PROXY’S COMPOSITION

Slide 74

Slide 74 text

HOW PROXIES WORK Proxy Wrapper const p = new Proxy(target, handler);

Slide 75

Slide 75 text

Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' const p = new Proxy(target, handler); HOW PROXIES WORK

Slide 76

Slide 76 text

Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' handler get function set function const p = new Proxy(target, handler); HOW PROXIES WORK

Slide 77

Slide 77 text

const p = new Proxy(target, handler); p Proxy Wrapper target firstName value: 'John' lastName value: 'Doe' handler get function set function HOW PROXIES WORK

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

List Comprehensions Infinite Arrays

Slide 82

Slide 82 text

0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays

Slide 83

Slide 83 text

0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays

Slide 84

Slide 84 text

0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays

Slide 85

Slide 85 text

0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays

Slide 86

Slide 86 text

0 1 2 0 2 4 evens[0] Proxy Wrapper get function Infinite Arrays

Slide 87

Slide 87 text

0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Infinite Arrays

Slide 88

Slide 88 text

0 1 2 3 0 2 4 undefined evens[3] Proxy Wrapper get function Infinite Arrays

Slide 89

Slide 89 text

0 1 2 3 0 2 4 undefined evens[3] Infinite Arrays Proxy Wrapper get function

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Infinite Arrays

Slide 93

Slide 93 text

Property Suggestions Helps your API's users figure out what is the correct way to use it

Slide 94

Slide 94 text

person target firstName value: 'John' lastName value: 'Doe' handler get function set function Property Suggestions

Slide 95

Slide 95 text

Property Suggestions person target firstName value: 'John' lastName value: 'Doe' handler get function set function typo! person.firstNsme

Slide 96

Slide 96 text

person target firstName value: 'John' lastName value: 'Doe' handler get function set function Property Suggestions person.firstNsme

Slide 97

Slide 97 text

person target firstName value: ‘John' lastName value: ‘Doe' handler get function set function person.firstNsme Property Suggestions

Slide 98

Slide 98 text

person target firstName value: 'John' lastName value: 'Doe' handler get function set function pessoa.seuNome Perhaps you meant: "firstName"? Property Suggestions

Slide 99

Slide 99 text

Property Suggestions expect({}).to.be.a.strng TYPO!

Slide 100

Slide 100 text

Property Suggestions expect({}).to.be.a.strng Trying to access a non-existing property returns undefined

Slide 101

Slide 101 text

Property Suggestions expect({}).to.be.a.strng assertion target handler get function set function Checks if property assertion exists here

Slide 102

Slide 102 text

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'

Slide 103

Slide 103 text

“Reflecting" Operations ES6 Reflect

Slide 104

Slide 104 text

ES6 Reflect Reflect.get “Reflecting" Operations

Slide 105

Slide 105 text

ES6 Reflect Reflect.get Reflect.set “Reflecting" Operations

Slide 106

Slide 106 text

ES6 Reflect Reflect.get Reflect.set Reflect.[[trapName]] “Reflecting" Operations

Slide 107

Slide 107 text

const p = new Proxy(obj, { get: (target, propName) => { console.log('[GET] ' + propName); return Reflect.get(target, propName);
 } }); “Reflecting" Operations

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

SYMBOLS

Slide 110

Slide 110 text

What are symbols? A new primitive type

Slide 111

Slide 111 text

"Symbols are all about Reflection within implementation" Keith Cirkel What are symbols? A new primitive type

Slide 112

Slide 112 text

symbol Symbol !==

Slide 113

Slide 113 text

symbol Symbol !== Primitive Type

Slide 114

Slide 114 text

symbol Symbol !== Primitive Type Object Wrapper

Slide 115

Slide 115 text

symbols new Symbol('description')

Slide 116

Slide 116 text

symbols new Symbol('description')

Slide 117

Slide 117 text

symbols new Symbol('description') the new keyword denotes the creation of a new object

Slide 118

Slide 118 text

symbols new Symbol('description') the new keyword denotes the creation of a new object returns a symbol (primitive) Symbol('description')

Slide 119

Slide 119 text

symbols new Symbol('description') Symbol('description') the new keyword denotes the creation of a new object returns a symbol (primitive)

Slide 120

Slide 120 text

PRIMITIVE SYMBOLS ARE UNIQUE

Slide 121

Slide 121 text

A symbol is unique Symbol('id') !== Symbol('id')

Slide 122

Slide 122 text

Symbol('id') !== Symbol('id') A symbol is unique Symbol.for('id') === Symbol.for('id') Be careful with the global registry

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

symbols in the real world person firstName value: 'John' lastName value: 'Doe'

Slide 125

Slide 125 text

markTimestamp(person) symbols in the real world person firstName value: 'John' lastName value: 'Doe'

Slide 126

Slide 126 text

markTimestamp(person) person firstName value: 'John' lastName value: 'Doe' timestamp value: 1481236691 symbols in the real world person firstName value: 'John' lastName value: 'Doe'

Slide 127

Slide 127 text

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'

Slide 128

Slide 128 text

pessoa nome value: 'João' sobrenome value: 'Silva' person firstName value: 'John' lastName value: 'Doe' symbols in the real world

Slide 129

Slide 129 text

symbols in the real world markTimestamp(person) person firstName value: 'John' lastName value: 'Doe'

Slide 130

Slide 130 text

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'

Slide 131

Slide 131 text

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'

Slide 132

Slide 132 text

Symbols used to drive the language’s native implementations Well Known Symbols

Slide 133

Slide 133 text

Indexes the function used to check if an object is an instance of a constructor Well Known Symbols Symbol.hasInstance

Slide 134

Slide 134 text

Well Known Symbols Symbol.hasInstance bristol instanceof AwesomePlace

Slide 135

Slide 135 text

Well Known Symbols Symbol.hasInstance AwesomePlace[Symbol.hasInstance](bristol) bristol instanceof AwesomePlace

Slide 136

Slide 136 text

Well Known Symbols Symbol.hasInstance

Slide 137

Slide 137 text

Well Known Symbols

Slide 138

Slide 138 text

Well Known Symbols Symbol.toPrimitive

Slide 139

Slide 139 text

Well Known Symbols Symbol.toPrimitive Symbol.toStringTag

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

Well Known Symbols Symbol.toPrimitive Symbol.toStringTag Symbol.iterator And many others…

Slide 142

Slide 142 text

THANK YOU! MORE DETAILS AT LUCASFCOSTA.COM LUCASFCOSTA LFERNANDESCOSTA