5 Great Alternatives for jQuery Libraries in 2023

jquery alternatives

Great alternatives for jQuery libraries. Don’t use select2, data tables, or jQuery UI if you don’t have to! This post covers vanilla JS alternatives to those jQuery libraries.

Introduction

This post covers some of the most used jQuery libraries. The purpose of this post is to present you with an alternative vanilla JS library that is similar to jQuery ones. This post is a follow-up post to my previous post on 10 and more great JS Methods as a replacement for jQuery.

Why should we stop using these jQuery libraries?

A lot of times I was in doubt about what to use on my front-end when I need quick searchable select or a sorting inside the table and I always go with jQuery even though I need it only for that one thing. That annoyed me a lot! Because why do I need to import the whole library for one date picker, I don’t want to do that and I certainly don’t have time to build it myself.

As I said in the previous post 10 and more great JS Methods as a replacement for jQuery, I have the utmost respect for all the creators of jQuery and the alternatives below. I am just not a fan of importing dependency that I am not going to use.

Vanilla JS Select2 Alternatives

If I need tags, search, or multiple options in the select element this was my go-to library, so far. I was scouring the web for some alternatives and I’ve found them.

Choices – 5.6k ⭐ on GitHub

This library has a great demo website, as well as documentation on GitHub. It comes packed with features that you are going to love. It uses the ES6 methods so all new things are available to you like using async and await for example, which is great! One of the many features that I love is the custom option templates.

Tom’s select – 1.1k ⭐ on GitHub

At first sight, it seems that it’s much simpler than Choices, but don’t judge the book by its cover, this bad boy is armed with features. And also has a small digital footprint of 16kb (gzipped)! Which is fantastic! One of the things I enjoyed about this is createFilter functionality, it allows you to for example validate the data before creating the select option or forcing the user to select the exact number of options. How cool is that?

Vanilla JS DataTables Alternatives

Whenever I needed table search or sorting of the columns I would turn to jQuery DataTables. Even though I don’t need the jQuery for the whole project I would import it, only because it’s a dependency of this library. Now, I found two great libraries that are offering similar things.

Hands-on tables – 17.8k ⭐ on GitHub

This library offers great features for managing your tables. It also goes well with React, Vue, and Angular. It’s almost an Excel-like feeling when you are working with them. You can edit the column values right on the spot, have the calendar pop up from the column, sort by whatever data you want even filter by condition. Note that this library is free only for non-commercial projects, research, private study, etc.

Simple datatables – 1.1k ⭐ on GitHub

Much more simpler than Hands-on tables, but also packed with features like filtering, pagination, sorting, column editing, etc.

Vanilla JS Calendar Alternatives

Managing time was always part of all the applications, no matter the programming language or framework. Whatever application you are building you will definitely need a date picker or event time picker. Some of the applications require even a date range picker.

EasePick – 337 ⭐ on GitHub

This package supports date as well as time picker. It also supports date ranges, it has a great configurator that lets you customize the package even before including it in your project. The good thing is that some of the features are structured as packages, so you can remove what you don’t need thus reducing the size of the library that you are including in the project.

Vanilla calendar – 95 ⭐ on GitHub

This package on the other hand is much better documented in my opinion, it also has an option to enable or enable the time picker. It has a light and a dark theme ready for you to utilize. Package supports locale so you don’t need to worry about translations and things like that. One of the great options for me was the Holidays property, where you can specify them, rendering those dates disabled in the picker. You can also choose between multiple types of calendar: month, year, and the default one.

This is also one of the popular topics where we add libraries to our websites or applications. Most applications and websites need some kind of carousel or slider.

Swiper API – 35.2k ⭐ on GitHub

Well, this library is just beautifully amazing! I got to say, it’s built without jQuery, but it’s safe to use with jQuery. Documentation is overflowing with information on how to use it. Swiper has all the animation that you can think of, there is parallax, cube, cards, flip, and many more effects. To perform better lazy loading is included!

Glide – 6.8k ⭐ on GitHub

If you need a simple carousel I think Glide is a way to go! It’s simple it’s documented, dependency-free, and only 7kb gzipped! Glide is built in a way that it’s completely modular, so if you don’t need some features you can drop its size even more, in addition to that this is also cool for theming.

Vanilla JS jQuery UI Alternatives

Now this is a broad topic, and it can be a post by itself, so I’ll try to keep it short by only giving you the things, that I would use instead of jQuery UI. If we check the jQuery UI website we can see that there are Interactions and Widgets sections there.

For all of these things, there is at least one vanilla JS library out there, so I won’t be listing all of them. However, I would rather talk about that sweet spot of “Is there one thing combining all of those?” well I think there is more than one. So that’s what this list will be about.

My opinion is that you can do something like the following, choose a JS framework/library, then choose a CSS library to go with it, and you are done. Let’s take a look at an example here.

Popular JS Frameworks in 2023

React
Vue
Angular
Alpine JS

Popular CSS Frameworks in 2023

Bulma
Blaze
Tailwind

My recommendation would be:

You are developing SPA:
React and Tailwind
You are not developing SPA:
AlpineJS and Tailwind

Conclusion

Well, that’s all folks, I hope I gave you some useful comparison of the free resources and alternatives to the jQuery-dependent libraries. In my humble opinion Web development should be free, to choose whatever you want to use. You shouldn’t be slow down by something that you need to include and you are not going to use it ever, it just sits there getting dusty.

What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
1

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top