Friday, July 13, 2012

Life Without JQuery

Before the Resig Singularity occurred on August 26, 2006, it might be a shock to some that many developers actually used plain old JavaScript in their web applications, and had been doing so for a long time.

JQuery is a very powerful tool, no doubt. It puts a nice, shiny API on the clunky, old DOM. Also, its ubiquitous nature means that most of the time, it's already on someone's machine if you're using a CDN or Google APIs to reference the file. When you're using a large amount of DOM manipulation and AJAX calls, especially in a client-heavy app, JQuery is a must. This is an incredibly common scenario, so common that quite often the boilerplate for almost any web application platform comes with a reference to JQuery almost by default. For some reason I always found this a little disturbing.

Is it true that JQuery always makes sense? The answer is plainly no. I realize this blog entry is beating a dead horse, but I think it's worth bringing up again so the idea doesn't get stale. You don't always need JQuery.

But when does using JQuery just not make sense?

  • When you're only doing simple actions on the DOM: If you're only doing something like adding a few numbers together and updating a text field or other element, you probably don't need JQuery.
  • If you're only making a few AJAX calls in an otherwise small application: XMLHttpRequest is your friend. It's not such a bad thing to understand how it works.
  • If you're only using it to bind events to elements: While I admire your desire to keep things unobtrusive, addEventListener and attachEvent work just fine. You'll probably want to make a little helper function or something, but trust me, it can be done without JQuery.
  • When you're using another framework, and you're barely using JQuery: Okay, I'll have to explain this one a little bit. If you're using a framework like AngularJS or Backbone, they have their own Ajax handlers. If you're no longer using JQuery's ajax handlers, it might be worth checking to see how you're using JQuery, and how often it's used. You may just be adding overhead to your application for little benefit.
  • If your application is just small: You don't need JQuery to write document.write('Hello World'); It's a little silly to create an application where the JavaScript libraries it's using are larger than the actual application would be without them.
Replacement parts for JQuery:

Selecting elements from the DOM with a CSS-style selector. You can use document.querySelectorAll, it's supported in IE8 and above and well as good browsers. Basically it allows you do most selectors, but doesn't support all of the fanciness that JQuery does.

var nodes = document.querySelectorAll('#idname .classname');

For binding events you would have to use addEventListener (and for IE7 support, attachEvent).

var btn = document.getElementById('myButton');
var buttonClicked = function(e) {
if(btn.addEventListener) {
   btn.addEventListener('click', buttonClicked);
} else if(btn.attachEvent){
   btn.attachEvent('onclick', buttonClicked);

For AJAX calls, there is the XMLHttpRequest.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
   if(xhr.readyState == 4) { //complete
      if(xhr.status == 200) { //OK
};'GET', '', true);

In the end, it's not always necessary to use JQuery, that said, I highly recommend using it it most cases. It's just important to note that JQuery is really just some really nice wrappers around things you can do yourself, and in some cases you don't need everything that JQuery brings with it.


  1. Ben,
    Didn't know you have a blog! It was between Blogger and WordPress when I set up my blog. I went with WordPress, but I have a nagging feeling that Blogger is better. It is easier to install all the Google apps to Blogger, or so I heard. I would write something about your article, but most of it went over my head (Not being a programmer).


  2. Haha... it's cool Dave. I love your blog. I follow it from Google Reader, usually.

    In case anyone else finds this, here is Dave's blog:


This form allows some basic HTML. It will only create links if you wrap the URL in an anchor tag (Sorry, it's the Blogger default)