MVP pattern with Javascript framework?

Question

Has anyone been able to implement the MVP model with any javascript frameworks? I'm having trouble figuring out how to have the presenter -> view inversion from server code to javascript. I have some ideas, but kind of hackish and would like to see what others are doing.

Answer 1

The main goal with MVP is decoupling of different aspects in the code. Normally, in JavaScript, there are 3 major such aspects:

1. Event Handling
2. DOM manipulation
3. Server communication (AJAX calls)

For each of these concerns, there's a corresponding term from MVP:

1. EventHandling = Presenter
2. DOM Manipulation = View
3. AJAX calls = Model

Since indeed it is not always simple to implement the 3 aspects, an EVENT BUS may come in handy. This bus should be a singleton and all the events, raised in various context should be published on the bus. The Presenter needs to register to its events and react accordingly when events happen.

Here is how it would work:

First thing that happens is the page load. Listen to this using the normal event model or jQuery or whatever is convenient. Create the Model, the View and the Presenter. The Presenter needs to hold the View and Model instances since he's gonna use them.

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Remember that Presenter is the event handler so the bus should know about it and route events to it for handling:

bus.registerHandler(presenter);

The first event is the "init", which means the page has loaded and the MVP objects are all set:

bus.init(); // call this yourself

This would trigger something in the Presenter, like a function. I prefer the on... naming convention, in this example presenter.onInit(). This gives a chance to install UI listeners:

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

When the Submit button is clicked the bus.submit(formData) is called and this will route it to the handler -- presenter.onSubmit(formData):

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

And so on... The entire trick is binding the bus to the presenter and then you're in the loop.

Answer 2

My vote goes to Backbone.js. Even docs says it is MVC, I would say it is MVP.

• VIEW = html template (jQuery.template)
• MODEL = Backbone.Model
• PRESENTER = Backbone.View ( layer between your view-tempate and how to bound data to it, and more thins you can do) and what is best you can use in render method couple views (html templates) or switch which to use...

and what is best you still have controller

• CONTROLLER = Backbone.Controller

Alternative could be as @JoshRivers mentioned, knockoutJS but my personal opinion is that view template is overwhelmed with binding stuff.

And last note. Thing is View as V from either MVC or MVP is something which can be built from your template without coding it, make good HTML template parser and you are good to go :) Believe me, convention is your friend.

Answer 3

Another one, for jQuery folks: http://javascriptmvc.com/

Just a note that Ext JS also supports the MV(x) pattern since version 4.0, which I'll mention as an ex-Ext person. Like most frameworks, they too call it "MVC" (as does most everyone in the JS world, see TodoMVC, as opposed to TodoMVP). However from a practical standpoint, the tools are there in Ext to implement the C/P portion of the pattern as best fits your needs. Patterns are useful, but like most anything, can limit your thinking when treated dogmatically.