Separating View from Model in webapps

Question

I often see web applications where a program is basically some javascript objects wrapping DOM objects. These JS objects perform all model, controller, and view functionality.

This seems ok to me with older style web applications where there really wasn't much model or controller functionality, but in newer more interactive applications, where entire programs are written on top of say Canvas or SVG... there seems like there should be more separation of these components.

Am I right in this or is there a reason why people lump everything together into big JS objects?

Answer 1

I agree -- I think a lot of developers are in the habit of thinking of Javascript as part of the view layer, and consequently not trying to add layering within the Javascript.

There are alternate approaches, of course. There are Javascript MVC frameworks: here's a nice article that talks about MVC within Javascript and links to several frameworks such as JavascriptMVC and SproutCore.

And here's a video describing an approach to modular Javascript applications: "Scalable Javascript Application Architecture".

Answer 2

Sproutcore is an html 5 javascript application framework that is very strongly mvc. There is a learning curve, but once you get it you get very good separation of concerns between models, views, controllers. Coupled with SC's binding magic, you write very little glue code; i.e. when you load your models from the store the views update automagically. The only work you do is to create the bindings from views -> controllers -> models. It really is very elegant.

I agree with you, as web applications get more and more complicated, MVC is only a good thing.