Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Art of the JavaScript Metaobject Protocol

The Art of the JavaScript Metaobject Protocol

This is part two of a two-part talk on given at NDC Oslo 2014. It is written in Markdown and was presented on-screen using Deckset.

Most of the code from the "JavaScript Combinators" is adapted from JavaScript Allongé and from its library, allong.es. The code from "The Art of the JavaScript Metaobject Protocol" was adapted from JavaScript Spessore. The material discussed in the talks is free to read online.

Reg Braithwaite

June 05, 2014
Tweet

More Decks by Reg Braithwaite

Other Decks in Programming

Transcript

  1. A Unified Theory of JavaScript Style, Part II The Art

    of the JavaScript Metaobject Protocol
  2. var sam = { firstName: 'Sam', lastName: 'Lowry', fullName: function

    () { return this.firstName + " " + this.lastName; }, rename: function (first, last) { this.firstName = first; this.lastName = last; return this; } }
  3. var sam = { firstName: 'Sam', lastName: 'Lowry' }; var

    Person = { fullName: function () { return this.firstName + " " + this.lastName; }, rename: function (first, last) { this.firstName = first; this.lastName = last; return this; } };
  4. function extend () { var consumer = arguments[0], providers =

    [].slice.call(arguments, 1), key, i, provider; for (i = 0; i < providers.length; ++i) { provider = providers[i]; for (key in provider) { if (provider.hasOwnProperty(key)) { consumer[key] = provider[key]; }; }; }; return consumer; }
  5. Mixins are many to _ extend(sam, Person); var peck =

    { firstName: 'Sam', lastName: 'Peckinpah' }; extend(peck, Person);
  6. Mixins are _ to many var HasCareer = { career:

    function () { return this.chosenCareer; }, setCareer: function (career) { this.chosenCareer = career; return this; } }; extend(peck, HasCareer); peck.setCareer('Director');
  7. function extendPrivately (receiver, mixin) { var methodName, privateProperty = Object.create(null);

    for (methodName in mixin) { if (mixin.hasOwnProperty(methodName)) { receiver[methodName] = mixin[methodName].bind(privateProperty); }; }; return receiver; };
  8. var peck = { firstName: 'Sam', lastName: 'Peckinpah' }; extendPrivately(peck,

    HasCareer); peck.setCareer("Director; peck.chosenCareer //=> undefined
  9. function forward (receiver, metaobject, methods) { if (methods == null)

    { methods = Object.keys(metaobject).filter(function (methodName) { return typeof(metaobject[methodName]) == 'function'; }); } methods.forEach(function (methodName) { receiver[methodName] = function () { var result = metaobject[methodName].apply(metaobject, arguments); return result === metaobject ? this : result; }; }); return receiver; };
  10. Four shades of gray 1.A mixin uses the receiver's method

    body, and executes in the receiver's context. 2.A private mixin uses the receiver's method body, but executes in another object's context. 3.Forwarding uses another object's method body, and executes in another object's context. 4.What uses another object's method body, but executes in the receiver's context?
  11. function delegate (receiver, metaobject, methods) { if (methods == null)

    { methods = Object.keys(metaobject).filter(function (methodName) { return typeof(metaobject[methodName]) == 'function'; }); } methods.forEach(function (methodName) { receiver[methodName] = function () { return metaobject[methodName].apply(receiver, arguments); }; }); return receiver; };
  12. “OOP to me means only messaging, local retention & protection

    & hiding of state-process*” Dr. Alan Kay
  13. function proxy (baseObject, optionalPrototype) { var proxyObject = Object.create(optionalPrototype ||

    null), methodName; for (methodName in baseObject) { if (typeof(baseObject[methodName]) === 'function') { (function (methodName) { proxyObject[methodName] = function () { var result = baseObject[methodName].apply( baseObject, arguments ); return (result === baseObject) ? proxyObject : result; } })(methodName); } } return proxyObject; }
  14. var stack = { array: [], index: -1, push: function

    (value) { return this.array[this.index += 1] = value; }, pop: function () { var value = this.array[this.index]; this.array[this.index] = void 0; if (this.index >= 0) { this.index -= 1; } return value; }, isEmpty: function () { return this.index < 0; } };
  15. var stackProxy = proxy(stack); stackProxy.push('first'); stackProxy //=> { push: [Function],

    pop: [Function], isEmpty: [Function] } stackProxy.pop(); //=> 'first'
  16. person var Person = { fullName: function () { return

    this.firstName + " " + this.lastName; }, rename: function (first, last) { this.firstName = first; this.lastName = last; return this; } };
  17. has-career var HasCareer = { career: function () { return

    this.chosenCareer; }, setCareer: function (career) { this.chosenCareer = career; return this; } };
  18. The fragile base class problem is a fundamental architectural problem

    of object-oriented programming systems where base classes (superclasses) are considered "fragile" because seemingly safe modifications to a base class, when inherited by the derived classes, may cause the derived classes to malfunction.
  19. var number = 0; function encapsulate (behaviour) { var safekeepingName

    = "__" + ++number + "__", encapsulatedObject = {}; function createContext (methodReceiver) { return proxy(methodReceiver); } function getContext (methodReceiver) { var context = methodReceiver[safekeepingName]; if (context == null) { context = createContext(methodReceiver); Object.defineProperty(methodReceiver, safekeepingName, { enumerable: false, writable: false, value: context }); } return context; } Object.keys(behaviour).forEach(function (methodName) { var methodBody = behaviour[methodName]; encapsulatedObject[methodName] = function () { var context = getContext(this), result = description[methodName].apply(context, arguments); return (result === context) ? this : result; }; }); return encapsulatedObject; }
  20. encapsulation lacks A Sense of Self function createContext (methodReceiver) {

    return Object.defineProperty( proxy(methodReceiver), 'self', { writable: false, enumerable: false, value: methodReceiver } ); }
  21. Private Methods var MultiTalented = encapsulate({ _englishList: function (list) {

    var butLast = list.slice(0, list.length - 1), last = list[list.length - 1]; return butLast.length > 0 ? [butLast.join(', '), last].join(' and ') : last; }, initialize: function () { this._careers = []; return this; }, addCareer: function (career) { this._careers.push(career); return this; }, careers: function () { return this._englishList(this._careers); } });
  22. if only we knew which methods were private... function createContext

    (methodReceiver) { var innerProxy = proxy(methodReceiver); privateMethods.forEach(function (methodName) { innerProxy[methodName] = behaviour[methodName]; }); return Object.defineProperty( innerProxy, 'self', { writable: false, enumerable: false, value: methodReceiver } ); }
  23. function encapsulate (behaviour) { var privateMethods = methods.filter(function (methodName) {

    return methodName[0] === '_'; }), publicMethods = methods.filter(function (methodName) { return methodName[0] !== '_'; }); // ... return publicMethods.reduce(function (acc, methodName) { var methodBody = behaviour[methodName]; acc[methodName] = function () { var context = getContext(this), result = behaviour[methodName].apply(context, arguments); return (result === context) ? this : result; }; return acc; }, {}); }
  24. has-name is independent var HasName = encapsulate({ name: function ()

    { return this.name; }, setName: function (name) { this.name = name; return this; } });
  25. has-career is independent var HasCareer = encapsulate({ career: function ()

    { return this.name; }, setCareer: function (name) { this.name = name; return this; } });
  26. we can Name our Dependencies var IsSelfDescribing = encapsulate({ name:

    undefined, career: undefined, description: function () { return this.name() + ' is a ' + this.career(); } });
  27. methods-of-type function methodsOfType (behaviour, type) { var methods = [],

    methodName; for (methodName in behaviour) { if (typeof(behaviour[methodName]) === type) { methods.push(methodName); } }; return methods; }
  28. Identifying Dependencies function encapsulate (behaviour) { var safekeepingName = "__"

    + ++number + "__", methods = Object.keys(behaviour).filter(function (methodName) { return typeof behaviour[methodName] === 'function'; }), privateMethods = methods.filter(function (methodName) { return methodName[0] === '_'; }), publicMethods = methods.filter(function (methodName) { return methodName[0] !== '_'; }), dependencies = Object.keys(behaviour).filter(function (methodName) { return typeof behaviour[methodName] === 'undefined'; });
  29. Partial Proxies function partialProxy (baseObject, methods, proxyPrototype) { var proxyObject

    = Object.create(proxyPrototype || null); methods.forEach(function (methodName) { proxyObject[methodName] = function () { var result = baseObject[methodName].apply(baseObject, arguments); return (result === baseObject) ? proxyObject : result; } }); return proxyObject; }
  30. Using Partial Proxies function createContext (methodReceiver) { var innerProxy =

    partialProxy( methodReceiver, publicMethods.concat(dependencies) ); privateMethods.forEach(function (methodName) { innerProxy[methodName] = behaviour[methodName]; }); return Object.defineProperty( innerProxy, 'self', { writable: false, enumerable: false, value: methodReceiver } ); }
  31. encapsulation's Key Features 1.The Receiver is encapsulated in an unenumerated

    property. 2.Separation of context and self. 3.Private methods. 4.Named Dependencies
  32. var SingsSongs = encapsulate({ _songs: null, initialize: function () {

    this._songs = []; return this; }, addSong: function (name) { this._songs.push(name); return this; }, songs: function () { return this._songs; } });
  33. var HasAwards = encapsulate({ _awards: null, initialize: function () {

    this._awards = []; return this; }, addAward: function (name) { this._awards.push(name); return this; }, awards: function () { return this._awards; } });
  34. var AwardWinningSongwriter = extend( Object.create(null), SingsSongs, HasAwards ), tracy =

    Object.create(AwardWinningSongwriter); tracy.initialize(); tracy.songs() //=> undefined
  35. Liskov Substitution Principle Substitutability is a principle in object-oriented programming.

    It states that, in a computer program, if S is a subtype of T, then objects of type T may be replaced with objects of type S (i.e., objects of type S may substitute objects of type T) without altering any of the desirable properties of that program
  36. function isUndefined (value) { return typeof value === 'undefined'; }

    function isntUndefined (value) { return typeof value !== 'undefined'; } function isFunction (value) { return typeof value === 'function'; }
  37. function orderStrategy2 () { if (arguments.length === 1) { return

    arguments[0]; } else { var fns = __slice.call(arguments, 0); return function composed () { var args = arguments, context = this, values = fns.map(function (fn) { return fn.apply(context, args); }).filter(isntUndefined); if (values.length > 0) { return values[values.length - 1]; } } } }
  38. function propertiesToArrays (metaobjects) { return metaobjects.reduce(function (collected, metaobject) { var

    key; for (key in metaobject) { if (key in collected) { collected[key].push(metaobject[key]); } else collected[key] = [metaobject[key]] } return collected; }, {}) }
  39. function resolveUndefineds (collected) { return Object.keys(collected).reduce(function (resolved, key) { var

    values = collected[key]; if (values.every(isUndefined)) { resolved[key] = undefined; } else resolved[key] = values.filter(isntUndefined); return resolved; }, {}); }
  40. function applyProtocol(seed, resolveds, protocol) { return Object.keys(resolveds).reduce( function (applied, key)

    { var value = resolveds[key]; if (isUndefined(value)) { applied[key] = value; } else if (value.every(isFunction)) { applied[key] = protocol.apply(null, value); } else throw "Don't know what to do with " + value; return applied; }, seed); }
  41. function canBeMergedInto (object1, object2) { var prototype1 = Object.getPrototypeOf(object1), prototype2

    = Object.getPrototypeOf(object2); if (prototype1 === null) return prototype2 === null; if (prototype2 === null) return true; if (prototype1 === prototype2) return true; return Object.prototype.isPrototypeOf.call(prototype2, prototype1); }
  42. var callLeft2 = (function () { if (typeof callLeft ==

    'function') { return callLeft; } else if (typeof allong === 'object' && typeof allong.es === 'object' && typeof allong.es.callLeft === 'function') { return allong.es.callLeft; } else { return function callLeft2 (fn, arg2) { return function callLeft2ed (arg1) { return fn.call(this, arg1, arg2); }; }; } })();
  43. function seedFor (objectList) { var seed = objectList[0] == null

    ? Object.create(null) : Object.create( Object.getPrototypeOf(objectList[0]) ), isCompatibleWithSeed = callLeft2(canBeMergedInto, seed); if (!objectList.every(isCompatibleWithSeed)) { throw 'incompatible prototypes'; } return seed; }
  44. function composeMetaobjects () { var metaobjects = __slice.call(arguments, 0), arrays

    = propertiesToArrays(metaobjects), resolved = resolveUndefineds(arrays), seed = seedFor(metaobjects), composed = applyProtocol(seed, resolved, orderStrategy2); return composed; }
  45. var Songwriter = encapsulate({ initialize: function () { this._songs =

    []; return this.self; }, addSong: function (name) { this._songs.push(name); return this.self; }, songs: function () { return this._songs; } });
  46. var Subscribable = encapsulate({ initialize: function () { this._subscribers =

    []; return this.self; }, subscribe: function (callback) { this._subscribers.push(callback); }, unsubscribe: function (callback) { this._subscribers = this._subscribers.filter( function (subscriber) { return subscriber !== callback; }); }, subscribers: function () { return this._subscribers; }, notify: function () { receiver = this; this._subscribers.forEach( function (subscriber) { subscriber.apply(receiver.self, arguments); }); } });
  47. var SongwriterView = { initialize: function (model, name) { this.model

    = model; this.name = name; this.model.subscribe(this.render.bind(this)); return this; }, _englishList: function (list) { var butLast = list.slice(0, list.length - 1), last = list[list.length - 1]; return butLast.length > 0 ? [butLast.join(', '), last].join(' and ') : last; }, render: function () { var songList = this.model.songs().length > 0 ? [" has written " + this._englishList(this.model.songs().map(function (song) { return "'" + song + "'"; }))] : []; console.log(this.name + songList); return this; } };