Participative Leadership Style

In this blog I will specify my leadership style, discuss how I do it, its merits and disadvantages. My leadership style is participative leadership. I always include my team members to come up with solutions. I discuss the advantages and disadvantages of these solutions. Based on the discussion I will take the decision. The final decision always lie with me.

With the participative decision team members feel ownership and will be more motivated to work as it is their decision. Moreover they deliver it with my minimal supervision. With this style I will be easily approachable to the team and they can walk in anytime with questions or issues.

One of the disadvantages with this participative leadership style is time consuming. In most of the situations I know the solution for a problem which we are discussing, but instead of telling them what to do, I ask them their options, put leading questions and finally tell them what do to. This is somewhat similar to coaching, but not exactly same.

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.

Amazing Leonardo da Vinci

Last couple of days I was listening to the Leonardo da Vinci seven principles. In that author Michael J. Gelb said that Leonardo did too many things in his life and most of them are incomplete. It is amazing that a person can do so many things.

As a painter he did amazing painting. Mona Lisa is one of his best painting. The last supper painting still perplexes so many. As per Gelb, Leonardo did 19 pictures and all of them were great pictures. He is the first painter to use oil paint. He did many inventions in painting.

Actually painting is a hobby for Leonardo. He is actually an inventor.  He invented many items. I could not recollect them. He is also a scientist.

As a scientist he did many theories, but never tried to prove them. Some of his theories were later proved. He did an airplane model theory. Later another scientist took his model theory and made the plane that was working.

Both as an inventor and scientist lot of his work is incomplete. In addition he never organized his work. He also did learning in anatomy and religion. He learned different languages.

It is amazing that one person can do so many things in his lifetime. Some may call him a failure as he never focused on one thing.

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.

http://www.telerik.com/kendo-ui/open-source-core

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.

Ask for forgiveness, not permission

I made "Ask for forgiveness, not permission" as one of my favorite leadership quotes. I first heard this from Richard Rierson and I liked this phrase very much and adopted it into my life and career.

Wait a second, it this really true? I don't think it's always true. I cannot let loose my team to do whatever they want and come back to me asking for forgiveness. Both me and my team members should earn this. As a delegator, I am responsible for my teams actions. So it is my job to mentor them to the high standards where they can make their own decisions. As human beings we all are susceptible to do mistakes. I believe that as long an honest attempt is made, the person should be pardoned. Based on the past judgment and work we can earn mutual trust and follow this approach.

With this approach, instead of getting bogged down by the bureaucracy, our team can bulldoze road blocks, break mediocracy, take calculated risks and perform beyond expectations. But we should all be very careful and not take this too far. There may be situations where we need to stop and ask for permission or discuss for better alternatives. With sound judgement and solid trust this motto really helps team to perform efficiently.

Soft skill Blogging

So far I concentrated on technical articles in my blog at SPA Programmer. Most of these technical blogs are my learning while doing my work. In addition to the development I am also a technical manager/head. As a manager or head I need to perform certain tasks which does not include technical skills. As you all know these skills are known as soft skills.

Many of us already or eventually perform this dual role called technocrat. As a technocrat these soft skills is equally, if not more important than the technical skills. I spent good amount of time learning these soft skills and is currently in the continuous learning cycle along with technical skills.

Out of these soft skills my primary interest is leadership. I have read several books and articles on leadership. I frequently listen to the podcasts on leadership. Based on several leadership tests and my team's feedback I consider myself as a good leader.

In addition, I am also a PMP certified project manager. In order to keep my certification up to date and also with my interest, I regularly spend time learning and sharpening my project management skills.

There was lot of learning for me in these additional skills, I will blog my learnings so far and also blog my continuous learning in these areas. I will blog these along with some time management techniques.

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.

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.