From the jQuery Tangle to Javascript MVCs – Make the Leap

Categories Articles

This is a guest post by Tristan – one of the guys behind Paydirt – a slick time tracking and invoicing software designed for freelancers. Say hi on Twitter @paydirtapp


jQuery made doing stuff with Javascript a breeze, and the web quickly became a more dynamic and animated place. For plenty of newer web developers jQuery is almost synonymous with Javascript. If a developer wants to get something done, they’re equally likely to ask google how to do it with jQuery as Javascript.

jQuery is a powerful library, but now Javascript MVC frameworks are becoming an important part of the web too.

There are a lot of frameworks to choose from, and the new paradigm can take some getting used to, so today we’re looking at why learning to use a Javascript MVC framework will make you a happier and more capable developer, and why it’s worth your while.

So what is MVC?

To start, MVC stands for Model, View, Controller. These are the three components used to help you structure your application. The information your application manages are called Models, the user interfaces that present and modify that information are Views, and interactions from the user are managed by Controllers, which decide what needs to be done in response.

Actually, not every framework uses all three components, or uses them in exactly the same way. They’re also known as MV* frameworks (said M-V-star) because the controller component is sometimes left out, and it’s role is performed by the views and models instead.

The particular roles of Models, Views and Controllers are in many ways up for debate, and the various frameworks each have their own breakdown of these responsibilities.

Unless you’re interested in the semantic discussion, it should suffice to understand that MV* frameworks help you by breaking your Javascript application into logical and manageable pieces that work together to control the data, interface and how they interact.

Why should you go MVC?

jQuery makes manipulating the DOM really easy, but building more complex applications in jQuery alone can quickly become a tangle of bindings and callbacks with no particular structure, and can be a nightmare to maintain. In short, jQuery alone is perfect for small interactions (like a simple contact form), but falls apart as you add more complexity to your application.

Unless you’re some kind of guru, there’s simply an upper limit to the complexity of interface you can build with jQuery alone.

An MVC framework gives you a designated place to store information, breaks the parts of your interface down into templates, and helps you manage exactly what needs to happen to the data when something changes on the page, what what needs to happen to the page when something changes in the data.

Once you’ve got a logical place for every piece of information, interface and interaction, it becomes feasible to write much larger chunks of your application in Javascript.

If it’s not immediately apparent to you why that’s awesome, don’t worry, it wasn’t to me either.

  • You can make really responsive interfaces, because you don’t have to wait for the server to respond before you update the interface when the user does something.
  • If your whole application is written in javascript, you can pretty easily turn it into a phone app using a library like Phonegap.
  • Your server application becomes more like an API.
  • Modular code written in the MVC style is more easily reused in other projects.
  • You’ll be happier. Having a place for everything saves you the headache of debugging noodly code.
  • You can still use the jQuery skills you’ve learned in your MVP application.

Want to build an image slider? jQuery away! Want to build a tool like Trello? You’ll probably need an MVC framework to help…

How to choose a framework

One of the challenges of getting started is that there are a myriad of libraries to sort through and choose from.

Some popular choices are:

Javscript MVC frameworks
You’ll also have a choice of many different templating styles and libraries.

Again, my advice is to do a little reading, avoid getting bogged down in all the details at first, and then just learn one. You can check out some others later, and you’ll be better equipped to appreciate the differences after you’ve had some first-hand experience.

Projects like TodoMVC show you how the same outcome is achieved in different frameworks, and also illustrate that the same outcome can be achieved in many frameworks.

Don’t get paralysed, just get started!

Over at Paydirt, we churned through a few different combinations before finding one that really suited our needs and preferences. In the end we settled on Backbone.js and Haml Coffee Templates. We’ve never been happier!

Making the investment

If you’re a JS ninja, getting started with MVC will be a piece of cake.

For the rest of us, there can be a steep slope at the start of the learning curve. The extra code that structures your application is a huge help and opens up worlds of possibility, but it’s also a new paradigm to learn and a new way of doing things. You’ll likely be un-learning a lot of the bad habits you picked up doing everything the jQuery way.

Stick with it – I promise it’s worth your while. Once you get the hang of it, your MVC framework will be at the heart of almost everything you build in the browser, and soon enough you’ll wonder how you ever got anything done without it.

Tristan is one of the guys behind Paydirt - time tracking and invoicing software designed for freelancers and small teams. Check out their free invoice template to take it for a spin.

Say hi on Twitter @paydirtapp