Should I use jQuery in 2021?

Well, I guess nobody expected such article in this day and age, but let’s be real, jQuery has been in available for around a decade and it helped a lot.

It helped us with cross-browser compatible code, event listeners, AJAX, DOM traversing and manipulation and also animations.

Selecting DOM elements

The magical $.(''). You could have put there any selector you can think of, for example $('[data-name*="any"]') to select out element, since JavaScript offered only a couple of ways, for example

  • getElementById
  • getElementsByTagName
  • getElementsByClassName

And that was it. It was impossible to use some advanced options, that jQuery offered.

Nowadays everything is different.

JavaScript offers methods:

  • document.querySelector
  • document.querySelectorAll

that accepts any css selector you can think of.

No need for jQuery here.

Event listeners

We should all be grateful for jQuery for being developed.

$("#button").click(); // do it

versus:

document.getElementById("button").addEventListenrer("click");
document.getElementById("button").attachEvent("click");

Don’t eve get me started on attaching events for multiple elements.

Live events

Well, whatever you think about jQuery, it still wins in attaching live events, or attaching events on elements that are yet to exists in within the DOM.

AJAX

For quite some time, in JavaScript there was only XMLHttpRequest available for doing AJAX requests. I haven’t known any person in the world who would know by heart how to write code in that native code.

Libraries were used always.

And jQuery won the battle. It not only contained DOM manipulations, animations… but also AJAX… and have look to the easyness of how implementaiton:

$.get(url, {param1: param1, param2: param2});
$.post(url, {param1: param1, param2: param2});

Smooth, isn’t it? 😉

Nowadays, there is very well-know JS api called fetch API() that totally replaces XMLHttpRequest and you can use it with ease, for example:

fetch(url).then();
fetch(url, {method: "POST"}).then();

No need for jQuery here no more 🙂 .

DOM Traversing

I could not but love it. To find an element? To get a closest parent with specific selector? No problem, jQuery offered multiple ways.

$("button").closest("tr[data-id]");
$("button").closest("tr[data-id]").find("input");

Quite impossible to accomplish that with pure JavaScript. Well, consider the example below:

var myElement
while(myElement.parentNode) {
    if(myElement.parentNode.nodeType === ELEMENT_NODE) {
        if(myElement.parentNode.className.indexOf("myClass") !== -1) { 
             
        }
    }
}

Nowadays, the pure JavaScript offers a method called .closest() that does the very same thing as jQuery’s and also, as a replacement of .find() in jQuery you can use JavaScripts’s querySelector or querySelectorAll.

Animations

.fadeOut(), .fadeIn(), .slideToggle()… good times.

Nowadays, you can accomplish similar animations with pure CSS by using @animations or transitions, bound the animations to a css class and toggle the class on an appropriate action (after a click, submit, keyup… etc) using JS’s classList object.

Wrapping up

To answer the question whether jQuery still should be used in 2021 we need to think more deeply about the use particular case we would need it.

For example if you are an angular/react/vue developer, you are probably doing everything with your own code or 3rd party libraries, so animations or ajax is not a problem for you.

If you are coding a website that is just a preview of you designs and you don’t want to pay much attention to your code quality and also you are a kind of lazy developer, go ahead and use it! 🙂

At the end of the day, it’s not technologies that make use good or bad developers. Nor a person is not a good or bad person because they uses this and that.

It’s only whether we know how to write and build a functioning website or application, can prepare the application for the future updates and not to cause headaches for the developers who are going to update it.

As always, yours in writing.

Ivan


Sources:

  • https://dev.to/mouadkh9/do-we-still-need-jquery-in-2020-4n48
  • https://school.geekwall.in/p/Iz4kF7fZ/using-jquery-in-2020
  • https://developer.mozilla.org/en-US/docs/Web/CSS/transition
  • https://developer.mozilla.org/en-US/docs/Web/CSS/animation
  • https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  • https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
  • https://www.w3schools.com/jsref/prop_node_nodetype.asp

Leave a comment

Your email address will not be published. Required fields are marked *