Tuesday, March 17th, 2009

Mamoo: Client-side MVC from Motionbox

Category: Prototype

Over a year ago, we talked about Motionbox’s event handler sugar for Prototype. In the intervening time, they’ve gone and done what every other JavaScript developer does: created their own full-fledged framework. ;-)

Just a few days ago they announced Mamoo, short for “Motionbox Advanced Model Observer Observer”. In a nutshell, Mamoo builds on the foundation of observing events in a browser to provide a higher-level abstraction based on the same concept.

You create a model that contains your data, a controller to observe the model for changes, and the controller updates a view that updates the DOM with changes. Here’s a code sample of the model and controller pieces:

  1. var MyModel = MBX.JsModel.create("MyModel");
  2. var myController = MBX.JsController.create("myController", {
  3.     model: MyModel, // here we're saying: "please listen to MyModel"
  5.     // gets fired when an instance is created
  6.     onInstanceCreate: function (instance) {
  7.         alert("instance created");
  8.     },
  10.     // when you change an attribute on an instance, using the
  11.     // following syntax:
  12.     // instance.set("key", "value");
  13.     // instance.get("key"); - returns 'value';
  14.     onInstanceChange: function (instance, key) {
  15.         alert("instance changed its attribute: " + key);
  16.     },
  18.     //called when an instance is destroyed
  19.     onInstanceDestroy: function (instance) {
  20.         alert("instance destroyed");
  21.     }
  22. });
  23. var instance = MyModel.create(); // would alert "instance created"
  24. instance.set("attr", "value"); // would alert "instance changed its attribute attr"
  25. instance.destroy(); // would alert("instance destroyed");

The previous example omitted views. In Mamoo, a view is special-purpose controller with some sugar. Here’s an example of a view that creates a list:

  1. Message = MBX.JsModel.create("Message");
  3. MBX.MessageView = MBX.JsView.create({
  4.      model: Message,
  6.      onInstanceCreate: function (message) {
  7.          var li = this.buildLi(message);
  8.          $("message_list").insert(li);
  9.      },
  11.      buildLi: function (message) {
  12.          var li = new Element("li", { id: message.primaryKey() });
  13.          li.update(message.get('body'));
  14.          li.updatesOn(message, "body");
  15.          return li;
  16.      }
  17.  });
  19. // This will add the ui element
  20.  var message = Message.create({ body: "this is my body!" });
  22. // and if you change body, the ui will automatically update as well
  23.  message.set('body', "some other body");

Here’s a screencast that goes into more detail:

Posted by Ben Galbraith at 6:00 am

2.6 rating from 30 votes


Comments feed TrackBack URI

It looks like a lot of work has gone into Mamoo, which I respect. Isn’t it over-complicating the problem though? None of this stuff is beyond a little even delegation. And what is the cost of learning a whole MVC framework for the simple means of automated, retrospective DOM updating?

I didn’t even get the feeling that what was being done (in the screencast) was all that abstract and reusable…

Comment by sixtyseconds — March 17, 2009

*event even

Comment by sixtyseconds — March 17, 2009


One… it’s “Mamoo.” :-) No hard feelings.

Sixtyseconds – this was created for our “Motionbox Express Uploader (MXU).” We have tons of events and dom elements that get updated very frequently (upload progress, etc.). These all need to individually respond to user events too. It becomes a complex problem to solve over and over again for various types of objects. Mamoo was created very specifically to solve that problem.

Comment by tobowers — March 17, 2009

Seems complicated to me, and not very powerful .

Model should just be a hashmap or a pojo, View should not been embedded in the code and Controller should draw the view, observe its events, and publish the model to the view for it to render.

We can do MVC in a much easier and powerful way (have a look at ArchetypeJS or JavascriptMVC…)

Comment by temsa — March 17, 2009

@tobowers: Sorry about misspelling it as “Maboo”; fixed it just now.

Comment by Ben Galbraith — March 17, 2009

Leave a comment

You must be logged in to post a comment.