Comments on: Is There An Idiomatic Command Pattern Implementation For JavaScript?

By: coulix

coulix — Tue, 29 Jan 2013 12:30:00 +0000

Hi Derick, how would you do an undo/redo command pattern using marionnette command https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.commands.md ?

By: Dave Cadwallader

Dave Cadwallader — Sat, 18 Feb 2012 01:10:00 +0000

Just saw that your implementation of Marionette.AppRouter handles this decoupling nicely using the “controller” object.

However, this only works for Routes (URLs) and not for plain old application events.

I’d wonder if we could take this concept one step further, and allow an Application instance to bind “events” to “controller methods”. This would allow non-view “commands” to respond to application events dispatched onto the Event Aggregator (“vent”).

For instance, I might have a page that has a form and a “Save” button. When the button is clicked, I want to dispatch a “Save” event that gets picked up elsewhere by some non-view code.

On another note, do you support nested Marionette Applications? For instance, in a multi-tabbed layout, where the outer container is the “parent app” and each tab is a “child app”. The children want to have their own “vent” to handle events that only concern the tab, but they also want the ability to communicate with the parent shell for system-wide events such as opening a new tab, etc.

Thanks for the great articles and framework!

By: Dave Cadwallader

Dave Cadwallader — Fri, 17 Feb 2012 22:05:00 +0000

Hey Derick,
I’m really curious to hear what you’ve found out since you wrote this. I’m currently migrating a Flex-based UI to a JS architecture.

The Flex UI used a framework called Robotlegs which relied heavily on the Command Pattern, which provided a nice separation between a Context object (whose sole job is to map events to command classes) and the Command objects themselves which were just small single-purpose classes with an “execute()” method.

This made unit testing a breeze, with a nice clean decoupled architecture. I’m seeing part of the picture with the Backbone.Events code (and your Event Aggregator post, which is sort of like a Robotlegs Context) but I’d like to take it one step further and have separate Commands instead of callback functions that live within my view code.

If you haven’t found anything yet, I’d be very interested in collaborating to build what we need!

Thanks,
Dave

By: Derick Bailey

Derick Bailey — Mon, 21 Nov 2011 12:50:00 +0000

well, fortunately I know how to read JavaScript :D

that implementation is the same as what I showed here. maybe i should just flesh mine out a bit and be done with it.

By: Anonymous

Anonymous — Mon, 21 Nov 2011 04:22:00 +0000

I just ran across a Node.js app that is using the command pattern (and also a dependency injector, which is also interesting).

And it’s you’re luck day, because they wrote it in CoffeeScript!!!

https://github.com/idflood/ThreeNodes.js

Enjoy

By: Derick Bailey

Derick Bailey — Sat, 19 Nov 2011 04:46:00 +0000

there’s far more to messaging then just pub/sub. point-to-point (commands) and request/response are very valuable patterns that also have their place. there’s a semantic difference that is significant, and there’s often an implementation difference – though my simple example here obviously hasn’t shown one – hence my asking for a good, idiomatic implementation instead of just using what i provided as an example.

just because we technically can do everything as events doesn’t mean we should. this leads to terrible code. believe me – or my former coworkers. you can ask many of them about the horrible things i did to our systems by ignoring request/response and saying events or events + commands were good enough. :-/

semantics are important as they often lead to technical and implementation differences.

By: Domenic Denicola

Domenic Denicola — Sat, 19 Nov 2011 03:01:00 +0000

If you’re not doing undo-style examples, and you are in fact doing a messaging-type system, then this is definitely just event handling. In JavaScript circles this is often known as “pubsub.”

So, basically, the idiomatic way of doing commands in JavaScript is to rephrase your problem in terms of events.

By: Derick Bailey

Derick Bailey — Fri, 18 Nov 2011 23:41:00 +0000

other than the semantics, it is the same – hence my mentioning that in the post :)

but semantics are important, and a simple example like this isn’t going to have any differentiating features. a more feature complete example might… maybe… i dunno yet. i haven’t found one that I like, yet.

By: Adam Tybor

Adam Tybor — Fri, 18 Nov 2011 22:39:00 +0000

This just looks like standard event handling. Subscribe to a command with a callback, trigger the callback. Outside of linguistic semantics around a command vs event, what is the difference with your implementation?

By: Victor Kornov

Victor Kornov — Fri, 18 Nov 2011 22:38:00 +0000

this days I simply go for jQuery’s custom events (pseudo-code):
var controller = {
handler: function(data) {
console.log(data);
}
}
var model = {
event_happens: function() {
$(this).triggerHanler(‘event_command’, { data: ‘goes here’ });
}
};
$(model).bind(‘event_command’, controller.handler);
model .event_happens();