Manipulating object-behavior-at-runtime

233 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
233
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Manipulating object-behavior-at-runtime

  1. 1. Manipulating ObjectBehavior at Runtimea talk by @andreiursanat meetup.com/gib-js, June 19, Meetup
  2. 2. Exploratory Programming,Hacking the System,Im a coder I can code
  3. 3. Motivation● Wanting to write DRY code○ Very DRY CodeSource code metrics RR#041, James’ example from Code Climate
  4. 4. Motivation● Wanting to write DRY code○ Very DRY CodeSource code metrics RR#041, James’ example from Code Climate
  5. 5. Dont Repeat Yourself Principle"DRY says that every piece of system knowledge should have oneauthoritative, unambiguous representation. Every piece of knowledge in thedevelopment of something should have a single representation. A systemsknowledge is far broader than just its code. It refers to database schemas, testplans, the build system, even documentation."DRY => SOLID => Design PatternsSource Orthogonality and the DRY Principle, Dont repeat yourself
  6. 6. Dont Repeat Yourself Principle"DRY says that every piece of system knowledge should have oneauthoritative, unambiguous representation. Every piece of knowledge in thedevelopment of something should have a single representation. A systemsknowledge is far broader than just its code. It refers to database schemas, testplans, the build system, even documentation."DRY => SOLID => Design PatternsSource Orthogonality and the DRY Principle, Dont repeat yourself
  7. 7. MechanismsInheritanceMixinsTraitsObject Composition
  8. 8. Problem DomainGame Engines, Game Editors, Widget Systems, CMSs,Interactive Systems.(order does not imply anything)ProblemAs a content creator, I want to be able to create CustomEntities in order to satisfy new use cases.Desired FeaturesAbility to add/remove behavior of an component/entitywithout changing the implementation.
  9. 9. Component Based SystemComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  10. 10. Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  11. 11. Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();asteroid.addComponent(new View(x=50, y=60));asteroid.x // 50Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  12. 12. Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();asteroid.addComponent(new View(x, y));asteroid.addComponent(new Movement());Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  13. 13. Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPeach component has adelegate which will handledependencies
  14. 14. Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPwhen you add acomponent to theCarcass. You set thecomponent delegateproperty to self (thecarcass self)
  15. 15. Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPmessages from thecomponent to the delegateare going to be Trapped bythe component carcass andhandle like any othermessage.
  16. 16. Handling MessagesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPhandleMessage will checkwhich component from the"array of components" knowshow to respond to thetrapped message. It willforward the message to thecorrect component and returnthe response
  17. 17. Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();asteroid.addComponent(new View(x, y));asteroid.addComponent(new Movement());asteroid.addComponent(new Player());Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  18. 18. Who Does This?Unity3DCrafty.jsmany others
  19. 19. Who Does This?Unity3DCrafty.jsmany others//PaddlesCrafty.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. 20. Who Does This?Unity3DCrafty.jsmany others
  21. 21. How to do it in JavaScriptTraits.jsDefine PrototypeProxyfunction 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() // redSource Traits.js
  22. 22. How to do it in JavaScriptTraits.jsDefine PrototypeProxy
  23. 23. How to do it in JavaScriptTraits.jsDefine PrototypeProxyA new feature inECMAScript 6.Flexible andexpressivemetaprogrammingsystem which is alsosecurable.
  24. 24. Proxyvar proxyObj = Proxy.create({get: function(obj, name) {return Hello, + name;},set: function(obj, name, value) {var log = "Property " + name +" doesnt like value " + value;console.log(log);return true;}});proxyObj> "TypeError"proxyObj.baz> Hello, bazproxyObj.foo = -3> Property foo doesnt like value -3
  25. 25. Proxyvar 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); // 2console.log(mystack[0]); // undefinedconsole.log(mystack.pop()); // "goodbye"Source nczonline.net
  26. 26. some more examplesgist.github.com/andreiursan/5825603
  27. 27. Resources1. [API] The new Proxy API (draft)2. [MDN] Old Proxy API3. Traits: Composable Units of Behavior4. Delegation - The White Paper[Google Tech Talk]5. Changes to ECMAScript - Proxies and Traits6. Brendan Eich - Proxies are Awesome!
  28. 28. Thank you!@andreiursanmeetup.com/gib-js, June 19, Meetup

×