Tuesday, October 27th, 2009

JavaScriptMVC 2.0: Major Rewrite, Strong Test Suite Integration and Improved Documentation

Category: JavaScript

<>p>The JavaScriptMVC team has announced v2.0, a major update & rewrite to their MVC-based JavaScript framework. The release incorporates several big changes including a rewrite of the library to leverage jQuery’s functionality and style guidelines. For example, if you have a list of entries, you can organize the event handlers like:

javascript
< view plain text >
  1. $.Controller.extend("EntriesController",{
  2.   ".entry click" : function($el, ev){ ...}
  3.   ".handle draginit" : function($el, ev, drag){ ... }
  4.   ".trash dropon" : function($el, ev, drop, drag){ ...}
  5. }

And then add ‘EntryController’ functionality like:

javascript
< view plain text >
  1. $('.entries_list').entries_controller();

The new release of JSMVC offers deep integration with the Selenium web application testing system, Env.js and the projects own in-browser testing library. JavaScriptMVC has integrated all three approaches, enabling developers to write and debug tests in the browser, but automatically run the same tests in Selenium and Rhino/Env.js.

JMVC’s documentation application has also undergone a major enhancement. The interface, based off Remy Sharp’s jQuery API Browser, allows rapid search of any part of your documentation.

A video explaining the new enhancements can be found here.

Related Content:

Posted by Rey Bango at 3:00 pm
10 Comments

++---
2.1 rating from 67 votes

10 Comments »

Comments feed TrackBack URI

Thanks for the shout out. There’s also a million little performance tweeks, but fixes, api refinements etc. It’s the best way to organize a big JavaScript/jQuery project.

Comment by JustinMeyer — October 27, 2009

A development I am anxiously waiting for to mature. JavaScript MVC now desperatly needs more extensive documentation, code examples and tutorials. Otherwise this will remain a fringe project, whilst it totally deserves to become a standard framework like Spring MVC is to Java.

Comment by BenGerrissen — October 28, 2009

Thanks for the comment Ben. Being the 3rd version it is rather mature. I think the most important features are document. But, I completely agree about the code examples and tutorials. We’ve made our 2-day training session ppt’s available here: http://javascripttraining.s3.amazonaws.com/training.zip.

Thanks for the feedback.

Comment by JustinMeyer — October 28, 2009

@Justin, there are still quite a few abstraction steps possible as well as escaping the global scope entirely to prevent conflicts with other libraries (or as I like to call it, ’3rd party crap’). I might contribute some ideas/code very soon.

Comment by BenGerrissen — October 28, 2009

Ben, I am not sure what you mean by abstraction steps. But escaping the global scope would be rather difficult due to JMVC’s everything is a plugin nature. Currently, JMVC only adds to the jQuery namespace. Well, it does add an ‘include’, but that can be avoided.

I haven’t tested it, but someone should be able to use jQuery.noConflict(true) after all JMVC files have loaded to revert jQuery.

Comment by JustinMeyer — October 28, 2009

Hello, I know the MVC pattern(Zend), and I use for my internet applications …
I want to know when I can use the MVC pattern in javascript, I don’t understand the interest for a website (particularly the views).
What are your objectives? applications like air (local)? , a competitor to Jaxer (if yes, is it possible to use V8 Chrome)?
My questions are can be irrelevant, I just need to see a little clearer.

bye ++

Comment by Kimoja — October 28, 2009

@Kimoja

JavaScriptMVC is build for large, custom, single page, JavaScript applications (think something like gmail).

By custom, I mean that JMVC doesn’t come with any pre-packaged widgets. Instead it adds an organizational layer of code to build from. The goal is to force developers to build their applications in a repeatable way that achieves a separation of concerns.

The best example is with a controller. You might have something like:

$('#entries').find('.entry').click(function(){}).end().find(".handle").draggable(...)

Instead with controllers, you can organize, cleanly label (anonymous functions are bad if you want to reuse), and constrain a particular piece of code to a specific file and to a specific part of the dom:

$.Controller.extend(‘EntriesController’,{
“.entry click” : function(){},
“.handle draginit” : function(){}
})

JMVC requires you do a tiny bit more work, but you end up with code that is easier to read, deal with state, etc.

On Views, views are really just client side templates. Because of event delegation, JMVC doesn’t have to use the swing style views you’ll find everywhere else – where you create a ‘Slider’ and you pass it callbacks.

Instead, you simply render your slider’s html and listen for events on it. Views are there to keep people from adding/concatenating html strings with JavaScript.

Comment by JustinMeyer — October 28, 2009

@JustinMeyer
thank you for your response, and good continuation!

Comment by Kimoja — October 29, 2009

No offense but JMVC seems to be a bit unnecessary. It’s solving an code organization issue we as front-end developers have in quite the wrong way. Perusing through the API docs I find nothing but a half-hearted attempt to bring pieces of Rails ideologies into the front-end.

My first gripe with JMVC was the use of markup (more specifically an element’s class attribute) to store model relation information. From the API docs:

...

According to the documentation, this DIV is a task with an ID of 5. This is not a proper use of the class attribute.

It also promotes its use of event delegation as if it’s a brand new concept. Look at this example provided in the API docs:

//Instead of:
$(function(){
$('#tasks').click(someCallbackFunction1)
$('#tasks .task').click(someCallbackFunction2)
$('#tasks .task .delete').click(someCallbackFunction3)
});

//do this
$.Controller.extend('TasksController',{
'click': function(){...},
'.task click' : function(){...},
'.task .delete' : function(){...}
})
$().tasks_controller();

I’m sorry but this made me shudder a bit. Our method names have CSS selectors plus event names in them.

And the test framework feels unnecessary with the abundance of other mature unit test frameworks out there.

For those of you that haven’t, take a look at the YUI3: Design Goals and Architecture video. As a (relatively) long time jQuery user, YUI3 is a real eye opener. It makes jQuery look like a child’s toy. :-)

Comment by bentruyman — October 30, 2009

It appears my first code example from the API docs didn’t make it through the Ajaxian comment scrubber. But here’s the page I’m talking about: http://javascriptmvc.com/#&who=jQuery.Controller . The first code example is the one I was referencing.

Comment by bentruyman — October 30, 2009

Leave a comment

You must be logged in to post a comment.