On: Gov.uk drops jQuery from their front end

[dsego]

jQuery still offers a much nicer experience. The built-in dom apis are neither very elegant nor ergonomic.

    // jquery
    $(selector).on('click', fn)
     
    // vanilla js
    document.querySelectorAll(selector).forEach(el => 
      el.addEventListener('click', fn)
    )

[bennyp101 → dsego]

It takes 1min to write a wrapper around that, though.

Having said that, for the sake of 25kb - if you use more than a handful of features you might as well just include it.

[mkoryak → bennyp101]

That's the problem.

It takes only 1 minute to write a wrapper, so you will write one, and I'll write one, and your dog will write one.

[JJMcJ → mkoryak]

If that is literally the only wrapper you need, sure go ahead.

But most of the time, you find you need another wrapper, and then another, and the next thing you know you have most of jQuery, just not as uniform or as well tested.

I've seen this with database ORMs also.

[tiborsaas → mkoryak]

Then compare it with dog's and pick the simpler one :) I don't know what's wrong with a utils.js file that only has what you need in a way that fits your project exactly. Woof.

[mkoryak → tiborsaas]

your dog will not look for a simpler impl before making one.

your npm's dependencies authors cat will write a small wrapper and wont know about yours.

[DeathArrow → tiborsaas]

But writing that utils.js will end up rewriting jQuery.

[tiborsaas → DeathArrow]

I've seen this argument a lot, but based on my experience it will take ~5 small functions to get what I need and how I need.

It's even easier if you copy paste from here: https://anguscroll.com/just/

[Cthulhu_ → dsego]

Is it worth adding the library (download size + script parsing & execution) for that though?

At the very least there are some jQuery alternatives that are modular, smaller, and have less backwards compatibility like iirc zepto.

[dageshi → Cthulhu_]

Yup. Because the size of the library and the execution time just isn't that big of a deal, it's something people seem to obsess over but it doesn't really matter much.

[louissan → dsego]

or delegate...?

document.addEventListener('click', function(e){ var t = e.target;

  if(t.closest('.foo') && t.nodeName.toLowerCase() === 'button'){
     e.preventDefault();
     // do stuff here
  }
  else if(t.closest('.bar') && t.nodeName.toLowerCase() === 'a' && t.classList.contains('here')){
     e.preventDefault();
     // do smth else here
  }

}, false);

one listener to rule them all...?

elegant enough and once you get used to it...

.closest can be pollyfilled too..

[fleddr → dsego]

Fully agree, and your example is still relatively simple. Method chaining in jQuery allows for extremely expressive one-liners that would require a huge amount of boilerplate in vanilla JS.