CallQueue: Implementing a Sequential Web Service Call Queue for AJAX application

In AJAX based applications its common that user might end up breaking your AJAX calls by clicking on numerous places in very short interval of time. Let us assume there is a page where there are several of hyperlinks which make WebService calls and do some stuffs on callback. If user clicks on five hyperlinks being impatient or may be just for fun, there will be five different WebService calls made. All of those calls had the same parameters or UI state while they were invoked. But on completion of one or more WebService calls it may happen that the UI state or data passed to the rest of the WebServices calls no longer exist or expired, thus will be result in inconsistent UI behaviour and/or invalid data. This is one of the important scenarios an AJAX developer should consider when he designs an application.

The Specification
To address the scenario, I would prefer implementing a Sequential WebService Calls Queue which will be able to schedule the tasks/WebService calls and help keeping UI and data consistent over the AJAX calls. We should achieve the following features from this queue:

• Enqueue any WebService call anytime in the application.
• Dequeue any previously queued call regardless of currently executing call and location in the application.
• Each WebService call should have an identifier so that we can track the call and dequeue anytime later by SSQ.dq(call_id).
• Each call should have a timeout value which will determine the maximum amount of time we will consider for that particular call before we invoke the next call, after that we will remove from the queue.
• A timer will act as scheduler but will not run forever. It should run only when necessary.
• Each call should be able to declare its completion at any time by notifyCompleted, so that the scheduler timer will not wait for the prior task and should dequeue the next call.
• notifyCompleted should also be optional. The currently running call should automatically be dequeued from the scheduler queue after the timeout of its own.
• Each call should be able to mark as replaceIfExists so that if user`s any activity already enqueued this call, should be replaced by the current one.
• The queue instance should be exclusively available to the user and all over the page, meaning that the same queue class will be used to serve the functionality in one page per user basis.

The Usage
You should be able to use this library as follows:

1. Include GenericQueue.js and SequentialServiceQueue.js to your project
2. Add the reference in the pages that you want them to be used

We will be naming the class as SequentialServiceQueue and in short SSQ. Let us have a look at the WebService calls in Service Queue fashion:

var id1 = SSQ.nq('SomeMethod1', false, 1000,
    function()
    {
        // Do some stuffs
        SomeWebService1.SomeMethod1(SomeParameters, onSomeMethodCallCompleted);
    });

function onSomeMethodCallCompleted(result)
{
    // Do stuffs
    SSQ.notifyCompleted(id1);
}

var id2 = SSQ.nq('SomeMethod2', false, 1000,
    function()
    {
        // Do some stuffs
        SomeWebService2.SomeMethod2(SomeParameters,
            function(result)
            {
                // Do stuffs
                SSQ.notifyCompleted(id2);
            });
    });

You can not only queue WebService calls, but also regular JavaScript codeblock:

var service_id1 = SSQ.nq('Service1', false, 1000,
    function()
    {
        // Do some stuffs
        SSQ.notifyCompleted(service_id1);
    });

The GenericQueue
To accomplish the SequentialServiceQueue, first of all we should define an all purpose GenericQueue class which will able to handle any queue requirement out of the box. The queue is fairly simple, just like old Computer Science data structure class. Here are few of the functions from the class:

this.nq = function(element)
{
    array.push(element);
    ++rear;
}

this.dq = function()
{
    var element = undefined;

    if (!this.is_empty())
    {
        element = array.shift();
        --rear;
    }

    return element;
}

this.for_each = function(func)
{
    for (var i = 0; i < rear; ++i)
        func(i, array[i]);
}

this.delete_at = function(index)
{
    delete array[index];

    var i = index;
    while (i < array.length)
        array[i] = array[++i];

    array = array.slice(0, --rear);
}

The SequentialServiceQueue
The following is how this class starts. You will notice here that the timer_id is for our scheduler timer, running_task indicates the currently executing call, interval is a variable for the timer_id which you can determine as your wish. interval is the knob of how fast or slow you want the scheduler to run. queue as you can understand is an GenericQueue instance we have just created above. Note that the GenericQueue is not a static class rather its a instance class unlike the SSQ. You have also noticed that the ms_when_last_call_made and ms_elapsed_since_last_call are pretty self-describing. get_random_id is reponsible for preparing new id for the newly enqueued call.

var SequentialServiceQueue =
{
    timer_id: null,
    ms_when_last_call_made: 0,          // milliseconds (readonly)
    ms_elapsed_since_last_call: 0,      // milliseconds (readonly)
    running_task: null,
    interval: 10,                       // milliseconds
    queue: new GenericQueue(),

    get_random_id: function() {
        var min = 1;
        var max = 10;
        return new Date().getTime() + (Math.round((max - min) * Math.random() + min));
    },

From the code below, as soon as any new call is enqueued, we check for if it is allowed to replace if already exists in the queue with the same name. If found any, we just update that, otherwise we create a brand new task and enqueue and start our updater which is the scheduler in our case.

nq: function(name, replaceIfExists, timeout, code) {
    var id = this.get_random_id();

    if (replaceIfExists) {
        var isFound = false;
        this.queue.for_each(
            function(index, element) {
                if (element !== undefined && element !== 'undefined' && element.name == name) {
                    element.id = id;
                    element.replaceIfExists = replaceIfExists;
                    element.timeout = timeout;
                    element.code = code;
                    isFound = true;
                }
            });
    }

    // Enqueue new task
    if (!isFound || !replaceIfExists) {
        this.queue.nq(
            {
                id: id,
                name: name,
                replaceIfExists: replaceIfExists,
                timeout: timeout,
                code: code
            });
    }

    // We have got new tasks, start the updater
    this.startUpdater();

    return id;
},

The following is the core part of the class which is the scheduler. Inside startUpdater, it executes the block of code in every interval we defined before. And inside the looping code, we check for if there is already any running task, if yes we check for the timeout whether it should make a good timeout or not. Otherwise we let it run as it was. However, if there is no running task at this moment, we dequeue a task and start executing the code and set a starting time for that to keep track of how long it is being running.

detachTask: function(id) {
    this.dq(id);
    this.running_task = null;
    this.ms_when_last_call_made = 0;
    this.ms_elapsed_since_last_call = 0;

    // See if we are done with the queued tasks
    if (this.queue.is_empty())
        this.stopUpdater();
},

startUpdater: function() {
    var _self = this;
    if (this.timer_id == null) {
        this.timer_id = setInterval(
            function() {
                if (_self.running_task == null) {
                    // We dont have any running task, lets make the first one
                    _self.running_task = _self.queue.dq();
                    if (_self.running_task != null) {
                        _self.ms_when_last_call_made = new Date().getTime();
                        _self.running_task.code();
                    }
                }
                else {
                    // We have a running task already
                    _self.ms_elapsed_since_last_call = new Date().getTime() - _self.ms_when_last_call_made;

                    // Should the current task be skipped?
                    if (_self.ms_elapsed_since_last_call > _self.running_task.timeout)
                    // Time's up. leave the task alone. Let other tasks start executing.
                        _self.detachTask(_self.running_task.id);
                }
            }, _self.interval);
    }
},

stopUpdater: function() {
    if (this.timer_id != null) {
        clearInterval(this.timer_id)
        this.timer_id = null;
    }

    this.queue = new GenericQueue();
},

Keep an eye on my blog for continued development and improvements, and download CallQueue from: http://code.msdn.microsoft.com/callqueue

Cloudship: Membership Provider for the Cloud

Planning to move to the Azure Cloud, but already tied to the Membership API? I have recently written an article on Windows Azure which guides you to build a complete Membership provider library which can be leveraged by existing application to link to Microsoft’s cloud platform Windows Azure with no friction. Goals of this project were to be able to use regular ASP.NET Login controls, existing Membership code e.g. Membersip.UpadateUser(), MembershipUser.ChangePassword().

Last, but not least one of the major goals was ease of use. No matter which suite of controls you use: ASP.NET AJAX or MVC, Cloudship can be leveraged as your Membership provider. To install it, into your existing application, simply:

1. Reference the DLL
2. Insert few lines inside web.config
3. You are good to go

In this article you will learn how to implement your own Membership API, thus you can start moving you application data to the Azure Cloud – the future of development and business with Microsoft. Here you go – Cloudship: Membership Provider for the Cloud.

Building applications for Windows Azure

Windows Azure is an upcoming operating system for the cloud from Microsoft, announced on October 27 at PDC. Windows Azure provides developers with on-demand compute and storage to host, scale, and manage Web applications on the Internet through Microsoft data centers. Azure goes beyond what other providers, such as Rackspace’s Mosso or Amazon’s EC2, offer. First, it will be available with a complete suite of tools and technologies for building your next big cloud application. Second, the Azure platform’s goal is to support all developers and their choice of IDE, language, and technology; meaning that you can use your favorite tools for all kinds of development as well as Python, PHP, Ruby, Eclipse and so on. It supports popular standards and protocols including SOAP, REST, and XML. Using the Windows Azure tools, developers can build, debug, and deploy to Windows Azure directly from their existing development environment.

I have written an article “Building applications for Windows Azure” which will walk you through the steps to build an application from scratch on the recently released Windows Azure CTP, Microsoft’s answer to cloud computing. This application will let users add tasks into their Todolists and track them at a later time. The objective of this application is not to use any local data storage like SQL database. Instead, it will store and retrieve data from the cloud which means no matter which language/platform you write your application on, it will be able to access the data. For instance, if you would like to develop an iPhone application which will be able to play with your saved tasks on the go, you will be able to do so. Hope you will enjoy the article.

Link: http://dotnetslackers.com/articles/aspnet/Building-applications-for-Windows-Azure.aspx

jQuery intellisense in Visual Studio

Those who are excited like me about the news of jQuery integration into Visual Studio, started adopting jQuery replacing ASP.NET AJAX Client side API. Microsoft also declared there will be a patch for Visual Studio which will support jQuery as well as intellisene for that. For the enthusiasts who just can’t for it, here is the way how we can start developing using jQuery with full intellisense support inside Visual Studio 2008:

1. Download jquery-1.2.6-vsdoc.js

2. Inside your JavaScript files, add a reference to it by placing the following line at the top of the JavaScript file:

/// <reference path="jquery-1.2.6-vsdoc.js" />

That’s it. Enjoy!

Simple Form Validation – A Reflection based approach

Are you tired of placing multiple Validation controls on Form? If you are bored of following scenario like me, keep on reading the post:

A simple Email address validation can consist of whether

• The field is empty
• Longer than limit
• Email address format is invalid
• Already in use

Ordinary solution to this problem is placing multiple validation controls for a single TextBox. You can simply it by replacing all with a single Custom Validator. Our goal is to reduce amount of controls on the form to keep it simple. To do that, we would have to write code for Custom Validator that does it all. We also would like to write minimum code to validate the control without compromising manageability. Let us assume we would write the following code inside the ServerValidate of that control:

protected void cvEmailAddress_ServerValidate(object source, ServerValidateEventArgs args)
{
    ValidationController.ValidateControl<ProfileValidator>(cvEmailAddress, ProfileValidator.Fields.EmailAddress.ToString(), args);
}

Let us declare a ValidationErrorResult object that contains error messages and text to display in the UI:

public sealed class ValidationErrorResult
{
    public string ErrorMessage { get; set; }
    public string Text { get; set; }
}

And an Attribute which would be used to tag a specific method which would be responsible for validation of particular control:

[AttributeUsage(AttributeTargets.Method, Inherited = false, AllowMultiple = true)]
public sealed class ValidationMethodAttribute : Attribute
{
    public ValidationMethodAttribute(string fieldName)
    {
        this.FieldName = fieldName;
    }

    public string FieldName { get; private set; }
}

If you are already familiar with Attirbute based programming, I hope you know the attribute of this piece of code is in fact ValidationMethod. We will soon see how to use this. The following is the method that checks the value and make a list of ValidationErrorResult that consists of which rules got failed. Notice that the ValidationMethod attribute contains the field name of the object which determines no matter whatever your method name is, that field name helps Validation controller to find this method out for validation.

[ValidationMethod("Email")]
public static List<ValidationErrorResult> ValidateEmail(object value)
{
    var email = value as string;
    var results = new List<ValidationErrorResult>();

    // Blank
    if (string.IsNullOrEmpty(email))
        results.Add(new ValidationErrorResult()
        {
            ErrorMessage = "You did not provide an Email Address.",
            Text = "Cannot be left blank"
        });

    // Length 128
    if (email.Length > 128)
        results.Add(new ValidationErrorResult()
        {
            ErrorMessage = "You exceeded length limit.",
            Text = "Keep it less than 129 characters"
        });

    // Valid Email Address
    if (!Regex.IsMatch(email, "^[\\w\\.\\-]+@[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]{1,})*(\\.[a-zA-Z]{2,3}){1,2}$"))
        results.Add(new ValidationErrorResult()
        {
            ErrorMessage = "You provided an invalid Email Address.",
            Text = "Invalid Email Address"
        });

    // Is Already In Use
    if (IsAlreadyInUse(email))
        results.Add(new ValidationErrorResult()
        {
            ErrorMessage = "You provided an invalid Email Address.",
            Text = "Invalid Email Address"
        });

    return results;
}

Here is the ValidationController which goes through the Validation class and looks for the method that has the attribute which validates the control’s value.

public class ValidationController
{
    public static List<ValidationErrorResult> Validate<T>(string fieldName, object value)
    {
        var results = new List<ValidationErrorResult>();
        var type = typeof(T);
        var methods = type.GetMethods(BindingFlags.Static | BindingFlags.Public);

        var method = methods.Single<MethodInfo>(delegate(MethodInfo m)
        {
            return ((ValidationMethodAttribute[])m.GetCustomAttributes(typeof(ValidationMethodAttribute), false))[0].FieldName == fieldName;
        });

        return (List<ValidationErrorResult>)method.Invoke(null, new object[] { value });
    }

    public static void ValidateControl<T>(CustomValidator validator, string fieldName, ServerValidateEventArgs args)
    {
        var results = Validate<T>(fieldName, args.Value);

        if (!(args.IsValid = !(results.Count > 0)))
        {
            validator.ErrorMessage = results[0].ErrorMessage;
            validator.Text = results[0].Text;
        }
    }
}

[New Article] 7 ways to do Performance Optimization of an ASP.NET 3.5 Web 2.0 portal

Web 2.0 applications are widely developed. These applications often work with third party contents, aggregate them, make various use of them and then make something useful and meaningful to the users. For the past few years, developers were also engaged with such endeavors and a lot of their websites have not addressed performance issues, thus resulting in an unpleasant experience to the users.

Performance is a vast area and great results can never be achieved by a silver bullet. This article explores some of the key performance issues that can occur while developing a Web 2.0 portal using server side multithreading and caching. It also demonstrates model driven application development using Windows Workflow Foundation.

URL: http://dotnetslackers.com/articles/aspnet/SevenWaysToDoPerformanceOptimizationOfAnASPNET35Web20Portal.aspx