jQuery vs Vanilla JS

[wojtekmaj]

Looking on the code I can see a mix of vanilla JS and jQuery (e.g. element.classList.toggle('className') vs ${element).toggleClass('className')). I guess this inconsistency is not something we'd like to have, so I'd like to know which way would you guys like to go?

[jewel-andraia]

My vote is on vanilla JS.. although I am partial to jQuery when handling large sets of elements.

[erikdesjardins]

I would also like to eventually get rid of jQuery, but there are a few things:

• the native replacements like Element.closest(), Element.matches() are not supported by Safari or Edge, so we somewhat need jQuery (unless there's a good polyfill?)
• we use a few ancient jQuery plugins that would need to be replaced
• if you have a bunch of operations that can each return null, IMO it's a bit nicer to chain jQuery than have a if for each one or a bunch of &&
• for creating single elements like $('<div>', { id: 'foo', class: 'bar' }) IMO it's a bit nicer to use jQuery

But for new code definitely use vanilla JS, unless you're creating elements then use whatever you think is cleaner.

[wojtekmaj]

Hmmm... Not that I'm all against jQuery, I agree it could be useful in lots of places... In others though, it's needless. For the sake of this reply let's assume we'd like to get rid of jQuery...

• ad 1. Element.closest don't have nice polyfill, but it would be super easy to write with good Element.matches polyfill, which, thankfully, is there waiting on MDN.
• ad 2. That's a fair point. Although we could make our code jQuery-independent and then just go deeper in second stage and get rid of plugins that rely on jQuery.
• ad 3. I'm usually operating on array of elements and using .filter, .forEach etc in chains, works alright if the array is empty, so the issue you're talking about probably could be avoided.
• ad 4. Easy to replace, but that makes me wonder, shouldn't we more rely on .moustache templates instead? ;)

[erikdesjardins]

That all makes sense.