1
JavaScript Behind The Scenes
M E T A P R O G R A M M I N G
GitHub: lucasfcosta Twitter: lfernandescosta
lucasfcosta.com
Slide 2
Slide 2 text
2
GitHub: lucasfcosta Twitter: lfernandescosta
Slide 3
Slide 3 text
3
Why?
01
L e a r n h o w t o d e a l w i t h
t h i r d - p a r t y c o d e
02
U n d e r s t a n d h o w t h e l a n g u a g e
w o r k s b e h i n d t h e s c e n e s
03
S o l v e p r o b l e m s e l e g a n t l y
a n d c r e a t i v e l y
3
J A V A S C R I P T B E H I N D T H E S C E N E S
Slide 4
Slide 4 text
4
What is meta
programming?
J A V A S C R I P T B E H I N D T H E S C E N E S
Slide 5
Slide 5 text
program
program program
J A V A S C R I P T B E H I N D T H E S C E N E S
Slide 6
Slide 6 text
T H I S I S M E T A P R O G R A M M I N G
If you’re not having fun with what
you’re doing then you’re doing it
Wrong.
F O C U S O N T H E W H Y ?
But this is not exactly what we will talk about
Slide 7
Slide 7 text
T H I S I S M E T A P R O G R A M M I N G
If you’re not having fun with what
you’re doing then you’re doing it
Wrong.
F O C U S O N T H E W H Y ?
But this is not exactly what we will talk about
Java
Slide 8
Slide 8 text
T H I S I S M E T A P R O G R A M M I N G
If you’re not having fun with what
you’re doing then you’re doing it
Wrong.
F O C U S O N T H E W H Y ?
But this is not exactly what we will talk about
JavaScript
Slide 9
Slide 9 text
JavaScript
Java Java
Meta Level
Base Level
J A V A S C R I P T B E H I N D T H E S C E N E S
Slide 10
Slide 10 text
10
Reflective Meta Programming
base
level same as meta
level
J A V A S C R I P T B E H I N D T H E S C E N E S
Slide 11
Slide 11 text
reflective meta programming
I N T R O S P E C T I O N S E L F M O D I F I C AT I O N I N T E R C E S S I O N
11
Slide 12
Slide 12 text
J A V A S C R I P T B E H I N D T H E S C E N E S
12
Defines the structure of objects
Meta Object
Protocol
Defines the behavior of objects
Slide 13
Slide 13 text
13
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
meta object protocol
Slide 14
Slide 14 text
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
YO U R T I T L E H E R E
There are many variations of
passages of Lorem.
meta object protocol
J A V A S C R I P T B E H I N D T H E S C E N E S
ecma-international.org/ecma-262
14
Slide 15
Slide 15 text
J A V A S C R I P T B E H I N D T H E S C E N E S
ecma-international.org/ecma-262
Slide 16
Slide 16 text
16
OBJECT.* METHODS
Slide 17
Slide 17 text
O b j e c t . k e y s
Object.*
Methods O b j e c t . a s s i g n
O b j e c t . h a s O w n P r o p e r t y
O b j e c t . c r e a t e
O B J E C T . * M E T H O D S
17
O b j e c t . g e t O w n P r o p e r t y N a m e s
Slide 18
Slide 18 text
prevent
Extensions
O B J E C T . * M E T H O D S
seal
freeze
18
Restricting
Object
Manipulation
Slide 19
Slide 19 text
isExtensible
O B J E C T . * M E T H O D S
isSealed
isFrozen
19
Restricting
Object
Manipulation
Slide 20
Slide 20 text
20
PROPERTY DESCRIPTORS
Slide 21
Slide 21 text
P R O P E R T Y D E S C R I P T O R S
Objects that describe
properties’ characteristics.
Property Descriptors
21
Slide 22
Slide 22 text
22
Property
Descriptors'
Properties
Describe properties’
characteristics
P R O P E R T Y D E S C R I P T O R S
Property
Slide 23
Slide 23 text
23
Property
Descriptors'
Properties
Describe properties’
characteristics
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 24
Slide 24 text
24
value
The real value of a
property
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 25
Slide 25 text
25
enumerable
Indicates if this key
shows up when
enumerating properties
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 26
Slide 26 text
26
writable
Indicates if we can write
to this property by using
the assignment operator
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 27
Slide 27 text
27
configurable
Indicates if we can
change this properties’
descriptor
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 28
Slide 28 text
28
get
A function to be called on
property access
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 29
Slide 29 text
29
set
A function to be called
when assigning a value
to a property by using
the assignment operator
P R O P E R T Y D E S C R I P T O R S
Property
value
enumerable
get
set
configurable
writable
Slide 30
Slide 30 text
30
Object.defineProperty
P R O P E R T Y
N A M E
O B J E C T D E S C R I P T O R
P R O P E R T Y D E S C R I P T O R S
Slide 31
Slide 31 text
31
P R O P E R T Y D E S C R I P T O R S
O B J E C T P R O P E R T Y N A M E
Object.getOwnPropertyDescriptor
Slide 32
Slide 32 text
32
P R O P E R T Y D E S C R I P T O R S
O B J E C T
getPrototypeOf
P R O T O T Y P E P R O P E R T Y
getOwnPropertyDescriptor
Retrieving Property Descriptors
Slide 33
Slide 33 text
33
Properties calculated
only when needed.
LAZY PROPERTIES
P R O P E R T Y D E S C R I P T O R S
Slide 34
Slide 34 text
34
bananas: 2
apples: 3
weight: 500
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
basket
Slide 35
Slide 35 text
35
bananas: 3
apples: 3
weight: 600
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
basket
Slide 36
Slide 36 text
36
bananas: 3
apples: 4
weight: 700
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
too many assignments
to the weight property
basket
Slide 37
Slide 37 text
37
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties basket
Slide 38
Slide 38 text
38
bananas: 3
apples: 3
weight: [getter]
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties basket
Slide 39
Slide 39 text
39
bananas: 3
apples: 3
weight: [getter]
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
01 b a s k e t .w e i g h t
basket
Slide 40
Slide 40 text
40
bananas: 3
apples: 3
weight: [getter]
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
01 b a s k e t .w e i g h t
02 [ g e t t e r] i s c a l l e d
basket
Slide 41
Slide 41 text
41
bananas: 3
apples: 3
weight: [getter]
P R O P E R T Y D E S C R I P T O R S
Lazy
Properties
01 b a s k e t .w e i g h t
02 [ g e t t e r] i s c a l l e d
03
basket
c a l c u l a t e s t h e w e i g h t a n d
r e t u r n s 6 0 0
Slide 42
Slide 42 text
42
FLUID APIS
Assertion Library for Node & Browsers
P R O P E R T Y D E S C R I P T O R S
Slide 43
Slide 43 text
43
FLUID APIS
expect('word').to.be.a('string');
expect([1, 2, 3]).to.have.length(3);
P R O P E R T Y D E S C R I P T O R S
Slide 44
Slide 44 text
44
FLUID APIS
expect('word').to.be.a('string');
expect([1, 2, 3]).to.have.length(3);
P R O P E R T Y D E S C R I P T O R S
the most obvious thing™
Slide 45
Slide 45 text
45
Assertion
P R O P E R T Y D E S C R I P T O R S
Slide 46
Slide 46 text
46
instanceof
above
empty
include
equal
property
Assertion
P R O P E R T Y D E S C R I P T O R S
Slide 47
Slide 47 text
47
P R O P E R T Y D E S C R I P T O R S
expect(person).to.be.deep.equal({ name: ‘John’});
Slide 48
Slide 48 text
48
wrap personObj into an
Assertion object
P R O P E R T Y D E S C R I P T O R S
expect(person)
returns this
Slide 49
Slide 49 text
49
be
to
deep
r e t u r n s t h i s
s e t s t h e d e e p
f l a g t o t r u e
r e t u r n s t h i s
P R O P E R T Y D E S C R I P T O R S
r e t u r n s t h i s
Slide 50
Slide 50 text
50
equal({ name: ‘John’ })
c o m p a r e s t h e
w r a p p e d o b j e c t t o t h e
o b j e c t p a s s e d t o i t
u s i n g d e e p e q u a l i t y
c h e c k s i f t h e d e e p
f l a g i s s e t i n t h e
A s s e r t i o n o b j e c t
P R O P E R T Y D E S C R I P T O R S
Slide 51
Slide 51 text
51
PROXIES
Slide 52
Slide 52 text
P R O X I E S
Object wrappers which allow
us to intercept operations
Proxies
52
Slide 53
Slide 53 text
53
A proxy’s
composition
handler
[traps]
target
[wrappedObj]
Proxies are transparent
Handlers access the target so they
won’t trigger their own traps
P R O X I E S
proxy
Slide 54
Slide 54 text
54
P R O X I E S
Slide 55
Slide 55 text
P R O X I E S
55
01
A handler has traps
A target is the object to be wrapped
How Proxies work
handler
[get]
target
{ name: ‘John’ }
Slide 56
Slide 56 text
P R O X I E S
56
02
Wrap the target and
handler into a Proxy
03 Access the propName property
handler
[get]
target
{ name: ‘John’ }
proxy
const p = new Proxy(target, handler)
Slide 57
Slide 57 text
P R O X I E S
57
04
Handler’s get trap gets called
05
handler
[get]
target
{ name: ‘John’ }
proxy
handler.get(target, propName)
handler.get(target, propName) is
the result of this access
Slide 58
Slide 58 text
58
Safety constraints
Invariants
Preserves universality
P R O X I E S
Slide 59
Slide 59 text
59
handler
[isExtensible]
target
[wrappedObj]
P R O X I E S
proxy
Invariants
Object.isExtensible(proxy)
must return the same value
as Object.isExtensible(target).
Slide 60
Slide 60 text
60
Emulating Haskell’s
Infinite Arrays
Lazy properties
Property access traps
P R O X I E S
Slide 61
Slide 61 text
P R O X I E S
61
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[0]
u n d e f i n e d
Slide 62
Slide 62 text
P R O X I E S
62
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[0]
u n d e f i n e d
Slide 63
Slide 63 text
P R O X I E S
63
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[0]
u n d e f i n e d
Slide 64
Slide 64 text
P R O X I E S
64
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[0]
u n d e f i n e d
Slide 65
Slide 65 text
P R O X I E S
65
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[3]
u n d e f i n e d
Slide 66
Slide 66 text
P R O X I E S
66
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[3]
u n d e f i n e d
Slide 67
Slide 67 text
P R O X I E S
67
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[3]
u n d e f i n e d
Slide 68
Slide 68 text
P R O X I E S
68
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[3]
c a l c u l a t e s t h e
v a l u e f o r i n d e x 3
u n d e f i n e d
Slide 69
Slide 69 text
P R O X I E S
69
Emulating Haskell’s Infinite Arrays
0
target
0
handler
1
2
2
4
3
[ g e t ]
evens[3]
6
c a l c u l a t e s t h e
v a l u e f o r i n d e x 3
6
Slide 70
Slide 70 text
P R O X I E S
70
Emulating Haskell’s Infinite Arrays
Slide 71
Slide 71 text
71
Property
Suggestions
Help your users figure out how
to use your API properly
P R O X I E S
Slide 72
Slide 72 text
72
PROPERTY SUGGESTIONS
expect(myVar).to.be.ture;
P R O P E R T Y D E S C R I P T O R S
typo!
Slide 73
Slide 73 text
73
expect(myVar).to.be.ture;
P R O P E R T Y D E S C R I P T O R S
typo!
Returns undefined
PROPERTY SUGGESTIONS
Slide 74
Slide 74 text
74
expect(myVar).to.be.ture;
P R O P E R T Y D E S C R I P T O R S
typo!
Does not trigger [get]
PROPERTY SUGGESTIONS
Slide 75
Slide 75 text
75
expect(myVar).to.be.ture;
P R O P E R T Y D E S C R I P T O R S
typo!
No assertions run!
PROPERTY SUGGESTIONS
Slide 76
Slide 76 text
P R O X I E S
76
n a m e
J o h n
a g e h e i g h t
1 8 0
i s D e v
[ g e t ]
Property suggestions
target
handler
2 8 t r u e
person['nsme']
Slide 77
Slide 77 text
P R O X I E S
77
n a m e
J o h n
a g e h e i g h t
1 8 0
i s D e v
[ g e t ]
Property suggestions
target
handler
2 8 t r u e
person['nsme']
Slide 78
Slide 78 text
P R O X I E S
78
n a m e
J o h n
a g e h e i g h t
1 8 0
i s D e v
[ g e t ]
Property suggestions
target
handler
2 8 t r u e
person['nsme']
Slide 79
Slide 79 text
P R O X I E S
79
n a m e
J o h n
a g e h e i g h t
1 8 0
i s D e v
[ g e t ]
Property suggestions
target
handler
2 8 t r u e
person['nsme']
levenshtein(propName, target)
Slide 80
Slide 80 text
P R O X I E S
80
n a m e
J o h n
a g e h e i g h t
1 8 0
i s D e v
[ g e t ]
Property suggestions
target
handler
2 8 t r u e
person['nsme']
levenshtein(propName, target)
“Did you mean ‘name’?"
Slide 81
Slide 81 text
J A V A S C R I P T B E H I N D T H E S C E N E S
81
A functional alternative to
keywords
Reflect
More meaningful return values
Slide 82
Slide 82 text
P R O X I E S
82
Reflecting Operations
Reflect[[trapName]](…args)
get set has ownKeys
Slide 83
Slide 83 text
P R O X I E S
83
Reflecting Operations
Same interfaces!
Slide 84
Slide 84 text
84
SYMBOLS
Slide 85
Slide 85 text
S Y M B O L S
A primitive type
introduced in ES6.
Symbols
85
Slide 86
Slide 86 text
86
S Y M B O L S
Symbol symbol
!==
Primitive
Global Function
Slide 87
Slide 87 text
S Y M B O L S
87
new Symbol(‘description’)
Symbol(‘description’)
new denotes the
creation of an object
returns a symbol
primitive
Slide 88
Slide 88 text
S Y M B O L S
Primitive symbols are unique.
88
Symbol('id') !== Symbol('id')
Symbol.for('id') === Symbol.for(‘id')
Global
Registry
Local
Slide 89
Slide 89 text
89
01
S Y M B O L S
We need to add
information to third
party objects
propName
'value'
object
Avoiding accidental
assignments
Slide 90
Slide 90 text
90
S Y M B O L S
02
propName
'value'
timestamp
object
1389398400
markTimestamp(object)
adds a property indexed
by timestamp to this
object
Slide 91
Slide 91 text
91
03
S Y M B O L S
Someone not aware of
this can assign to the
timestamp property
accidentally and break
our program
propName
'value'
object
object.timestamp =
1494201600
timestamp
1494201600
Slide 92
Slide 92 text
92
S Y M B O L S
propName
'value'
object
Symbol(timestamp)
1494201600
Avoiding accidental
assignments
Object.getOwnPropertySymbols
Slide 93
Slide 93 text
Symbols are all about Reflection
within implementation
K E I T H C I R K E L
S Y M B O L S
93
Slide 94
Slide 94 text
94
WELL
KNOWN
SYMBOLS
Well known symbols
are used to drive the
language’s native
implementations.
S Y M B O L S
Slide 95
Slide 95 text
95
fluent instanceof AwesomeConf
Symbol.hasInstance
S Y M B O L S
AwesomeConf[Symbol.instanceOf](fluent)
Slide 96
Slide 96 text
96
Well Known Symbols
S Y M B O L S
S y m b o l . i t e r a t o r S y m b o l . h a s I n s t a n c e
S y m b o l .t o P r i m i t i v e
Slide 97
Slide 97 text
S Y M B O L S
97
Slide 98
Slide 98 text
98
THANK YOU
# F l u e n t C o n f 2 0 1 7
GitHub: lucasfcosta Twitter: lfernandescosta
lucasfcosta.com