Jquery does that in one line

jQuery is the holy grail for JavaScript developers. It made everything so much easier. You never have to worry about browser quirks when writing your application. Before, you would have to write few hundreds of lines of code to do a very simple task; but with jQuery a single line of code can end all your nightmares. Still, I had a very hard time adopting (accepting) jQuery. Not because I thought it was bad, but because I believed I could do it myself.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

It took me quite some time to start using jQuery and when I did, it was with a lot of reservation. It was too good to be true. Needless to say I have spent a lot of time reading jQuery source code. I am not an expert in JavaScript but it is the language I use the most and am most familiar with. Every time I see code like the one below, I cringe:

$("#clickBox").click(function (){
    if($("#menu").is(":visible")) {
        $("#colorBox").css("background-color","#cdcdcd");
        $("#menu").hide();
    }else {
        $("#colorBox").css("background-color","#FCFFFF");
        $("#menu").show();
    }

    return false;
});

When I see this, I can physically feel the regex engine parsing and re-parsing the strings then accessing the DOM on every click. It just pains me. In the olden days, I would not tolerate it and just go ahead and change this to Vanilla JavaScript and remove all the repeated selectors. This would be close to what I would do:

var clickBox = document.getElementById("clickBox"),
    menu = document.getElementById("menu"),
    colorBox = document.getElementById("colorBox"),
    isVisible = true;
clickBox.onclick = function () {
    if (isVisible){
        menu.style.display = "none";
        colorBox.style.backgroundColor = "#CDCDCD";
        isVisible = false;
    }else {
        menu.style.display = "block";
        colorBox.style.backgroundColor = "#FCFFFF";
        isVisible = true;
    }
    return false;
};

OK, not just the olden days, I still do it.

It is not much different but it does the same thing in a more efficient manner. This could be further improved but you get my point. There was already a lot of hacks with JavaScript but jQuery allowed developers, with not much understanding of how it works, to write very bad code. But it still worked.

So for me this was enough to push it aside and write my own functions to do just what I want. Handling different browsers wasn't so complicated because I already test my code on multiple browsers so I get to see what works and what doesn't. I was excited to work on a large scale project at work where I couldn't use jQuery. We needed the page to load as fast as possible and jQuery was loaded asynchronously. Some features needed to run on the DOMReady event but since we had no guarantee that jQuery would be loaded at that time so we had to write them all in plain JavaScript.

This project taught me so much. Creating a large application does give you the opportunity to appreciate what jQuery does in the background. With this project, I learned to leverage jQuery to write better code. Just because you can do something with the library doesn't mean you have to do it that way.

I learned JavaScript the hard way, meaning I had to do all the W3C and IE checks myself. Adding jQuery to the stack is like asking your older brother to help you with your homework. Not the brother that gives you all the answers of course, but the one that helps you think for yourself to come up with better solutions.

Now I use jQuery for almost every web project I start. If I had to start learning it again, I would do it exactly the same way. Even though there is jQuery for dummies I think you will be doing yourself a disservice entering the world of JavaScript with it.

If you are not a developer and your are trying to contact the freelancer who designed your website and can't get a hold of him, then by all means get that book and figure out how to make that button turn green when you click on it, or look for JavaScript in 30 days.

If you are more serious and want to create awesome applications using JavaScript then put jQuery or any of those fancy libraries aside for a moment. You will still learn them eventually but first you need to know what you are getting into. I started learning JavaScript from the book, New Perspectives on JavaScript and AJAX. It is from 2009 but still relevant. You won't just learn the basic, you will be able to start a project on your own. I highly recommend it.

You will get to work with the ugly part of the language and you will learn to appreciate it. When you will get to the jQuery parts you will see its real power not just the shortcuts it allows you to use.

I wish you luck in your journey in JavaScript land.

---