<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Front-end development

"JavaScriptMVC 3.0: Good To Go!"

Justin Meyer

"JavaScriptMVC 3.0: Good To Go!"

posted in Development on December 6, 2010 by Justin Meyer

"JavaScriptMVC 3.0: Good To Go!"

Justin Meyer by Justin Meyer

For the past year and a half, we've been pouring our heart into JavaScriptMVC 3.0. So it's with great excitement that we're ready to announce 3.0 is here to solve your JavaScript headaches. With over 1800 commits, the new version is faster, easier to use, and more powerful.

But with so much goodness, it's hard to know where to start. The following are the biggest and bad-ass-est changes to JavaScriptMVC:


FuncUnit is probably the best thing to happen to web testing ... ever. It makes automated tests extremely easy to write and debug. Tests look like jQuery code:

  setup : function(){

test('entering letters', function(){
    ok( this.text() , "" , "input field is empty")

test('entering letters', function(){
    ok( this.text() , "7" , "input has 7")

You can run this test in your browser, or automated via selenium.

Standalone Sub Projects

Despite JavaScriptMVC's tight integration, we've long understood that some people might not be able to use the entire framework. With 3.0, every part works standalone. So no matter the project, you can start benefitting from JavaScriptMVC's goodies. JavaScriptMVC is now the following 4 projects:

Each has its own website (coming soon), github repo, and forum. You can customize the jQueryMX download like jQueryUI and Mootools:


Of course, it all works a lot nicer together.

Multi-Page Builds

StealJS can optimize your scripts across several pages to get practically the fastest possible load times. We're not even aware of server-side dependency management tools that do this.

js steal/buildjs homepage profile tracks

This recursively finds the largest common dependencies between apps and puts them in a shared script. The result is the fewest number of scripts with the most optimal caching between pages.

Less and CoffeeScript Support

Sick of being stuck with JavaScript and CSS for the past 15 years, but you don't want to compile every time you make changes? We thought so. We've made it really easy to integrate other languages and technologies into StealJS's dependency management and build process. For example, create a LESS file like:

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;

#header {

#footer {

And a CoffeeScript file like:

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

And you can load them into your app like:


When it comes time to build, steal converts them into JS or CSS and packages them along with the rest of your files. But while developing, just refresh to see changes. Yep, it's amazing.

P.S. jQuery.View uses StealJS's ability to handle multiple languages to compress EJS, JAML, Micro, and jQuery.tmpl templates into your production package.

New Folder Structure

The secret to building large apps is to never build large apps. 3.0 is designed with this in mind. It makes it easy to build parts of your application as standalone plugins, each with their own demo page, tests, documentation, etc. Here's what our Srchr example looks like:


Notice how the each plugin (disabler and tabs shown here) has its own demo page, tests, and css. The final app simply 'steals' and wires up these plugins:

   // make a disable-able tab widget

Similarly, Srchr's test script just each plugin's test script to make a single test that runs all tests:


The result is it's extremely easy to develop and test part of your application in isolation and then integrate it with the rest of the app.

As a bonus, the new structure makes it easy to share (and use) other people's work. There are already third party plugins to use! If you're using git, you can add them as submodules or install them from the command line:

js steal/getjs mustache


JavaScriptMVC has a ton of functionality. But, we're committed to making its learning curve as short and flat as possible. With the exception of DocumentJS (ironic), every component has:

We also:

The Future

In the short term, we're going to stay focused on making 3.0 easier to use and learn. This means more blog articles, videos, demos etc.

But, in the long term, there's a few things we'd like to tackle:

A recorder / IDE for authoring FuncUnit tests. This will be similar to Syn's demo.

An asyncronous events extension to jQuery. We want to be able to pause and resume events like:

  $(this).load('/content', function(){

This will make it easy to weave in asynchronous extensions to widgets.

An extremely lightweight UI/widget library. We've already got a good collection of rough widgets in mxui. You should be able to weave in the features you need.

Integration with RequireJS and LabJS. In an ideal world, we want a script loader with the:

  • Namespace clean-ness of RequireJS
  • Speed of LabJS
  • Build features of StealJS


With 3.0, JavaScriptMVC is officially mature. We've added few purely new features from 2.0. Instead, we perfected existing features. FuncUnit is the best example of this. 2.0's testing could work in the browser and with Selenium. However, we:

  • Fixed Selenium's numerous synthetic event bugs with Syn.
  • Created a much nicer API - one that handles asynchronous functional programming extremely well.
  • Threw out our own assertion library and replaced it with qunit.
  • Made FuncUnit work stand-alone.

The result is that FuncUnit is very nearly the perfect web testing tool. And, as a result of hundreds of similar changes to the rest of the framework, JavaScriptMVC is now the perfect web development tool :-).

Create better web applications. We’ll help. Let’s work together.