Life Update and Gamer Footprint Update

7. August 2014 09:03 by Cameron in   //  Tags: , , , , , , , ,   //   Comments

Hey guys, I know it's been a while since I've written a blog post. I've been busy with wedding planning and other life events! I'm still alive and kicking!

Gamer Footprint (GFP) continues development in the spare time that I have. It's making slow but sure progress. I've moved Gamer Footprint to use a single page application (SPA) approach. The previous iterations of GFP were based on strict ASP.NET MVC, but as of late, I've been on a single page application kick. :) The advantages to SPAs are excellent over traditional multi-page applications. With SPAs, you can load your application shell and then load/post content on demand. This gives a perceived faster and more responsive application. 

With GFP, I've been playing around with Web API 2 and Durandal. Web API 2 is Microsoft's take on RESTful API development. It's very robust and supports all types of HTTP calls as defined by the REST design principles. By using Durandal, I can use RequireJS, Knockout.js, and jQuery to build rich single page applications. This proves to be a good choice for the development of GFP because I already have experience in RequireJS, Knockout, and jQuery. If I had chosen to use AngularJS, it would have required to learn a completely new framework. While some might not worry about that, I've already been using Knockout in some projects at my day job, so naturally, it made sense to learn Durandal.

Knockout Observable Array Performance Improvments

Today, I was working on a project that makes AJAX calls to an API and noticed that the application was very slow and unresponsive during the AJAX calls and ko updates. I checked that the requests weren't taking too long in Chrome's developer tools and found they were at max taking 300ms and minimum of 20ms to return. This was very odd behavior since the AJAX requests weren't blocking.

After some research, I found that when updating ko.observableArrays, you don't want to push each individual item to the array if you can help it. Each time an item is pushed to a ko.observableArray, it notifies its subscribers and depending on how many DOM elements you have on your page, that can be rather taxing. I had code like this:

$.ajax({
	url: 'api/Document/',
	method: 'GET',
	dataType: 'json',
	success: function(data) {
		Documents([])
		for(var i = 0; i < data.length; i++)
			Documents.push(data[i]);
	}
});

To fix this, you need to create temporary arrays to push your items to and then assign the ko.observableArray to the contents of the temporary array. Your code should look more like this:

$.ajax({
	url: 'api/Document/',
	method: 'GET',
	dataType: 'json',
	success: function(data) {
		var documents = [];
		for(var i = 0; i < data.length; i++)
			documents.push(data[i]);	

		Documents(documents);
	}
});

Month List

Tag cloud