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.
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.
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.
- 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:
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.