Look Ma, no jQuery!

jQuery is everywhere. Everywhere. And that’s testament to its ease of use and enormous community, but have you ever stopped to consider if you actually need it?

Scrolling image gallery? Most likely jQuery.

DOM traversing? $(‘.probably-like-this’)…

Form validation? You guessed it.

When I started out in web development in 2008, jQuery’s concise syntax and easy toggle, slide and fade methods made it easier to add some pleasing UI features. I say ‘easier’, I still had no idea at the time.

$('#foo').on('click', function() {
	$(this).slideToggle(); /* zomg it moves! */
});

For a lot of folk (including myself) these were the first tentative steps away from the comfort of HTML and CSS.

jQuery was like our childhood security blanket, protecting us from the big bad monster… JavaScript.

It’s time to let go.

A while back I made the conscious decision that I wanted to — properly — understand and learn JavaScript. It was eye-opening, I’d defaulted to jQuery and its vast array of plugins for so long that you forget it’s actually real JS doing the heavy lifting behind the scenes.

Now there are a lot of times when using jQuery (or other libraries) is absolutely required, but it’s at a stage now where jQuery is the defacto tool for stuff that could just be done with a little bit of vanilla JavaScript (gasp!). From what I see on Stack Overflow, 9 times out of 10 the answer to a JavaScript question will have a “You could just use jQuery” answer.

And they’re right, you absolutely could, you could probably write it quicker too; but is it worth downloading an entire 90KB library just to do a few manipulations and interactions? I don’t think so.

// change the text/html of an element with jQuery
$('#foo').html('Oh yeah new text!');

// a native js way
var foo = document.getElementById('bar');
foo.innerHTML = 'Oh yeah new text!';

...

// toggle a class on click with jQuery
$('#bar').on('click', function() {
	$(this).toggleClass('toggled-class');
});

// a native js alternative to toggle a single class
// (now updated to handle existing class)
var foo = document.getElementById('bar');
foo.addEventListener('click', function() {
	var baz = 'toggled-class';
    if (this.className.indexOf(baz) === -1) {
        this.className += ' ' + baz;
    } else {
        this.className = this.className.replace(baz, '');
    }
    // clear some whitespace
    this.className = this.className.replace(/\s+/g, ' ');
});

...

// loop through a list of items with jQuery
$('#bar a').each(function() {
	 $(this)... // do something
});

// native js with a good old fashioned for loop
var foo = document.getElementById('#bar');
var baz = foo.getElementsByTagName('a');

for(var i=0; i < baz.length; i++) {
	baz[i]... // do something
}

These are just a few crude examples, but ask yourself next time: Do I absolutely, positively, need jQuery for this?

Give it up for a week and just use plain ol’ JavaScript. Go on, try it. It’s liberating.