I’ve been doing most of my JavaScript development over the past 12 months in a Model-View-Controller pattern. This separation of function has a multitude of benefits for a programmer — it enables writing of clearer, more readable code, can result in more modular, reusable code and, perhaps most importantly, it enables a Test-driven approach to development.
Now A List Apart has published their own JavaScript MVC tutorial. It’s very useful, and very easy to follow. I recommend it as a starting point if you’re interested in this method of development.
Developing JavaScript in an MVC pattern is an especially good fit for web developers familiar with the now widespread, if not quite ubiquitous, separation of form and content in their programming methodology. Something like the paradigm which you apply to delivery of web content using HTML to provide data and CSS to provide the look and feel can be applied to JavaScript in an MVC pattern, where the Model provides the data, as might a server-side database, the Controller plays the part of the web server delivering that data and the View is the browser itself, rendering content to the page.
I’d also encourage developers to roll their own MVC framework rather than dive right in and using one of the existing ones, at least initially. It will give you a much better understanding of the pattern, it’s benefits and probably pitfalls, and will let you comfortably learn to extend your programming prowess at your own pace.
Note: you could also implement JavaScript on the server side using MVC, with the caveat that your View function is possibly less conceptually decoupled, but once you’re happy with the pattern this shouldn’t hamper you too much.
A List Apart: JavaScript MVC by Jonathan Snook
“At this stage of JavaScript and Ajax development and adoption, we need to consider separating our code’s components—MVC-style. Such separation may not be necessary in every situation—in some cases, it may even make things needlessly verbose. As our applications get more complex and require JavaScript interactions across multiple parts of our sites, however, separating JavaScript into Model, View, and Controller parts can produce more modular, reusable code.”
Ben Godfrey: Client-side MVC is maturing
“MVC is the dominant model for UI development in the desktop world. A modified form is very popular in web development. It makes a lot of sense to stick to MVC for RIA development. RIAs running in the browser (or Flash or AIR) bear close resemblance to desktop applications.”
A list of JavaScript MVC libraries and associated stuff:
I don’t use any of these, but they might be helpful for developers in a hurry. To be honest, the vast majority of my stuff is really VCS (View, Controller, Service), where the Service layer may be a remote API or HTML fragment which you needn’t model, but adding a Service layer isn’t a great leap once you’ve made the conceptual jump from more basic procedural JavaScript programming to MVC.
Tags: mvc javascript
very cool & good tip, thank you very much for sharing.
Can I share this snippet on my JavaScript library?
Awaiting your response. Thank
Great post. I would highly recommend looking a JSpec to test your js: http://visionmedia.github.com/jspec/ It’s very readable, and the author is very friendly, and will usually fix/patch any requests the same day!
One thing though, isn’t MVC js the same as SVC js. Surely the model just communicates either with a remote API or with your own server, or whatever else it needs to to provide the data. Or am I missing something?