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