While I’m on a roll, I may as well get this one out too. Last time I ranted about the inefficiency of programmers who load the entire jQuery framework to get a single effect. This rant is about the dangers of using jQuery without understanding the underlying code. I’ve ranted about this before, but this is important, so here goes again.

Framework

jQuery is written in JavaScript, and is simply a framework that makes the most common tasks programmers face much easier to accomplish. Like all frameworks, it started with a collection of methods to perform common tasks, and has grown into almost its own language. It is huge (the basic framework is about 70Kb), and it has its own syntax, which extends the JavaScript syntax. It is an enormously powerful system, and can be extremely useful.

The problem is that it has grown so large and the syntax is different enough from JavaScript that many new developers consider it as a new language. They happily use the framework for the simplest tasks, and consider it a minimum requirement for any interactive effects. They also do not understand the underlying system, and so the code they produce becomes grossly inefficient.

Selectors

For example, the most basic level of jQuery allows you to access any object or set of objects on the page using a clever naming system. These are called selectors. At their very simplest, they reference the ID of the object, just as JavaScript would, but more complex selectors must look through some or all the objects on the page, sometimes multiple times, in order to find the correct one. If a JavaScript developer were to write a function to do this manually, they would use it sparingly, knowing how much effort the browser must exert to find the item. Some jQuery users, however, do not understand the underlying system, and will call every object using the selectors.

This is a minor example, and the effect by itself won’t be catastrophic, but the ignorance of those jQuery users means that in just a few lines they can manage to produce a monster for the browser to cope with, because they don’t understand what it is they’re asking the browser to do.

Is it that big a deal?

It may be argued that computers and browsers these days are very powerful indeed, and that such inefficiencies are insignificant in the greater scheme of things. First off: bad coding is bad coding, and learning to code without understanding what you’re doing cannot be good, whatever the platform you’re using. If these programmers continue working on simple, little projects within which such inefficiencies are irrelevant, we’ll have no problem. But many will want to grow and work on ever more complex projects, and there is no magic boundary that will suddenly imbue them with efficient coding skills. Good coding must be learnt from the beginning, or it is unlikely to be learned at all.

Don’t overestimate browsers

The second issue is that browsers aren’t all that powerful. While writing my lightbox, I had to streamline my animation processes because I found that (even without jQuery) running several animated transitions at once pushed the limits of some browsers.

You need to animate at least 12 frames per second in order to perform a smooth animation. That means you need to complete each animation step in about 80 milliseconds. If you need to perform 4 animations (for ease of calculation), you’re looking at 20ms per animated step. This is easily enough time to identify a single object, and alter a couple of attributes (eg: adjust its width, height, position or opacity). You’ll run into trouble, however, if you need to loop through all the objects on the page to identify your object first.

The Good, the Bad, and the Ugly

So: jQuery is an awesome tool when used in the hands of an expert, but there lies the danger that inexperienced users will develop lazy and inefficient coding styles using it. If you do use jQuery, please make sure you take the time to learn how it works, so you can understand what you’re actually asking for when you call a jQuery function. Thanks.