Monday, June 30, 2014

SPA DTO

As all of you aware, DTO pattern allows us to encapsulate data and send it from one system to another and thereby decoupling the two systems. With this pattern we can send just the amount of data that is needed. In ASP.NET MVC this is sometimes called as View Models. But the idea is same, decouple the systems, encapsulate all the necessary data and send it along the pipe.

Single Page Application (SPA) is all together a different paradigm. Here most of the ux processing is done in the browser and the server is used to store and return data. In a sense this is a truly decoupled environment. In this environment we need a proper way to exchange data, errors, messages and other information.

In this blog I will show you how I standardized the data exchange between javascript and WebAPI. As I need a consistent mechanism to send data, errors and success messages to javascript from WebAPI, I came up with the below signature.

    public class AjaxModel<T>
    {
        public bool Success { get; set; }
        public string Message { get; set; }
        public T Model { get; set; }
    }

As you see, I defined a generic class which shuttles the data using generic object. In addition it also carries a boolean variable specifying whether the call is success or not and a message which can contain positive or negative message.

With this object I can send any type of data from the Web API to the client along with the status. The client on receiving this message can check the status before processing the data. Here is my generic ajax post code

    function httpPost(url, data) {
        var self = this;
        self.loading(true);
        url = vm.virtualDirectory + '/' + url;
        return http.post(url, data).then(function (returndata) {
            self.loading(false);
            if (returndata.Success === false) {
                toastr.error(returndata.Message);
            }
            return returndata;
            }).fail(function (e) {
                self.loading(false);
                var message = '';
                if (e.responseJSON.ExceptionMessage !== undefined)
                    message = e.responseJSON.ExceptionMessage;
                else
                    message = e.responseJSON.Message;
                toastr.error(message);
            });
    }

As you see, I check for the success from the ajax call. If there is an error, I show the error message. Otherwise continue with my javascript.

Having a standardized DTO object enables me to decouple the layers and write generic code which handles all my ajax requests and also preprocess errors that I get from the server.

Wednesday, June 25, 2014

Knockout Progress Bar

This blog is continuation from my previous blog, Ajax Batch Requests, on how to do multiple ajax requests parallel. In that blog I covered on how to invoke several thousands of ajax requests using batch technique. If you are doing that many ajax requests wouldn’t it be great to show the progress of those ajax requests to the user. This blog covers the user interactivity for those ajax requests by showing a progress bar.

For showing progress bar, I am using the open source Kendo UI Progress Bar. If you haven’t heard about Kendo UI, I strongly urge you to check out this open source initiative from Telerik. These controls are awesome and I feel that in many ways there are better than JQueryUI, Zurb and Bootstrap.


Coming back to our problem, showing progress bar which progress for every ajax request. As you know putting a progress bar is easy.

First let’s start with defining a progress bar. Here is the html to hold the progress bar.

    <div id="progressBarWrapper">
        <div id="progressBar"></div>
    </div>

Next, let’s have a javascript function which registers the Kendo JQuery plugin and returns the progress bar object

function getProgressBar() {
    //setting the progress bar
    var progressBar = $("#progressBar").data("kendoProgressBar");
    if (progressBar) {
        //destroying the existing progress bar
        progressBar.destroy();
        $("#progressBarWrapper").empty().append("<div id='progressBar'></div>");
    }
    $("#progressBar").kendoProgressBar({
        max: <max value for progressbar>,
        value: 0,
        animation: {
            duration: 0
        }
    });
    return $("#progressBar").data("kendoProgressBar");
}

As you see in the above function I am initializing the JQuery plugin if it is not initialized and returning it. I am also destroying the plugin if it is already installed. As Kendo does not provide a way to reinitialize the progress bar, hence I have to destroy and recreate the plugin.

