MVC4-Marionette TodoMVC Template

It has been some time since I last posted, and honestly I'm not sure how long it will be until the next.... But I try to leave my interesting findings on this blog when I have the time. Lately I have been totally devoted to various single page application frameworks, and all of us in the development community have seen a great deal of popularity in this area lately. Single page javascript applications are fast, do most of their work on the client browser, and scale easily. They also make applications much more responsive because most of your client/server requests are lessened to the JSON model data returned by the asynchronous ajax requests your application makes after the initial page load. Google's Gmail is a great example of a SPA. The days of reloading/resubmitting lots of html from the server to the browser after each page request are coming to a close.

There are a large number of SPA frameworks gaining steam, notably Durandal, Backbone, and Angular JS. Each of these SPA variants often share many of the same core ideas, approaches, and libraries for implementing SPAs:

Typically there is the following components in a good SPA framework:

• A templating library for interactive HTML templates (example library: Underscore js)
• A binding library for DOM/HTML & Javascript application interaction. This typically handles things like application events, callbacks, model HTML bindings (example libraries: Knockout, Backbone)
• A routing library for handling client side application routing (example libraries: Sammy js, Backbone)
• AMD libraries for module definitions. These enable you to use common patterns for defining separated modules and make up for some of the inherent limitations of the javascript language. An example widely used in most SPAs today is Require js. 
• Methods for synchronizing or serializing your model data to and from the server (whether this is via a service or directly to database file) OR HTML5's local storage (which has become quite useful for many test applications). Some example libraries for this include Breeze js and Backbone js. 

As you can see, Backbone is a pretty extensive framework for building single page apps, thus the reason it is being used by many of the most popular websites in the world today. There are also many extensions available (such as Marionette) which simplify the development process and reduce the amount of repeatable code you need to write.

I have recently begun work on a simple SPA for a client and decided to share my template for the rest of the community. It makes use of the following frameworks:

• Underscore
• Backbone
• Marionette
• Twitter Bootstrap styling
• Require
• MVC4/Web API

I have not included any Web API methods in this application (as it makes use of a Backbone local storage library), but the frameworks are provided in the default MVC4 project in Visual Studio 2012. The application provided is a simple refactorization of Jarrod Overson's Backbone/Marionette TodoMVC application. This approach differs in that it aims to allow for ample division in structure for specific pages within your SPA.

The main reason I wanted to make this open to the public was because I was not able to find a Backbone/Marionette MVC template which makes use of Microsoft's nuGet package management tools in Visual Studio. NuGet is most widely used with Microsoft applications and makes package management easy because of its integration with Visual Studio.Often JS libraries pulled from various sources can be difficult to manage and maintain from version to version. NuGet attempts to resolve these issues by managing dependencies between libraries.

Backbone and Marionette have been upgraded to the latest stable versions in this template (Backbone v1.0.0 and Marionette 1.03.1).

My template:
https://github.com/priley86/marionette-mvc4-bootstrap-template

Jarrod Overson's (older) template:
https://github.com/jsoverson/todomvc/tree/master/labs/dependency-examples/backbone_marionette_require

I will likely add additional findings to this template in the future as I come upon them, so please stay tuned.

Enjoy!