Introduction

As both frontend and backend web developer, I have to deal with different js frameworks. No one is perfect. In this article I am trying to collect a part of my experience with couple of popular frameworks, such as jQuery and Kendo UI. Someone thoughts that jQuery is not necessary, because today exists some more valuable javascript stuff like ReactJS, AngularJS, #insertYourCaption#JS… I used these only for getting some knowledge on it, and do not used it in real life projects. Everything what is wrote here is only my opinion and it can be opposite to real situations.

jQuery

(I do not know why I have included link on it. In 2017 everyone at least hear about it and the most have used)

In my opinion, jQuery is good for writing applications, that have a deal with small data. It is awesome, a good amount of javascript algorithm patterns (loops, DOM querying…) can be written in one method call.

On the other hand, there is a problem, that jQuery performs too much boxing while implementing a call to object. With small data this is not dangerous, but if you want to have a deal with big data in a time this becomes real problem.

For example, I have implemented once my own multiselect combobox control. I believed in the speed and simplicity of writing it and implemented it with jQuery. One of the main features was to perform item search due to provided substring. I was tested it on the 10 combobox items and it works perfect and fast. When I have integrated it to real project, it becomes too slowly on the greate item amount, near 2000. At first I became dissapointed, then customer became dissapointed and this leads to dissapointing of customer pay for me. So, I have implemented a simple test for comapring speed of pure native js and jQuery.

The full code implementation and time measuring can be seen in this fiddle.

HTML

<input type=text />
jQuery average performance:
Native average performance:
<ul> </ul>

JS

At first methods for filling the result list:

function randomString() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for(var i = 0; i < 20; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

$(document).ready(function() {
  for(var i = 0; i < 2000; i++) {
    $('<li>')
      .text(randomString())
      .appendTo('ul');
  }
});

JQuery search method:

      $('li').each(function(i, e) {
        if($(e).text().toLowerCase().indexOf(text) < 0) {
          $(e).hide();
        } else {
          $(e).show();
        }
      });

Javascript search method:

var array = document.querySelectorAll('li');
      array = Array.prototype.filter.call(array, function (obj) {
            return obj.innerHTML.toLowerCase().indexOf(text) > -1;
          });
      
      var liElements = document.querySelectorAll('li');
      
      for(var i = 0; i < liElements.length; i++) {
          var el = liElements[i];
          el.style.display = 'none';
      }
      
      for(var i = 0; i < array.length; i++) {
          var el = array[i];
          el.style.display = 'list-item';
      }

I was very surprised, when realised that jQuery runs at least in 5 times slower when pure JS. Well, I knew, that it has it own extensions and runs slower then JS, but not for five times!

Just a note, this jQuery implementation (must) have only one loop through <li> elements, and this JS have at least three loops. Actually, jQuery version is more readable than js version, but it can be solved by encapsulation of part of this methods into another.

In future, I am starting to use pure javascript instead of any extensions. I am happy and customer is happy to use it.

This example is not very informative, everything could be improved, and it is not describes the full jQuery nature, however I was started to use .querySelectorAll and for loops instead of jQuery usage. As it can be seen, it is rather faster.

Kendo UI

At first I should write some words on it. In different companies I have to use different telerik products, such as Telerik UI for ASP.NET AJAX and Telerik UI for Windows phone and was very excited to use it. Simplicity, speed, customizable, everything is good. So at new project I choose Kendo UI set of controls. In comparison to ASP.NET AJAX product it is less customizable, for example I could not append events for every action of grid and I have to deal with some workarounds, when I want to implement something, that is not in their demos.

Example 1. Kendo TabStrip

On the first hand, it is amazing, ajax loading and many other features. I get a problem, when I wanted to implement tabs for a near 30 grids. It freezes with each tab click. I solve the problem with creating own version of tabstrip:

<ul>
    <li data-id='tab-1'>...</li>
    <li data-id='tab-2'>...</li>
    ...
</ul>
    
...
    
...
    ... </div>

And simple JS:

$('.tabs li').click(function() { 
    $('.content div').hide();
    $('.content div[data-id=' + $(this).data('id') +']').show();
});

And everything become to work fast and beautiful.

However, TabStrip is amazing for a small amount of data, or small amount of code if you want to load content with ajax or implement animations on tab click… I do not like animations at all.

Example 2. Kendo Line Chart

One day I got a bug report, that one page is hangs for a couple of seconds on load. I spent nearly three hours for solving its problem. I find that it is occured in the line chart and related with category axis. I realised that the problem is in passing dates for category axis of line chart. I noted that when I am passing dates in descending order eveything works fine, but when I am passing dates in ascending order everything fails.

The resulting sample is in this fiddle

JS

var seriesData = [
  { Date : new Date(1482249457000), Field1: getRandom(), Field2: getRandom() },
  { Date : new Date(1482250457000), Field1: getRandom(), Field2: getRandom() },
  { Date : new Date(1482301240000), Field1: getRandom(), Field2: getRandom() },
  { Date : new Date(1482301472000), Field1: getRandom(), Field2: getRandom() },
  { Date : new Date(1482308482000), Field1: getRandom(), Field2: getRandom() }, 
  { Date : new Date(1482315469000), Field1: getRandom(), Field2: getRandom() }, 
  { Date : new Date(1482389793000), Field1: getRandom(), Field2: getRandom() }, 
  { Date : new Date(1482812743000), Field1: getRandom(), Field2: getRandom() },  
  { Date : new Date(1482912584000), Field1: getRandom(), Field2: getRandom() },   
];

function getRandom() {
    return Math.floor((Math.random() * 10) + 1); 
}

function createChart()
{
    $("#chart").kendoChart({
        "legend": {
            "position": "bottom"
        },
        "series": [{
                "name": "Field1",
                "type": "line",
                "field": "Field1"
            }, {
                "name": "Field2",
                "type": "line",
                "field": "Field2"
            }
        ],
        "categoryAxis": [{
                "labels": {
                    "format": "{0:dd.MM.yyyy}",
                    "rotation": -45
                },
                "crosshair": {
                    "visible": true
                },
                "field": "Date"
            }
        ],
        "dataSource": {
            "data" : seriesData
        }
    });
}

And a couple of methods for sorting initial data and passing it to chart:

function straight() {
  seriesData.sort(function(a,b){
    if (a.Date < b.Date) {
        return -1;
    } else if (a == b) {
        return 0;
    } else {
        return 1;
    }
  });
  
  createChart();
}

function reverse() {
  seriesData.sort(function(a,b){
    if (a.Date < b.Date) {
        return 1;
    } else if (a == b) {
        return 0;
    } else {
        return -1;
    }
  });
  
  createChart();
}

It can be noted that everything really hangs and demonstrates a very strange behaviour when passing dates in ascending order. I notified kendo UI team about this bug.

Summary

No one is perfect. Every JS library is written by the real humans and humans can make mistakes. I do not calling the reader to avoid js libraries at all and create gems with your own script. Just keep in mind that everything could fail and your duty as a developer to enable adequate behaviour of you app with different frameworks.

I am not removing jQuery and Kendo UI from my projects, jQuery is awesome for writing readable code and Kendo UI contains a set of controls, for developing which I will spend years, I really respect both teams for creating these products.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s