Finally let’s integrate this progress bar with our batch processing logic. Whenever we get a response from the ajax call, let’s just increment the progress bar value. Here is the code

 utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {
    var currentValue = historyProgressBar.value();
    historyProgressBar.value(currentValue + 1);

    //call to process the next batch as needed
    updateHistoryBatch(patients, currentIndex, historyProgressBar)
  });

With the inclusion of progress bar, my batch ajax processing provides better user experience and user can know the exact status. This is much better user experience than showing a busy image.

Wednesday, June 18, 2014

Ajax Batch Requests

This blog is a continuation of my previous blog on how to do multiple ajax requests parallel from a browser. Please check that blog if haven’t.

As mentioned in my previous blog you can do multiple ajax calls by just looping through and calling the ajax post module. Here is the code:

    function updateHistory(patients) {
        for (var index = 0; index < patients.length; index++) {
            var patientID = patients[index];
            utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {
                    //show the progress bar
            });
        }
    }

This works great if you have around 1000 to 1500 requests. If there are more than those, then you will get out of resource error. In that case we cannot use the above approach directly.

To solve this problem, I batched my requests say 100 at a time. Before the end of the batch, I will trigger the next batch. By doing this batch method, I am restricting the number of parallel requests and thereby not consuming too many browser resources. Here is the code for this batch processing

    function updateHistory(patients) {
        updateHistoryBatch(patients, 0);
    }

    function updateHistoryBatch(patients, startIndex) {
        var batchsize = 100;
        var nextBatctStartIndex = 80;

        if (startIndex % batchsize === nextBatctStartIndex) {
            startIndex = (parseInt(startIndex / batchsize) + 1) * batchsize
        }
        else if (startIndex !== 0) {
            return;
        }

        var endIndex = startIndex + batchsize;
        endIndex = endIndex < patients.length ? endIndex : patients.length;

        for (var index = startIndex; index < endIndex; index++) {
            var patientID = patients[index];
            currentIndex = index + 1;
            updateHistoryForeachPatient(patientID, currentIndex, patients)
        }
    }

    function updateHistoryForeachPatient(patientID, currentIndex, patients) {
        utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {
            //call to process the next batch as needed
            updateHistoryBatch(patients, currentIndex)
        });
    }


As you see in the above code, I am recursively calling the updateHistoryBatch method. This method batches the ajax calls. It calculates and decides when to spun the next batch. In this code, I am kick starting the next batch whenever the 80 ajax calls from the previous batch is completed. By starting the next batch before the previous batch ends enables me to keep the queue always full.

With this batch approach I was able to do about 50k ajax calls without any issues.

Sunday, June 8, 2014

Ajax Multiple Requests

I was working on a scenario where I need to update the history of over 1000 records. While updating these records one by one I want to show the progress bar to keep the user informed of the progress. Ideally SignalR is the best for this situation. But I decided to do an ajax call from the browser. In this blog I will blog on how I did ajax for multiple requests. In the next blog I will blog on the progress bar.

On the technical stack, I am using SPA using Knockout and Durandal. For progress bar I am using the open source Kendo UI Core and on the server side I am using Web API.

I can update the history of these 1000 records in any order, in other words there is no dependency between these. For efficiency I decided to run these parallel as shown in the below flow chart.



How can I run these updates parallel in a synchronous manner without overloading the server? Luckily I don’t have to do anything. Browsers has a builtin mechanism for this. Most modern browsers do 4 to 6 parallel requests at a given time. If there are more requests they queue those requests. Using this behavior my code is very simple.

    function updateHistory(patients) {
        for (var index = 0; index < patients.length; index++) {
            var patientID = patients[index];
            utility.httpPost('api/compatupdatehistory', patientID).then(function (data) {
                    //show the progress bar
            });
        }
    }

As you see, I am just looping through the list and calling my ajax post routine. I don’t need to do any recursion or any other mechanism for making multiple parallel ajax requests.

This mechanism works great if you have limited ajax requests, say 1000. If you want to do lot number of ajax requests then checkout Part 2 of this blog.