Finally found what I have been looking for: JavaScriptMVC

I'm very passionate about the code I write, and with the coming of jQuery I really began to love Javascript. But the Javascript I wrote was more of the procedural kind. I tried to split it up per page or user control but it still felt bad. For pages with a lot of interaction the JavaScript files grew very quickly over a couple hundred LOC. There is the possibility to split these up, but the problem that then arises is that the browser launches a request for each javascript file. And most (older) browsers have a suprising low amount of simultaneous request (I thought it was around 2 or 3, it was certainly below 5). So each file I added to make my application more maintainable resulted in a slower application. Not a good situation to be in.

I was constantly on the lookout for something that could easily minify and merge all my JavaScript files and still keep maintainability while developing. I had read solutions of people who had a build task that did this for them. But that seemed like a pretty vulnerable system. The build script has to create a new file on a certain location and has to change your pages so they include the correct javascript file (the newly generated one). So I lived with the pain.

Until I read about JavaScriptMVC on Ajaxian and decided to check it out. What is JavaScriptMVC?  I'll quote from their site:

JavaScriptMVC is a framework that brings methods to the madness of JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

So it uses some conventions and the MVC pattern to give you the ability to manage your JavaScript code. But the biggest thing I like so far is the possibility to run in different modes (development, test and production) and if you run in production all your javascript including your external libraries like jQuery get minified and combined into one javascript file. Yes that's right even if you have a dozen javascript files, after minifying them you'll only have one file called production.js left. The big advantage is that the browser only has to do one request to the server to load all of the javascript. You know what that means, faster loading times!

If you write a lot of JavaScript code, check out JavascriptMVC right now. I'll be writing more details about the framework in the coming weeks as I'm still in the process of learning it.


Comments

June 22. 2009 04:01 PM

Is that really that big an advantage?
How many different javascript files do you have?
I can imagine having some performance degradation when handling several files, but isn't that mostly an issue during the first load of a file. The other times the browser could just use the cached version.

I can imagine that combining everything into one big file could be faster, but wouldn't that depend on the total size of the javascript code and the amount of individual files before 'build'?
Any suggestion when this added development complexity is worth the benefit?

Sven Erkens

June 22. 2009 05:26 PM

We use jawr (https://jawr.dev.java.net/) for our java-based web application. It's been working great and I would recommend it. It consolidates our javascript and css files. Before we used it our login page was at 80+ GET requests; after jawr it now is in the 20's.
But just because a library consolidates your javascript doesn't make it MVC.

James Lorenzen

June 22. 2009 05:44 PM

@Sven the big advantage is that the framework uses MVC, you generate models, controllers and views for the different parts of your application without the fact that it 'punishes' you for structuring your code.
I'm currently working on an application that has 33 internal files (models and controllers) and 14 resource files (legacy code and libraries) and still growing.
It's obvious that the more Javascript code your application has, the more useful this framework becomes. But in order to prevent 'spaghetti' javascript code I would say it's worth with every application that has a decent lifespan. No matter the complexity.

@James I should have been clearer, this framework uses the MVC pattern to structure your Javascript code. You generate controllers, models and views for the different parts of your application and the consolidation of the javascript is just a part of it. I may have focused too much on that and not enough on the MVC part. I'll try to elaborate more on that in future posts.

Peter

July 6. 2009 09:54 PM

Trackback from Peter works on the web!

The MVC in JavaScriptMVC

Peter works on the web!

July 14. 2009 11:39 PM

Peter,
  Thanks for the article on JavaScriptMVC.  I'm very much in love with it as I'm the "corest" of it's contributors.

  JavaScriptMVC is really about taking the best JavaScript development ideas, improving them slightly and integrating them into a single package.  Compression is a perfect example.

  Dojo has a compression and build system (ShrinkSafe).  However, it's a little clunky to compress.  You have to write another script to figure out dependencies.  It doesn't deal with relative paths well.  JavaScriptMVC took shrink safe, but added Env.js to load your application in a simulated environment, grab the script tags, and compress to the production file.  We also made it really easy, as noted, to switch back and forth.

@Sven Compression isn't as important as concatenation.  According to Yahoo's performance team, the #1 most important thing websites can do is decrease the number of HTTP requests.  You can not rely on caching.

Justin Meyer

Add comment




  Country flag

biuquote
Loading