I get this question asked all of the time from my students. 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?
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.
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.
Pretty straightforward and nothing too crazy. Now let's take a look at the jQuery version:
And the more you become familiar with the library, the less code you will probably find yourself using.
Everyone recognizes it
jQuery is almost like a shortcut through much of that noise. Everyone recognizes the following:
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.
// 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.
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).
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.