Are you sure you need jQuery?

You use jQuery.

Everyone does.

It is an awesome library, it took us out of the collective pit of despair that was js support in the early 2000's. It was an essential founding stone on the modern web.

But we are not there anymore. Javascript support is much more complete and uniform across most browsers. ES6 is almost commonplace now. Browsers update regularly and automatically.

Sure thing jQuery does download compile and run awesomely on your cutting edge 16 cores, 32GB RAM laptop connected to metropolitan fiber-bandwidth wi-fi. But that might not be the case for many of your users. Slow loading pages are an issue for them, but also for you, because most mobile users leave any page taking more than 3s to load.

The thing is, do you really need it?

Because most of the times, what we do with jQuery is:

• select dom nodes based on css
• add or remove classes to html elements
• add or remove attributes to html elements
• add or remove content to html elements
• fetch some new html over an ajax call

And you know what? You don't need jQuery for that.

So I am going to give you two alternatives:

• You only use a little jquery
• You use most of jquery

and

• A final word of caution

You only use a little jquery

You are doing a brochure-style site, or adding small interaction enhancements to a not-so-dynamic web. It is not an app, those are using frameworks and we know it. It is your portfolio, your bosses' niece kite-flying home page, or a simple landing+sign-up for a really cool but still-unreleased bigger project. Then let me show you:

DOM manipulation

Array manipulation

If you are missing a lot of stuff from here but still would like to skip jQuery, have a look at LoDash (~4kB gzipped)

Events

Bear in mind that jquery allows you to observe on an element collection, but if you used querySelectorAll then you need to observe every element of the result, like this:

// https://stackoverflow.com/a/50101839/97635
document.
  querySelectorAll('.tracked').
  forEach(input => input.addEventListener('click', this.trackLink));

Ajax calls

XMLHttpRequest is a handful, and I am not going yo convince you to ditch your handy $.ajax({}) call for it, so let's talk about Fetch. Fetch is a modern replacement for XMLHttpRequest, but it does not have same widespread support as the rest of the API's we have been mentioning, so it is worth mentioning that there is a polifyll available, that you could serve only to the relevant browsers, keeping everyone else on a byte diet.

fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.querySelector('#userlist').innerHTML = body
  })

You use most of jquery

Be this because you have an existing and big base of code, or you feel too comfortable to try and do things differently...

Then I want to introduce you to Zepto.js
Zepto is (in their onw words) a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

It is 9.6k when gzipped, so already smaller than your logo. Go check it.

A final word of caution

If you are using jquery, loving it, and serving it from a blazing fast CDN, minified and gzipped (28.87 KB), then maybe it beats going out of your way to avoid it.

Don't bother with any of the above if you are serving a multi-megabyte framework-dependent frontend MVC SPA. Focus on your framework best practices, and learn its quirks.

JQuery is awesome, I have no ill intend towards it. It has become the de facto plumbing of the web because it does it job. The only problem with being so succesful that it is ubiquitous is that we no longer question it. And you should question everything.

As always, I am happy to read your takes on this matter, do you count bytes?, do you look at your google analytics to profile your users and their devices?