jQuery is probably still the most popular and widely used JavaScript library out there today, and that's mainly due to its longevity. Latest estimates put the total number of websites using jQuery to over 70 million currently. Since its inception, jQuery has grown in both functionality but also in its size. jQuery likes to tackle many different areas of web development, even if you do not plan on using it. This can make it a relatively expensive resource to load if you aren't using it heavily.
But it's 2021, and there are options now. At least, more valid options. Here are 4 recommendations for jQuery alternatives that you can start to incorporate into your projects this year if you are looking to reduce overall resource consumption.
1. Cash
Cash provides jQuery style syntax (meaning $() ) to add functionality to your current applications. The standout feature of Cash is its absurdly small file size coming in at around 8KB in total. Compare that to the latest compressed version of jQuery, which sits at around 90KB.
The main reason for its small size is because it is not trying to compete with jQuery. Cash relies heavily on modern JavaScript standards (post ES5) in order to accomplish many of the same features found in jQuery. Which means that instead of including it's own set of functions for hundreds of features (already found in JavaScript), it instead focuses on only the most useful functions.
By leveraging the already functional and optimized standard JavaScript library, Cash is able to focus mainly on what it does best, DOM manipulation and event handling. It's syntax is kept simple overall.
$.each(collection, callback) // iterates through a collection applying the callback function
$('selector').addClass('className');
$('selector').attr('name'); // returns attribute value
If you already have a project relying on jQuery, then much of your code should still actually work as the syntax is unchaged and the only underlying difference is the actual implementation, which is black-boxed in a sense.
Having said that, Cash does not include any custom animation modules, which jQuery does. This also lends a hand in reducing the overall file size. If you like jQuery, and don't have crazy demands, then this is a good alternative to use, but just be mindful that it does not aim to tackle every single challenge possible.
The one main downside that I will close on, is that Cash does not support older browsers. So if you are working on an application that, for example, needs to run on IE8 or IE9, then sticking with jQuery would still be your best bet.
2. jQuery Slim
If you don't want to give up on jQuery completely, there is an alternative that you can try. jQuery Slim is a subset of the jQuery library that excludes the ajax and effects modules to reduce the overall size. Though you won't be seeing any lightning fast results here. The reduced library still comes out to around 72KB in size.
If you know for a fact that you will not be using the mentioned ajax or effects modules, then this is still an upgrade that can benefit you, even if just slightly.
In the near future though, it would be nice to see jQuery offer the option of bundling only the required modules that a particular person might need in their build. While it might increase the time that it takes to configure and download the library, the long term positive effects would be hard to miss.
3. SyncFusion Essential JS2
This library isn't exactly a replacement for jQuery, but more for the jQuery UI library.
Also, this one is not free, but it is the most interesting. SyncFusion JS2 is a modern JavaScript UI Control toolkit that focuses heavily on performance and does not rely on any external dependencies. The library itself is responsive and touch-friendly, meaning that it will render controls functionally well on mobile devices.
The library itself is built using TypeScript, and if you are not familiar with TypeScript, feel free to check out my introductory article here.
A few examples of the built in controls include:
DataGrid
Pivot Table
Tree Grid
Spreadsheet
Charts
Heapmap Chart
Barcode Generator
TreeMap
Just to name a few. And if you have ever worked with data heavy websites, you will notice one thing. Those controls mentioned above are not easy to implement. You might either have to built the entire module yourself from scratch, or rely on many different libraries to get things accomplished. This could involve adding multiple dependencies into your project and really it would just make maintenance difficult.
Not to mention optimization.
I spent a fair amount of time playing around with the DataGrid component and it is impressive from a performance standpoint. I have personally implemented many of the features that the DataGrid includes right out of the box, and they are difficult. Things such as fixed headers and footers with an infinite scroll dataset of 10,000 records rendering almost in real-time are common in applications such as CMS's or Ecommerce platforms.
Typically you have to code various 'hacks' in order to get these features to render smoothly given large data sets. Syncfusion seems to have tackled these issues on their controls and done so in a responsive and cross-browser way.
It's not cheap, but I think worth checking out depending on the project that you are working on.
4. Build your own
Only you know what you really need in a library. And it might be completely different from the developer that is sitting across from you in your cubicle. So there is no harm in building your own library. That is essentially how jQuery first started and how Cash (mentioned above) started as well.
If you are looking to replace jQuery, then I would definitely start here. There is huge benefit in keeping the same syntax and just replacing the core logic with your own. This way when you are ready to launch, you won't have to make huge potentially breaking changes in your codebase.
I personally use an alphabet based approach with my own library. By that I mean that I have the same functionality that jQuery provides but instead rely on short initials to declare functions, for example:
d(selector);
a(el, new); // append
ac(el, className); // add class
let newelement = c('div'); // create element -> div
While (probably) not intuitive to someone other than myself, this method works for me because I know every function implemented as the initials of the original function give it away. And best of all, I can continue to add new functions (or versions) following the same standard without any issue.
The overall file size itself is well under the 8KB that Cash uses. And that's mainly because I am still relying on pure vanilla JavaScript to get the job one, also like Cash. I'm simply just wrapping the code with a shorter more concise naming convention.
And lastly, because I'm not relying on the $() notatoin, I can still use jQuery side-by-side without creating any kind of conflict.
Last thoughts
If you are already using jQuery heavily and like using it, then continue to do so. I myself like using jQuery regardless of its file size, because it essentially takes many things out of my hands and does them better than I could. But more importantly, it is still well supported by a strong team, and that's more valuable than most people think. In coming up with this small list of libraries, I consistently kept finding many libraries that were no longer supported or that had last been updated years ago.