I get this question asked all of the time from my fellow programmers. And my answer will typically be something like "Why is it wrong to use jQuery?". Most of the time there is no answer on the other end. But sometimes people do have valid points.
So in this post, I will go into both sides of the debate. Because I personally use jQuery for most of my projects. Not all. But most. And while I'm not married to it in any particular way, I still think it's a solidly built library.
What is jQuery?
Let's start here because it's where most people tend to fall into confusion. jQuery isn't a framework or a stack or a language. It's simply a library. More specifically, it's a JavaScript file that comes with hundreds of pre-built functions that somebody wrote so that you don't have to.
Who wrote it? A guy by the name of John Resig was the creator of jQuery back in 2006. And much like any programmer, he probably built it for himself first. To solve his own problems in his day to day coding life. Every programmer does it. The only difference here is that John made it public and because it was so useful, it went viral. Now millions upon millions of websites around the world rely on it for many things.
Certain online surveys[1] have it beat out pretty much every other JavaScript library by a huge margin.
So again, jQuery is just a JavaScript file.
<script type='text/javascript' src='jquery.js'></script>
It's somewhere between 50kB and 100kB on average. This depends on the version that you want to use and whether it is minified or the complete raw file.
That's all jQuery is. So let's keep going and see what the fuss is all about.
Is it okay to use it?
Unless there is a reason why adding an extra 50kB file to your web projects is detrimental, then there probably isn't a problem here with including it in your web project. Whether an online commentor thinks that it is old and outdated, should be irrelevant.
Again, I say that because whether you reading this right now are using jQuery or not, there are tens of millions of websites out there right now using it. The project is now run by a team of volunteers also called the jQuery Foundation, with a Board of Directors, many who are notable in the software engineering and web community.
And more importantly, jQuery is still being actively maintained and developed. New features are getting added and bugs are being fixed on a constant basis. This is something that the "newer" libraries that all the young programmers are into don't have.
Most new competitors to jQuery are starting from scratch. And while they may have a good product that runs fast, they don't have the architecture and years of experience that has gone into developing a framework that is used by millions.
Less typing
This is the heart and soul of jQuery. It offers you many standard JavaScript features, but with much less code. Take the act of toggling a DOM element's class for example. In traditional vanilla JavaScript terms, you could do that with the following:
<div id='element1'></div>
<script>
document.getElementById('element1').classList.toggle('className');
</script>
Pretty straightforward and nothing too crazy. Now let's take a look at the jQuery version:
<div id='element1'></div>
<script>
$('#element1').toggleClass('className');
</script>
It might just be a few characters shorter, but most large scale web applications are tens of thousands of lines of code. So even saving a few characters here and there, it adds up. And it's more than just the DOM manipulation. jQuery comes with certain visual effects built in that would otherwise you type custom CSS and JavaScript to accomplish. Things such as fading an element in and out on the page. It's a small trivial visual trick, but one that is used more often than you think.
And the more you become familiar with the library, the less code you will probably find yourself using.
Everyone recognizes it
While it is true that the JavaScript specification has come a long way since 2006 and many of the features that jQuery added are now native to the language, it is also true that not every developer keeps up with the JavaScript specification. And that's because ti's huge. It's hundreds of pages of content that is maintained by the biggest tech companies in the world and changes happen often and frequently enough that no one person can really keep it track no matter how hard they try.
jQuery is almost like a shortcut through much of that noise. Everyone recognizes the following:
$('#id')
When you see that, you know that some jQuery is coming. Which means that you know exactly where to look if you are having any form of trouble with a function. You go online and find the jQuery community and odds are your questions have been answered already.
And that's the trouble with going the pure Vanilla JavaScript route, which I am a fan of, but I recognize its faults. If for example you have your own custom function that does a smooth fadeOut on an element, such as:
function fadeOut(id){
// fade out code goes here
}
You could totally do that. Except you would be the only person that would know how that function works, and odds are you have some edge cases that you have not tackled just yet in your code.
Whereas the jQuery fadeOut function is heavily tested by millions of website visitors every single day, and it has an entire page of documentation online for you to browser through.
And if it isn't working for you, then odds are there are plenty of StackOverflow pages with your question answered. Compare that to your custom fadeOut function above, which probably has little to no documentation and which more than likely won't be updated by any form of a community.
Cross-browser
You may not realize it when you visit a popular website these days, but there is a good chance that a huge number of the people that also visit that exact same page, won't see what you are seeing. And that's because everyone is on their own browser and OS. Not to mention their own version of a browser and an OS. Windows 7 Firefox 9.0 is different than Windows 10 Firefox build 82.0.1. They just are.
If you have a website that was written 5 years ago, there's a chance that some of that code isn't being supported anymore. But the most likely case is that some browsers will keep supporting and others won't. This happens all the time with FireFox and Chrome. Chrome tends to be more friendly with new "non-final" features, but FireFox typically comes in later with support (sometimes).
jQuery supports the latest browsers, which means that their code more than likely is going to run the same across the board without you having to worry about it. Without jQuery, this is your job to maintain. I'll say now that you should always strive to write code that runs on every browser, but this requires extra work on your part. Each browser handles JavaScript in their own way and sometimes, a "keyup" event will behave differently on each browser.
Last words
In closing, I'll say that I like jQuery. I'm not in love with every single part of it. Some of the functionality can be a bit confusing to understand. But it's free and you always have the option of using plain of JavaScript whenever you need it.
I mix and match it into my code when appropriate. Sometimes I use a document.querySelectorAll, and sometimes I use a $('query'). It depends on the project and on the exact thing I'm trying to accomplish.
But I always include it into every one of my projects, just in case I get the urge to fadeOut an element. It isn't wrong and it isn't right. It's just a tool that you can use.