26 July 2011

The benefits of Javascript MVC

As more and more web applications start appearing, developers are finding ways to develop leaner and release more often. A good way to get there is to move the Model-View-Controller stack from the back-end to the front-end. In doing so, much of the back-end becomes a restful API which rarely changes. User experience logic on the other hand becomes concentrated in Javascript. This allows you to push new UI changes often without breaking anything. Users with older versions of the front-end application (i.e. loaded yesterday) still have an application that works. You may have users with older versions of the front-end loaded in their browsers, and other users with the newer. But they both work because the back-end hasn't changed. How cool is that! In Planbox, we do exactly that. The key was to do MVC in Javascript (we use Backbone JS). New changes to the UI are pushed many times a day without impacting our user base. The benefits are numerous:
  • Easier to maintain code.  You start organizing your Javascript code into a clean, modular approach. Its no longer just pieces of spaghetti code used to perform dumb tasks like form validation. Jonathan Snook explains this well.
  • Debugging is easier. The Browser becomes the development environment. Hit F5 and see your new code running. All objects can be inspected and tested directly with Firebug.
  • Faster development. 75% of the code is now written in Javascript. We no longer have to ask ourselves: "should we code that logic in PHP or Javascript?". Never do we have port PHP code to Javascript.
  • Release often. Now that application logic is self contained and organized in Javascript, you can push new changes to production more regularly.
  • Shorter learning curve for new developers. Someone new on the team? He or she can get started fast solely with Javascript. Our mobile app was developed by Anthony, someone relatively new to web programming. It took him a month and he never had to touch one line of PHP.
So how do you get there? Well deciding on an MVC Javascript framework is a good start. I'm a big fan of lightweight frameworks. Have a look at Backbone JS. Also new on the block is Agility JS. There's a good list of Javascript MVC frameworks on this Stackoverflow thread.  
comments powered by Disqus