1. Manipulating Object
Behavior at Runtime
a talk by @andreiursan
at meetup.com/gib-js, June 19, Meetup

2. Exploratory Programming,
Hacking the System,
I'm a coder I can code

3. Motivation
● Wanting to write DRY code
○ Very DRY Code
Source code metrics RR#041, James’ example from Code Climate

4. Motivation
● Wanting to write DRY code
○ Very DRY Code
Source code metrics RR#041, James’ example from Code Climate

5. Don't Repeat Yourself Principle
"DRY says that every piece of system knowledge should have one
authoritative, unambiguous representation. Every piece of knowledge in the
development of something should have a single representation. A system's
knowledge is far broader than just its code. It refers to database schemas, test
plans, the build system, even documentation."
DRY => SOLID => Design Patterns
Source Orthogonality and the DRY Principle, Don't repeat yourself

6. Don't Repeat Yourself Principle
"DRY says that every piece of system knowledge should have one
authoritative, unambiguous representation. Every piece of knowledge in the
development of something should have a single representation. A system's
knowledge is far broader than just its code. It refers to database schemas, test
plans, the build system, even documentation."
DRY => SOLID => Design Patterns
Source Orthogonality and the DRY Principle, Don't repeat yourself

7. Mechanisms
Inheritance
Mixins
Traits
Object Composition

8. Problem Domain
Game Engines, Game Editors, Widget Systems, CMSs,
Interactive Systems.
(order does not imply anything)
Problem
As a content creator, I want to be able to create Custom
Entities in order to satisfy new use cases.
Desired Features
Ability to add/remove behavior of an component/entity
without changing the implementation.

9. Component Based System
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP

10. Component Carcass
CC + View
View + Movement
View + Movement + Player
var asteroid = new ComponentCarcass();
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP

11. Component Carcass
CC + View
View + Movement
View + Movement + Player
var asteroid = new ComponentCarcass();
asteroid.addComponent(new View(x=50, y=60));
asteroid.x // 50
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP

12. Component Carcass
CC + View
View + Movement
View + Movement + Player
var asteroid = new ComponentCarcass();
asteroid.addComponent(new View(x, y));
asteroid.addComponent(new Movement());
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP

13. Handling Dependencies
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP
each component has a
delegate which will handle
dependencies

14. Handling Dependencies
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP
when you add a
component to the
Carcass. You set the
component delegate
property to self (the
carcass self)

15. Handling Dependencies
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP
messages from the
component to the delegate
are going to be Trapped by
the component carcass and
handle like any other
message.

16. Handling Messages
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP
handleMessage will check
which component from the
"array of components" knows
how to respond to the
trapped message. It will
forward the message to the
correct component and return
the response

17. Component Carcass
CC + View
View + Movement
View + Movement + Player
var asteroid = new ComponentCarcass();
asteroid.addComponent(new View(x, y));
asteroid.addComponent(new Movement());
asteroid.addComponent(new Player());
Component Carcass
addComponent
removeComponent
handleMessage
MessageTRAP

18. Who Does This?
Unity3D
Crafty.js
many others

19. Who Does This?
Unity3D
Crafty.js
many others
//Paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
.color('rgb(255,0,0)')
.attr({ x: 20, y: 100, w: 10, h: 100 })
.multiway(4, { W: -90, S: 90 });
Crafty has a "Component Builders" community.
Source Crafty Github, Crafty Components

20. Who Does This?
Unity3D
Crafty.js
many others

21. How to do it in JavaScript
Traits.js
Define Prototype
Proxy
function makeColorTrait(col) {
return Trait({
color: function() { return col; }
});}
function makePoint(x, y) {
return Trait.create(Object.prototype,
Trait.compose(
makeColorTrait('red'),
Trait({ getX: function() { return x; },
getY: function() { return y; },
toString: function() { return ''+x+'@'+y; }
})));
}
var p = makePoint(0,2);
p.color() // 'red'
Source Traits.js

22. How to do it in JavaScript
Traits.js
Define Prototype
Proxy

23. How to do it in JavaScript
Traits.js
Define Prototype
Proxy
A new feature in
ECMAScript 6.
Flexible and
expressive
metaprogramming
system which is also
securable.

24. Proxy
var proxyObj = Proxy.create({
get: function(obj, name) {
return 'Hello, '+ name;
},
set: function(obj, name, value) {
var log = "Property " + name +
" doesn't like value " + value;
console.log(log);
return true;
}
});
proxyObj
> "TypeError"
proxyObj.baz
> Hello, baz
proxyObj.foo = -3
> Property foo doesn't like value -3

25. Proxy
var Stack = (function(){
var stack = [],
allowed = [ "push", "pop", "length" ];
return Proxy.create({
get: function(receiver, name){
if (allowed.indexOf(name) > -1){
if(typeof stack[name] == "function"){
return stack[name].bind(stack);
} else {
return stack[name];
}
} else {
return undefined;
}
}
});
});
var mystack = new Stack();
mystack.push("hi");
mystack.push("goodbye");
console.log(mystack.length); // 2
console.log(mystack[0]); // undefined
console.log(mystack.pop()); // "goodbye"
Source nczonline.net

26. some more examples
gist.github.com/andreiursan/5825603

27. Resources
1. [API] The new Proxy API (draft)
2. [MDN] Old Proxy API
3. Traits: Composable Units of Behavior
4. Delegation - The White Paper[Google Tech Talk]
5. Changes to ECMAScript - Proxies and Traits
6. Brendan Eich - Proxies are Awesome!

28. Thank you!
@andreiursan
meetup.com/gib-js, June 19, Meetup