A short guide on how to switch from jQuery to Vanilla JS in WordPress

In this article, I explain why jQuery is no longer needed in WordPress. And most of the things that were done using a framework can now be done using plain JavaScript.

jQuery's mission was to make JavaScript fun. Back in the day, writing JavaScript meant having to support several different browsers that each did things differently, from DOM manipulation to AJAX requests. 

A brief history of jQuery and WordPress

WordPress started using jQuery because of the benefits it brought at the time. It was mostly easier for developers to use the library and not think about what was happening under the hood. JQuery took care of the browser inconsistencies and quirks.

But over the years, JavaScript got more standardized, and now there is a native API that makes jQuery not required in some cases. In addition, jQuery grew in size to almost 250kb unminified. That's a lot of JavaScript to load for just convenience.

More advanced libraries like React or Vue have already replaced jQuery in large-scale applications. And in smaller sites or WordPress builds, Vanilla JS should do the job just fine.

What is Vanilla JS

Vanilla JS means using plain JS with no library. The latest JavaScript versions advanced a lot, and browser support is pretty good, so JS can be fun without heavy libraries. 

Using Vanilla JS can improve site performance and help you understand how JavaScript works under the hood. This understanding will be helpful when migrating to other frameworks or building more complex applications.

If you have experience with jQuery, switching to Vanilla JS is not that hard, and you can do most of the same things without the overhead of a bloated framework.

Making the switch from jQuery to Vanilla JS in WordPress

Now let's look at a few examples of jQuery code and how we can write them using plain JavaScript.

Waiting for the DOM to load (document.ready)

When writing JS, and especially when manipulating the DOM (the HTML of our WordPress site). We needed to make sure that the page was loaded and all HTML was rendered and available for us to manipulate. This is how the jQuery code looks:

$(document).ready(function(){
    // code...
});

In Vanilla JS we can replace this with:

document.addEventListener("DOMContentLoaded", function() {
    // code...
});

This code does the same thing without the performance penalties of having jQuery do its magic under the hood or loading an extensive library.

Selecting elements

Selecting elements is one area where jQuery used to make things very easy for us. The jQuery selectors made selecting elements as easy as writing some CSS selectors. The library would do its magic and ensure browser compatibility under the hood. 

Selectors were also one of the most abused features of jQuery, and not optimizing selectors could create performance issues or even memory leaks.

$('#header')
$('.class')
$('h2')

We can do the same thing using just plain JavaScript, for example:

document.getElementById('header');
document.getElementsByClassName('class');
document.getElementsByTagName('h2');

Async requests (AJAX)

When I first heard about AJAX, making an HTTP request using plain JavaScript was a nightmare. You had to write the HTTPRequest object differently for each browser. 

But then I learned about jQuery, and everything was easy. The $.ajax, $.post, $.get requests just worked the same cross-browser.

Now all major browsers support the fetch API. The fetch API is the best way to get data if you are using plain JS, React, Vue, or other libraries:

So getting acquainted with the fetch API will be helpful going forward when these libraries come to WordPress. But, first, let's look at a few side-by-side examples of using AJAX in jQuery vs. the fetch API.

$.get( "ajax/test.html", function( data ) {
    $( "#result" ).html( data );
    alert( "Load was performed." );
});

fetch("ajax/test.html")
.then((result) => { return result.text(); })
.then((data) => {
    document.getElementById("result").innerHTML = data;
    alert( "Load was performed." );
});

Conclusion

In conclusion, jQuery is no longer necessary in WordPress, and we can improve performance and reduce the file size by switching to Vanilla JS. Of course, we need to take a few steps to make the switch, but we can see significant benefits with a bit of effort. And it will future-proof our knowledge for when jQuery will come to its end of life.