Why you should ditch jQuery for native JavaScript

Remember that time when jQuery was the popular kid in school? 🤩 Well let me tell you, those times are long gone 👴.

What is jQuery?

jQuery is a cross-platform JavaScript library initially created so that the code we wrote in Google Chrome could also work in Mozilla, Internet Explorer and all available browsers. But that was before, nowadays jQuery is not necessary for new projects, only for legacy projects.

I know you are going to tell me that there are still projects that use jQuery such as Bootstrap and WordPress 🤨, but there is news, recently Bootstrap announced that its version five will come completely in Vanilla JavaScript, this means that they will no longer need jQuery in their dependencies. And as for WordPress 🤔 no one knows yet, but what is certain is that they are opting for new technologies such as React in their block editor Gutenberg.

You might not need jQuery

You might not need jQuery is a site I like to visit when there are things I previously did with jQuery and I want to know how they would be done with Vanilla JavaScript, remember that jQuery is just JavaScript interpreted for cross-browser compatibility.

The animations that we do with .fadeIn() could now comfortably be done with a CSS class and do something like this:

const photo = document.getElementById("myPhoto");

photo.classList.add("show");
photo.classList.remove("hide");

.show {
  transition: opacity 400ms;
}

.hide {
  opacity: 0;
}

With this we already have animations adding interactivity using JavaScript and CSS together.

Do you miss the jQuery selector?

Many people used to use jQuery mostly because of its selector that attracted a lot of attention, you could select any element of the document just using $('.myClass #myId h1'), and it is true, it is very cool this way and I am going to show you how 🥳.

Let's create our JavaScript with the selector we want to perform:

const $ = document.querySelector.bind(document); // Create a selector that references the entire current document

We create an HTML with attributes that we can handle:

<!DOCTYPE html>
<html>
  <head>
    <title>My Selector like jQuery</title>
  </head>
  <body>
    <h1>h1 Title</h1>
    <p class="class-p">with class</p>
  </body>
</html>

Now we can change properties of the elements in the following way:

const $ = document.querySelector.bind(document);

$("body").style.background = "red";
$("body").style.color = "#fff";
$("h1").style.fontSize = "200%";
$(".class-p").style.fontSize = "48px";

// And whatever you need to do when you call the element(s)

That's it, congratulations! You've just made your own jQuery-style selector with Vanilla JavaScript 🎉🥳.

Final result

How to keep learning?

I did a course on Platzi on how to move from jQuery to JavaScript that helped me to update myself that I really don't need to use this library anymore, unless of course I work on legacy projects. I'll leave you with this list of resources that will help you better understand how to move from jQuery to JavaScript:

Conclusions

Finally I recommend you to learn little by little the new trends that are coming out in the market and adapt to their use. I'm not saying that you should follow the popularity of today's frameworks and libraries that are currently used, experiment, research, practice a lot and above all never stop learning 😎

Blog ✌️