JQuery is getting old. What technology should replace it?

Hi there!

In response to some of my latest articles, a few of you have sent me a quick e-mail asking "But ... in legacy applications, what do I replace JQuery with?"

So, when a question comes up, you know what we do? We write an article ... for everyone to enjoy.

Bootstrap 5, the final stage in JQuery's demise?

Let's take a quick look at some history.
JQuery arrived on planet Earth in 2006. Back then, there was a big problem on the web (it was called Internet Explorer?, roh ça va, are we kidding?), the problem being that each browser had its own very personal way of interpreting JavaScript, with the same JavaScript code being interpreted differently by Firefox and Internet Explorer (Chrome didn't yet exist).

JQuery came along and made it possible to "unify all that": it acts as a relay between the developer's code and the browser, with a single code base making it functional "everywhere", albeit with a few minor exceptions ... (shall I make the IE joke again?).

It's still used today, even though it's often "mocked" by developers, partly because a dev likes novelty and there's nothing more "legacy" than JQuery, but also for other reasons:

• JavaScript interoperability between browsers is no longer so disastrous
• Modern web applications use more advanced tools such as React / Redux or Angular

Until Bootstrap 4, JQuery was still a dependency, but since version 5 the Bootstrap developers have removed this dependency, in my opinion this was the last step for JQuery to go.

Personally; in some projects it's still there and I don't really have a problem with it, I'll take it out when I feel the need.

React / Redux or Angular or VueJS are not replacements for JQuery, they were created to solve more complex problems.

It's entirely possible to write a complex web application with JQuery, but it would really be a lot of lines of code for very little...

JQuery was great for small websites, where the page reloads entirely when a link is clicked, but you still want a bit of dynamism ... so what do you replace it with?

Tools to replace JQuery

Fetch, for HTTP requests (Ajax)

One of the uses of JQuery is to make HTTP requests, to fetch additional information once the page has been loaded, or to update content after a user action.

The fetch() API is now fully integrated into browsers, enabling HTTP requests to be made, and since it's built into the browser engine, there's no need to import other libraries, which is great!

For those who want more possibilities and feel limited by fetch, take a look at the "axios" "lib".

Native JavaScript for changing page content

For this part of the process, i.e. updating the content of an element, you don't have to look far either.thode available on all elements of your DOM, works equally well everywhere, so there's no need to worry about that.

And for events (click, hover, focus ... etc.)

Here, too, things can be very simple: just add an event listener with the addEventListener() method to an element on the body.The logic remains the same as with JQuery, it's just the method names that change.

Stimulus to go further
Personally, I'm a big fan of Stimulus, as it allows you to track a lot of events via HTML, without getting bogged down in writing millions of lines of (useless) code.

If you want to go even further, take a look at Stimulus Use, with lots of events, easy to import, no headaches.
I'm a huge fan of Stimulus and I'm using it in more and more projects. Once you've had a taste of it, it's hard to go back, as simple HTML attributes can already do so much...

To go even further?
With JQuery, I've already seen sites replace almost the entire page by making an AJAX request and writing the content retrieved from the server to the DOM.

Stimulus' big sister library for doing this is Turbo, which I've already told you about.

But here I think we're getting away from a "normal" JQuery use case, so I won't dwell on it.

Conclusion

In fact, if you look closely, all you need to do is use the browser APIs to replace what JQuery does.
That's why it's often "mocked" by devs today, because it's become an overlay you can do without.
But guys, let's not forget the services they've rendered us (Not because Internet Explorer 6 was anything special !!!!).

Until next time?