jQuery is one of the most used Javascript libraries on the web, but does it need to be? In this article we'll explore whether you really need it and how to replace it.

jQuery was the de-facto library if you were doing any website development in the 2010's. It simplified Javascript and made DOM manipulation easy even for inexperienced developers.

But if it's used so much, why would you want to switch away from it?

Why would I want to replace jQuery?

Here's the thing: jQuery is great for certain things. It makes Javascript code easier to read and allows a developer to easily make any static page more dynamic.

Unfortunately this comes at a cost. jQuery is 28kb when minified and gzipped, which is quite a lot in web terms. To give you a comparison, [React + react-dom is just 34kb](https://reactjs.org/blog/2017/09/26/react-v16.0.html#:~:text=react%20is%205.3%20kb%20(2.2,kb%20(6.9%20kb%20gzipped).).

So if you consider that jQuery is used mostly on websites which need to be fast and rank highly on Google, it can be a potential performance killer.

The second biggest problem with jQuery is that you don't actually really need it. A lot of the functionality that jQuery offers is already available in vanilla Javascript. Sure, it might not look as pretty or be as easy to write, but it's definitely worth learning as it will ultimately make you a better programmer.

Here's a couple of examples:

// Listening for clicks on an element

// jQuery
$("#target").click(function() {
  console.log(`Clicked`);
});

// Javascript
document.querySelector("#target").addEventListener("click", event => {
  console.log(`Clicked`);
});

// Find all elements within an element

// jQuery
$("#container").find("div");

// Javascript
document.getElementById("container").querySelectorAll("div");

// Show and hide element

// jQuery
$("#target").show();
$("#target").hide();

// Javascript
document.querySelector("#target").style.display = "none";
document.querySelector("#target").style.display = "block";

You get the gist of it. Yes, jQuery is more semantic and easier to remember, but is that convenience really worth 85kb? Considering that a website might not be using tree-shaking, that's a whole lot of unused code that will still need to be downloaded.

Replacing jQuery's functionality with smaller and newer libraries

jQuery's greatest strength, as previously mentioned, is its convenience. The library doesn't just do DOM manipulation - it animates elements and helps with AJAX requests, among many other things.

Unfortunately this strength is also its greatest weakness, as its complexity and size have ballooned out of proportion to allow it to do everything it needs to.

So, what libraries can we use to replace jQuery's functionality?

Animation: Anime.js

Anime.js is a much smaller animation library compared to jQuery that comes in at a respectable 17kb.

Anime.js does everything you're used to with jQuery in a very similar manner (check out the beautiful timeline animation docs) and it actually ends up being much more reusable than jQuery itself.

In fact, Anime.js can be used to create very complex animations outside of what you'd expect on a normal web-page. You can find all these examples on the Anime.js Codepen. Needless to say there's some very impressive stuff there.

Animation: CSS and Javascript

This might sound obvious, but it's likely that unless you need to chain complex animations together, you might not even need an animation library at all.

CSS animations have come a long way and they're the most solid option to use in most cases. These can be triggered by interacting with any element on the page or just looped infinitely with CSS Keyframes.

If you need a little extra interaction, it's extremely easy to add CSS classes to specific elements with Javascript:

document.querySelector("#target")element.classList.add("class");

Honestly, before you download any further libraries, make sure it can't be done with what's already available to you!

Interactivity: Alpine.js

I honestly cannot recommend Alpine.js enough. It's an absolutely genius library and I wish I had discovered it sooner. The library comes in at 25kb and it's well worth its weight.

Alpine is built on the concept that separating your DOM and the Javascript that manipulates it is hard to keep track of. Because of this, all the code that makes your DOM interactive is written directly into the HTML. Once the Alpine library is loaded, it looks for Alpine-specific attributes in the DOM and creates interactive elements.

The concept might be a little hard to wrap your head around the first time you use it, but after a couple of hours you'll wonder how you ever worked without it.

The best thing about Alpine? It works great with Tailwind, one of my favorite CSS libraries.

Explore and find your own solutions!

The great thing about web development is that there's so much choice for anything you could possibly want to make. So next time you're building a site try something you've never done before. I bet you'll learn a lot more in the process than if you had decided to just use jQuery for the 50th time!