Adventures in Javascript MVC
I'm working on a project now which uses javascript mvc(jsmvc). I was tasked with enhancing site search to add functionality, but it morphed into also converting existing search to mvc pattern using jsmvc.
Having used backbone.js last October to build an mvc front end, this would be a useful opportunity to learn jsmvc and also compare and contrast to backbone.js
The existing search was not badly written by any means and followed the javascript module pattern. But with jsmvc I could separate the code into the model(s), views(s) and controller(s) and decompose the problem rather than use 1 big module. The resulting refactored code is 5 view templates, 2 controllers and 3 models.
Such breakup of the code is making the code more reusable and more flexible. Very good net effect.
The Javascript MVC documentation is real good, the jsmvc wiki is also helpful if a little outdated. There are tutorials and examples, but searching on google, I see alot more Backbone.js tutorials on the web. Not as easy to find (any) good javascript mvc tutorials. Just search and you'll see.
Besides the main mvc code classes (jQueryMX), Javascript MVC is comprised of a number of libraries including StealJS a code manager, FuncUnit a web app testing framework and DocumentJS for building documentation form code comments. Backbone does not include such libraries.
The philosophies are different: jsmvc could be your one stop shop, backbone is just one part.
Javascript MVC is a jQuery plugin and depends on JQuery. "jQueryMX is a collection of useful jQuery libraries that provide the missing functionality necessary to implement and organize large-scale jQuery applications". If you're not using jQuery then jsmvc is probably not for you (although you could still use features of the other libraries for documentation, testing, steal if u wanted).
jQuery.tmpl which comes with jsmvc is no longer supported. So don't develop in that. We're using ejs templates now.
Jslint and code beautify. The jsmvc Steal package comes with a script to beautify your code and also run jslint against it. The beautify changes in place but the jslint just lists the errors for you to fix. You trigger jslint by passing it as command line param.
You can run the script against a file or multiple files.Very nice and easy to use.
To beautify and jslint, from the root jsmvc folder I run the following command:
js steal/cleanjs ..\..\jel-joomla\public\javascript\search\controllers\searchresults_controller.js -jslint true
Use the jsmvc forum here.
The google groups forum is no longer supported I read: "Please ask on forum.javascriptmvc.com. We no longer maintain this forum. "
Javascript MVC automatically supports hierarchy of model objects. Backbone does not support directly.Is that a big deal? Perhaps not, depends on your use case. I have not used this jsmvc feature myself, but I like the idea of a model hierarchy hydrating automatically. However, that has to be balanced with performance concerns and lazy loading.
A View in Backbone is more of a view-controller hybrid. The backbone view handles ui events and can easily include business logic. This would be something to be wary of and other patterns such as command pattern may be more suitable. Jsmvc has controller classes, $.Controller, and the views are no more than html templates with a little control code inside. The same comment re command applies to jsmvc.
Eventing
Its worth understanding js mvc frameworks and contrasting but I think the most important step is to use mvc in your js code. Both jsmvc and backbone.js are quite similar and will get the job done.
In addition using other patterns such as pub sub, factory, command will really reap rewards as you develop your javascript in the large. There's a good actionscript framwork PureMVC which I've used in the past that makes extensive use of the command pattern, I think js mvc frameworks should provide better support for such a pattern.
Having used backbone.js last October to build an mvc front end, this would be a useful opportunity to learn jsmvc and also compare and contrast to backbone.js
The existing search was not badly written by any means and followed the javascript module pattern. But with jsmvc I could separate the code into the model(s), views(s) and controller(s) and decompose the problem rather than use 1 big module. The resulting refactored code is 5 view templates, 2 controllers and 3 models.
Such breakup of the code is making the code more reusable and more flexible. Very good net effect.
The Javascript MVC documentation is real good, the jsmvc wiki is also helpful if a little outdated. There are tutorials and examples, but searching on google, I see alot more Backbone.js tutorials on the web. Not as easy to find (any) good javascript mvc tutorials. Just search and you'll see.
Besides the main mvc code classes (jQueryMX), Javascript MVC is comprised of a number of libraries including StealJS a code manager, FuncUnit a web app testing framework and DocumentJS for building documentation form code comments. Backbone does not include such libraries.
The philosophies are different: jsmvc could be your one stop shop, backbone is just one part.
Javascript MVC is a jQuery plugin and depends on JQuery. "jQueryMX is a collection of useful jQuery libraries that provide the missing functionality necessary to implement and organize large-scale jQuery applications". If you're not using jQuery then jsmvc is probably not for you (although you could still use features of the other libraries for documentation, testing, steal if u wanted).
jQuery.tmpl which comes with jsmvc is no longer supported. So don't develop in that. We're using ejs templates now.
Jslint and code beautify. The jsmvc Steal package comes with a script to beautify your code and also run jslint against it. The beautify changes in place but the jslint just lists the errors for you to fix. You trigger jslint by passing it as command line param.
You can run the script against a file or multiple files.Very nice and easy to use.
To beautify and jslint, from the root jsmvc folder I run the following command:
js steal/cleanjs ..\..\jel-joomla\public\javascript\search\controllers\searchresults_controller.js -jslint true
Use the jsmvc forum here.
The google groups forum is no longer supported I read: "Please ask on forum.javascriptmvc.com. We no longer maintain this forum. "
Javascript MVC automatically supports hierarchy of model objects. Backbone does not support directly.Is that a big deal? Perhaps not, depends on your use case. I have not used this jsmvc feature myself, but I like the idea of a model hierarchy hydrating automatically. However, that has to be balanced with performance concerns and lazy loading.
A View in Backbone is more of a view-controller hybrid. The backbone view handles ui events and can easily include business logic. This would be something to be wary of and other patterns such as command pattern may be more suitable. Jsmvc has controller classes, $.Controller, and the views are no more than html templates with a little control code inside. The same comment re command applies to jsmvc.
Eventing
Its worth understanding js mvc frameworks and contrasting but I think the most important step is to use mvc in your js code. Both jsmvc and backbone.js are quite similar and will get the job done.
In addition using other patterns such as pub sub, factory, command will really reap rewards as you develop your javascript in the large. There's a good actionscript framwork PureMVC which I've used in the past that makes extensive use of the command pattern, I think js mvc frameworks should provide better support for such a pattern.
Comments
Post a Comment