Tuesday, March 17th, 2009
Mamoo: Client-side MVC from Motionbox
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:
-
var MyModel = MBX.JsModel.create("MyModel");
-
var myController = MBX.JsController.create("myController", {
-
model: MyModel, // here we're saying: "please listen to MyModel"
-
-
// gets fired when an instance is created
-
onInstanceCreate: function (instance) {
-
alert("instance created");
-
},
-
-
// when you change an attribute on an instance, using the
-
// following syntax:
-
// instance.set("key", "value");
-
// instance.get("key"); - returns 'value';
-
onInstanceChange: function (instance, key) {
-
alert("instance changed its attribute: " + key);
-
},
-
-
//called when an instance is destroyed
-
onInstanceDestroy: function (instance) {
-
alert("instance destroyed");
-
}
-
});
-
var instance = MyModel.create(); // would alert "instance created"
-
instance.set("attr", "value"); // would alert "instance changed its attribute attr"
-
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:
-
Message = MBX.JsModel.create("Message");
-
-
MBX.MessageView = MBX.JsView.create({
-
model: Message,
-
-
onInstanceCreate: function (message) {
-
var li = this.buildLi(message);
-
$("message_list").insert(li);
-
},
-
-
buildLi: function (message) {
-
var li = new Element("li", { id: message.primaryKey() });
-
li.update(message.get('body'));
-
li.updatesOn(message, "body");
-
return li;
-
}
-
});
-
-
// This will add the ui element
-
var message = Message.create({ body: "this is my body!" });
-
-
// and if you change body, the ui will automatically update as well
-
message.set('body', "some other body");
Here's a screencast that goes into more detail:
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…
*event even
Hi,
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.
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…)
@tobowers: Sorry about misspelling it as “Maboo”; fixed it just now.