jQuery vs. vanilla JavaScript

I’m new to web development, currently a student. Overall, jQuery doesn’t seem to be as popular or necessary as it once was. When it comes to simple scripts and functionality (not complex web apps that would require a different framework), is it still a good idea to use jQuery as opposed to JavaScript? Are there any significant advantages or disadvantages to each? Is jQuery today basically just a tool to make JavaScript a bit easier and quicker to write? Should issues related to having to load jQuery (such as, what if it fails to load for some reason, or what if it takes too long to load) ever be something to worry about? Hope this wasn’t too broad.

2 Likes

Hi @storymakerechidna, I think there is a lot more value in doing it vanilla. As you said jQuery is no longer that relevant. By going vanilla you will be able to port your code to any project whether it uses jQuery or not, without any effort. By doing so you will learn real JavaScript instead of abstractions that may not apply to any given project. I would go vanilla 120%

2 Likes

I agree with Vanilla!
jQuery does not fit in todays modern javascript ecosystem and its possibilities.

By abstracting away many things that do not need any abstraction anymore, you punish every user that uses a modern browser with extra kilobytes to load and to parse. If you use a service such as https://polyfill.io/, you can deliver only the fixes to browsers that need them.

For me, the only reason to use jQuery, is because of its plugin ecosystem. Which is quite sad, because you can achieve the same functionality without jQuery. However, mostly there are dependency free alternatives (See http://microjs.com/ for a list). I found, that if you find a module you need in a sophisticated package repository such as npm, chances are, they cared about proper ways of embedding the module into your project.

There are a common pitfalls
It would be unfair to say that when you use jQuery, you start writing spaghetti code.
However, jQuery encourages you to use IDs for a single case scenario. This is what you learn when you start out.

They do that at the very beginning of the homepage, where they show demos of what jQuery can do.
The documentation works in a similar manner. Everything is applied for only one element for that one case.

I can’t tell how often I see beginners applying the same functionality to #item1, #item2,… #item48, when they could just loop over elements. But they are not to blame! They do not know it better. They see jQuery as a full replacement of javascript and never learned how to loop through elements. In many cases you will reach the limits of jQuery and have to resort back to vanilla js. Instead of learning how to create functionality for an element in a component-based fashion. In a recent thread, I explained how to solve a problem as a re-usable component.

When I started to learn about which objects the DOM consisted of and how I can interact with them, it was a lot clearer to me, how everything works together. Like missing pieces in a big puzzle. jQuery can’t entirely remove the need for knowing native javascript. Even though they have their own event objects for something like a mouse click, you still need to know which properties there are. MDN is doing a great job in documenting everything around this topic.

jQuery also started the trend of starting to touch the DOM only after it is completely loaded. Which is not necessary in most cases.

That’s it for now.

1 Like

I have also read that JQuery provides a means of dealing with browser differences which is one of the advantages of using JQuery, whereas with vanilla JavaScript you would have to worry about that issue and deal with it yourself. How true is that still, or is that a thing of the past?

How true is that still, or is that a thing of the past?

As long as you’re not building in functionality that is specific to one browser or another and following standards, it’s a thing of the past. There might be some minor inconsistencies here and there, but nothing worth using a whole massive library.

2 Likes

You might not need jQuery these days. That website really is quite useful.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.