Model-View-ViewModel (MVVM)
The main objective is to use the MVVM pattern on the client tier in an ASP.NET MVC 4 application and to choose one of these libraries based on some selection criteria and not based on how cool it is to use one over the other. MVVM is a design pattern which separates the The View from the Business Logic and behavior of an application. It should be clear that the View is not just the screen on the browser. The View could be a button, it could be a table grid, it could be a list, it could be any visual element. "The View" con also be a composite of different views: the button view, the table grid view, the list view, etc.
In the MVVM Pattern the View never talks to the Model because this is the responsibility of the The View Model. The Business Logic and behavior of the application is encapsulated by the ViewModel. The ViewModel holds the Model state which is presented in the View. The advantages of using this pattern are numerous; to start the View can be designed and coded by designers and the actual business logic and behaviors can be implemented by specialized developers in the ViewModel. This way there is separation of concern at all levels. Another obvious advantage is that the View could be replaced without ever changing the ViewModel, or the Model.
In the MVVM Pattern the View never talks to the Model because this is the responsibility of the The View Model. The Business Logic and behavior of the application is encapsulated by the ViewModel. The ViewModel holds the Model state which is presented in the View. The advantages of using this pattern are numerous; to start the View can be designed and coded by designers and the actual business logic and behaviors can be implemented by specialized developers in the ViewModel. This way there is separation of concern at all levels. Another obvious advantage is that the View could be replaced without ever changing the ViewModel, or the Model.
The magic of the pattern is in the data binding to link the View to the ViewModel. The View must bind to properties of the ViewModel and this binding must be bidirectional, which means that any markup element, which observes a VewModel property, is updated when the ViewModel property changes and when the View element bound to the ViewModel property is updated, is changed, then this ViewModel property is updated. Nice, right? The ViewModel is responsible for updating the Model. The View never updates the Model. We will see how this mechanism works for both frameworks and decide which are is easier to use.
Selection Criteria
So, my first selection criteria is: how easy it is to bind a ViewModel property to an HTML element and how easy is to update the model using these frameworks.
This study applies a simple solution to a simple problem using KnockoutJS and using BackboneJS and compare the degrees of difficulties between the solutions. How many reasonable lines of code do we need to write to accomplish the same tasks?
Library Maturity and Support Documentation. Mature products have the tendency of having better support, frequent bug fixes and richer documentation which makes the product more credible. This is very important because often enough when we decide on a particular technology replacing it once our projects are maturing could be very difficult and painful.
Community Support is another important aspect when selecting a library. The larger the community the more valuable documentation can be found in the net.
Library Dependencies need to be taken into account as well. Do I need to get additional libraries for me to use KnockoutJS or BackboneJS?
Performance is also an important consideration, however, because the size of data is very small for this evaluation it might be difficult to measure a significant difference. Nevertheless, the tools are readily available I will use them and average readings for GET, PUT and POST using the different libraries to see if I can learn anything interesting.
In the case that you are using the development tools from the browser, in the case if Internet Explorer 9/10, you will need to click in the Networking tab and then click Start Capturing.
Performance is also an important consideration, however, because the size of data is very small for this evaluation it might be difficult to measure a significant difference. Nevertheless, the tools are readily available I will use them and average readings for GET, PUT and POST using the different libraries to see if I can learn anything interesting.
In the case that you are using the development tools from the browser, in the case if Internet Explorer 9/10, you will need to click in the Networking tab and then click Start Capturing.
If you prefer to use Fiddler then a DOT needs to be added between "localhost" and colon ":" in the url address for Fiddler to start capturing the traffic on the local host.
Evaluation Process
The evaluation process consists of tabulating the selection criteria for both frameworks and grading them from 1-to-10 for poor performance and high performance respectively. The table would look like something like this:
| Selection Criteria | BackboneJS | KnockoutJS |
|---|---|---|
| Ease of Binding | 0 | 0 |
| Code Complexity | 0 | 0 |
| Framework Maturity | 0 | 0 |
| Dependencies | 0 | 0 |
| Community Support | 0 | 0 |
| Performance | 0 | 0 |
| Overall Rating | 0 | 0 |
Pre-Requisites
In preparation for the next installment of this study there are a few things that you will need in order to follow along with the study. These are the prerequisites:
- Download and install Visual Studio Express 2012 for Web. Install the latest updates and service packs. The project uses ASP.NET MVC 4 and the project template is already included in the intallation.
- Download the production version of BackboneJS.
- Download dependencies: UnderscoreJS (for Backbone), jQuery (for Knockout and BackboneJS)
- Json2.js. This library could be downloaded via NuGet packages and it is required for both evaluations.
Note that if you get BackboneJS by managing packages for Visual Studion using NuGet then the dependencies are also added for you. You will still need to install the Json2 package which will be required for the Knockout and Backbone solutions.
Watch out for these problems!
When installing the Backbone NuGet package (Backbone.js 1.0.0) the package manager updated my jQuery version to 2.0.2. This broke my Knockout solutions becuase this version of jQuery is not compatible with the older Json2 and the NuGet package does not contain the most recent version of Json2. To resolve this Json2 had to be installed manually downloading the most recent version from GitHub (https://github.com/douglascrockford/JSON-js/blob/master/json2.js).
Peek into Part II: The Evaluation Project
To take the most out of this study you will need to understand a little of WEB API, so I suggest you take a look at Mike Wasson's tutorials to get you started with WEB API.
Light Bulb!
I learned the principles of a scientific selection process from Trevor Atkins, from PQA Testing here in Vancouver and I have borrow some of his key elements to build this report.References
- MVVM Definition: This article explains the MVVM pattern in the context of creating WPF solutions. The value of the paper is how well explained is the pattern. http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
- Visual Studio 2012 Express for Web: http://www.microsoft.com/visualstudio/eng/downloads#d-2012-express
- Web API which supports CRUD: http://www.asp.net/web-api/overview/creating-web-apis/creating-a-web-api-that-supports-crud-operations
- Creating Web APIs: http://www.asp.net/web-api/overview/creating-web-apis
