ironeko.com/posts/jquery-alternatives-in-2020-do-you-really-need-it
JQuery alternatives in 2020, do you really need it? - Ironeko
jQuery is one of the most used Javascript libraries on the web, but does it need to be? Today we explore whether you really need it and how to replace it.
ironeko.com
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.
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.
|
// 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" |
jQuery is more semantic and easier to remember, but is that convenience really worth 85kb? (jQuery is 28kb when minified and gzipped) 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
Anime.js is a much smaller animation library compared to jQuery that comes in at a respectable 17kb. (examples Anime.js Codepen.)
CSS animations are 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"); |
Alpine.js (~7kB gzipped) - It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript. link
Alphine works great with Tailwind, one of my favorite CSS libraries.
javascript vs. jquery (cons of jquery)
www.educba.com/javascript-vs-jquery/
