JQuery alternatives in 2021, do you really need it?
But if it's used so much, why would you want to switch away from it?
Why would I want to replace jQuery?
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.
Here's a couple of examples:
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?
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.
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.
Honestly, before you download any further libraries, make sure it can't be done with what's already available to you!
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.
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!