DEV Community 👩‍💻👨‍💻

Oinak
Oinak

Posted on

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:

and

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

When you were doing... Do this instead
$('.someclass') document.querySelectorAll('.someclass')
$('.someclass')[0] document.querySelector('.someclass')
$element.remove() element.remove()
$element.prepend(otherElement) element.prepend(otherElement)
$element.before(otherElement) element.before(otherElement)
element.addClass('some') element.classList.add('some')
$element.removeClass('some') element.classList.remove('some')
$element.toggleClass('some') element.classList.toggle('some')
const parent = $element.parent() const parent = element.parentNode
const clone = $element.clone() const clone = element.cloneNode(true)

Array manipulation

When you were doing... Do this instead
$.isArray(a) Array.isArray(a)
$.inArray(item, arr) arr.indexOf(item) > -1
$.each(arr, (i, v) => {}) arr.forEach((value, index) => {})
$.map(arr, (v, i) => {}) arr.map((value, index) => {})
$.grep(arr, (v, i) => {}) arr.filter((value, index) => {})

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

When you were doing... Do this instead
$el.on('click', e => { }) el.addEventListener('click', e => { })

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));
Enter fullscreen mode Exit fullscreen mode

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
  })
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (4)

Collapse
pavelloz profile image
Paweł Kowalski

I think you are barking at the wrong tree :)

I would say nobody who is interested in their craft, reading technical posts in 2019 that they need jquery. We know that we dont need it since youmightnotneedjquery.com/ came to life or earlier.

Collapse
oinak profile image
Oinak Author

Hi Pawel, thanks for your comment!

First: questioning jQuery is my clickbaitish way to bring people to share my learnings on ES6.

Second: I think a lot of people that might have started coding some time after you and me might benefit from the notions of the post. You might have been coding for 20+ years "in 2019" but Joe the unemployed coal miner or Jane the burnt-out attorney that wants to work on jeans both just finished their 6 week bootcamp, they see jQuery everywhere and don't know why, because they weren't even "here" in 2018 and don't have the context. I don't assume people share my learning path, or my context, so I share stuff that might sound "basic" to experienced developers such as yourself, and is easy to overlook for you, but might be valuable for newcomers or people coming from different contexts.

Collapse
pavelloz profile image
Paweł Kowalski

I will quote Morgan Freeman in this case, as an answer to point 2. :)

Best way to end racism?

Stop talking about it.

:)

Collapse
oinak profile image
Oinak Author

If any of you want to read about this js weight insights in the realm of frameworks, go read: dev.to/swiip/the-weight-of-js-1aad

🤔 Did you know?

 
🌚 Dark mode is available in Settings.