Improving jQuery Timers Applications

---

A recent discovery about how jQuery is using AJAX using timer dispatch functions opened up a can of worms about the engineering reasoning used for the jQuery AJAX timer design.

I won't rehash the fine details. If you want to follow the discussion, read the thread at jQuery Support Group.

What I will show is how any jQuery applicaiton that has timers involved can behave differently depends on the user's PC machine timer resolution.

If you have a jQuery application that is sensitive with timers, you owe it to yourself to test it with the test C/C++ utility.

Download:

source code: fastsleep.cpp
zip exe/source: fastsleep.zip

Run the utility and then start to test your jQuery application. Make sure it works with as you expect it. Then hit M in the utility to change the resolution on the PC and retest your jQuery application to see if you see any negative or positive effect.

You might be surprise at what you see. Even if you don't see any visual difference or broken behavior using a PC 1ms timer resolution, your jQuery application could be using excessive overhead. To measure this, you will need to use the FireBug Profiler to see how many times a portion of code was run.

Background:

I'll keep it short, last year I can across this interesing submission at codeproject.com:

How Yahoo! speeds up your application

For me, what was the ultimate discovery is that any application running on your PC, including any browser plugin, who changes the PC's multi-media resolution with a call to timeBeginPeriod(1), the change applies across the entire PC system.

This means all applications, including the browser and any javascript with timers are all affected by the system timer resolution change.

Go ahead and play with this. I am highly interesting to see any reports with timer resolution sensitivity in jQuery applications.

--
HLS

jQuery - Javascript on Steriods

---

For wildcat!, someone requested a wish item to add dynamic popup windows to see a preview of messages when they place their mouse over the message link. Since this request was ditto but many others, I explored adding "balloon tips" for these previews.

I found an javascript module jTip.js and this was very simple to implement into wildcat! mail template pages. Suddenly we have PREVIEWS!

But it wasn't perfect, so I looked for other javascripts and found a "enhanced clone" of jTip called ClueTip!

What was common between the two was that they both were plug-ins for a phenomenal new javascript framework called jQuery.

I checked out this jQuery and all I can start to describe this is by saying "WOW!"

jQuery is basically another language, a wrapper language more specifically that enhances the use of JavaScript. It basically makes it easier to create Web 2.0 applications with less javascript programming - "Write less, Do more" is the jQuery motto.

It does have a different language syntax that takes getting use to, but once you get over that hurdle, it is really quite flexible and I may say elegant as well with its ability to "chain" jQuery methods together in one line.

Here is a quick example of how jQuery improves javascript coding used in Wildcat!

Mail Inbox and listings have select checkboxes. The following javascript in wcMsglib.js is used to get the total selected:

Using raw DOM/Javascript:

// Find nodes by class name

document.getElementsByClassName = function(className) {
   var children = document.getElementsByTagName('*') || document.all;
   var elements = new Array();
   for (var i = 0; i < children.length; i++) {
     var child = children[i];
     var classNames = child.className.split(' ');
     for (var j = 0; j < classNames.length; j++) {
       if (classNames[j] == className) {
         elements.push(child);
         break;
       }
     }
   }
   return elements;
}

function msgTotalSelected()
{
  var nTotal = 0;
  var msgitems = document.getElementsByClassName("msgitem");
  for (var i = 0; i < msgitems.length; i++) {
    var e = msgitems[i];
    if (e.type == "checkbox" && e.checked) nTotal++;
  }
  return nTotal;
}

Using jQuery:

<script type='text/javascript' rc='/public/js/jquery.js'></script>

function msgTotalSelected() {
  return $('msgitem:checked').length;
}

In short, jQuery handles all the typical complex DOM operations you would do to find DOM nodes, elements, classes and objects on a web page and provides a very elegant language syntax to give you all the functionality you need to create awesome web pages very quickly.

Do we need jQuery for Wildcat! web development?

Of course not. It is another tool, but a great one at that! It can make programming Web 2.0 easier.

jQuery also has a growing list of add-ons called "jQuery Plugins" that many people have written to glorify your web pages and make it more interactive.

jQuery also supports cross-browser functionality. This is one thing that will definitely reduce testing a web site against different web browsers.

The jQuery documentation is good (needs more examples) and I particularily like the Visual jQuery Reference site! In addition, the jQuery mailing list support group is very active and helpful as well.

Since I found some very useful jQuery plugins, it is a pretty good bet we will begin to implement jQuery with Wildcat! in many of its client areas. I've been exploring how to use jQuery template concepts, AJAX and other things and I have already found that we can scale the Wildcat! server more by moving a good bit of the server-side template processing to the Browser. I can't go overboard with this because jQuery will add overhead to the Browser thus making it appear more sluggish.

If this all jQuery exploration holds up, I might be setting up a jQuery support area for wildcat! developers and sysops at Santronics Online. This will allow Wildcat! customers to discuss jQuery and how they might be able to further use it with Wildcat! I'll make an announcement when the mail and files areas are ready.

--
HLS