The Use of jQuery in Tutorials

Avatar of Chris Coyier
Chris Coyier on

A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials.

Lately I’ve begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It’s hard to find a solid tutorial that doesn’t include jQuery instead of JavaScript. What’s your opinion on the overuse of the library?

The question was from Nick Hehr who wrote about it as well. You can listen to our answer there with this time-jump link.

If you’ve been reading this site for very long, you know we’re a bit guilty of that. I’m not sure there has ever been a tutorial posted here that just used “vanilla” JavaScript (i.e. JavaScript by itself, no framework) rather than jQuery. Or if we have, they are few and far between. Is that a bad thing? I’m not so sure it is. But it is certainly worth discussing.

A little bit later I published an article that covered how to swap out text after an event. I covered five ways to do it. jQuery was used in two of them, vanilla JavaScript another, and CSS for the other two. Including jQuery, even amongst other options, ignited some “that’s just overkill” style discussion:

So here’s how I feel about it.

I Write What I Do

This blog is a reflection of things that I learn. I use jQuery a bunch. So when I translate things into a tutorial, I do it how I would do it.

I have only worked on a handful of sites that didn’t use jQuery in the last many years, and those that didn’t used some other library or just didn’t need JavaScript at all.

jQuery is JavaScript

Literally. Using jQuery is still literally writing and working with JavaScript directly. jQuery just makes it easier and lowers the bar to entry. I know loads of good JavaScript developers who started with jQuery. Just like there are loads of good guitar players who started as a Dave Matthews Band Cover Band Cover Band.

Tutorials are Concepts

The goal of a tutorial is to teach an idea and do it fairly succinctly.

Let’s say you wanted to select a button with a certain class name and change some text when it is clicked. To avoid any dependancies, maybe you do document.querySelectorAll(".my-button"). But that will return an array so you need to use [0] at the end of it to target the element and attach the event. Or should we just use querySelector instead which selects the first? Or should we run a loop or map over the array to bind to all of them? Or should we have used getElementByClassName? What about browser support? Should we talk about polyfills for that? Or should we just add an ID and use getElementById since that’s likely a best practice?

Or, we could just do $(".my-button") and get on with the tutorial. All of that stuff is interesting and worthy of discussion, but not in every single tutorial every single time. jQuery allows the concepts in tutorials to shine without getting bogged down in detail.

The Future

Right now I feel like jQuery is still a pretty important part of the front end stack, well worth learning, and still appropriate to use in tutorials.

But things will change on the web. How JavaScript is presented in tutorials will change as well. Probably. We’ll change with it. Probably. I’ve seen comments floating around the last few months like “I feel like if I’m using jQuery I did it wrong.” which I’ve never heard before and may be harbingers of change. The newschool approaches of Ember/Angular also loom.