Manipulating object-behavior-at-runtime
Upcoming SlideShare
Loading in...5
×
 

Manipulating object-behavior-at-runtime

on

  • 175 views

 

Statistics

Views

Total Views
175
Views on SlideShare
175
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Manipulating object-behavior-at-runtime Manipulating object-behavior-at-runtime Presentation Transcript

  • Manipulating ObjectBehavior at Runtimea talk by @andreiursanat meetup.com/gib-js, June 19, Meetup
  • Exploratory Programming,Hacking the System,Im a coder I can code
  • Motivation● Wanting to write DRY code○ Very DRY CodeSource code metrics RR#041, James’ example from Code Climate View slide
  • Motivation● Wanting to write DRY code○ Very DRY CodeSource code metrics RR#041, James’ example from Code Climate View slide
  • 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
  • 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
  • MechanismsInheritanceMixinsTraitsObject Composition
  • 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.
  • Component Based SystemComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  • Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  • Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();asteroid.addComponent(new View(x=50, y=60));asteroid.x // 50Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  • Component CarcassCC + ViewView + MovementView + Movement + Playervar asteroid = new ComponentCarcass();asteroid.addComponent(new View(x, y));asteroid.addComponent(new Movement());Component CarcassaddComponentremoveComponenthandleMessageMessageTRAP
  • Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPeach component has adelegate which will handledependencies
  • Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPwhen you add acomponent to theCarcass. You set thecomponent delegateproperty to self (thecarcass self)
  • Handling DependenciesComponent CarcassaddComponentremoveComponenthandleMessageMessageTRAPmessages from thecomponent to the delegateare going to be Trapped bythe component carcass andhandle like any othermessage.
  • 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
  • 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
  • Who Does This?Unity3DCrafty.jsmany others
  • 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
  • Who Does This?Unity3DCrafty.jsmany others
  • 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
  • How to do it in JavaScriptTraits.jsDefine PrototypeProxy
  • How to do it in JavaScriptTraits.jsDefine PrototypeProxyA new feature inECMAScript 6.Flexible andexpressivemetaprogrammingsystem which is alsosecurable.
  • 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
  • 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
  • some more examplesgist.github.com/andreiursan/5825603
  • 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!
  • Thank you!@andreiursanmeetup.com/gib-js, June 19, Meetup