Model-View-Controller in jQuery
If you haven’t read it already, be sure to check out this post where I talk more about the motivation for this tutorial.
This MVC setup is perfect if you want to build an application like Jotlet.net, 280Slides.com, or even Gmail. If you’re aiming to build a more traditional web app like BaseCamp, Flickr, or Digg, then this still might be a good resource. A good rule of thumb: If you web application has 1 page load, then this is a great setup! If your app has more than 1 page load, read on anyways and you still might be able to apply some of these principles.
In the Wild
This MVC is being used at jotbook.net. Similar in principle to Workflowy, Jotbook lets you easily create new bulleted lists, share them, and edit them with anyone in realtime. The MVC is used to keep a full and update model of the list cached in the browser and automatically synchronized with the server using BAJAX. Check out the full source code at https://github.com/adamwulf/jotbook.
- Clean simple code
- Separate the logic of the view and the model
- Cache data on the client side – minimize AJAX calls
- Provide clean interface to data so disparate view objects can work together on same data model
- Maximize both model and view code reuse
I’ve split this tutorial into multiple Phases. Each phase builds upon the previous, and each has its own demo and sample code that it walks through (and download!). So be sure to check them all out!
The first Phase sets up the foundation on which all the other’s will rely – so it’s a great place to start. Each next phase will add a bit of functionality onto the code from the previous phase.