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.
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.
$.each(collection, callback) // iterates through a collection applying the callback function
$('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.
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:
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:
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.
And lastly, because I'm not relying on the $() notatoin, I can still use jQuery side-by-side without creating any kind of conflict.
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.
Share a cup of coffee with ThatSoftwareDude ☕
If you enjoyed the content on this blog, consider buying me a cup of coffee.