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.
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!
Great post, really helpful for me as I am .NET developer and find a good start to work within VS2012
ReplyDeleteDo you need free Facebook Followers & Likes?
ReplyDeleteDid you know that you can get them AUTOMATICALLY AND ABSOLUTELY FREE by registering on You Like Hits?
great
ReplyDelete