undefined | Better HN

0 pointsjamiesonbecker5y ago0 comments

Somewhat true, but this was also old jQuery :)

Even the old jQuery seems easier to read than the modern ES6 equivalent (IMO).

jQuery:

    $(".classname").addClass("darktheme")

ES6:

    document.querySelector(".classname").classList.add("darktheme")

0 comments

ryanbrunner5y ago

Maybe a nit, but these aren't equivalent. The jQuery version will apply it to all elements that match your selector, where the ES6 version will only apply to the first matching element.

Equivalent code in ES6 would be (maybe there's a terser way but this is what I'd do at first glance):

    [...document.querySelectorAll('.className')].forEach(el => el.classList.add('darktheme'));

Not a whole lot extra in terms of actual code, but I'd argue it's not super intuitive (having to cast a NodeList to an array is a pretty big beginner footgun), and as you get into more complex scenarios, the jQuery architectural pattern of operating against collections of nodes really shines.

ratww5y ago

You can use forEach without the splat:

    document.querySelectorAll(".className").forEach(el => el.classList.add('newClass'));

jamiesonbeckerOP5y ago

Still doesn't seem like much of a win compared to the jQuery :)

    $(".classname").addClass("darktheme")

peanut_worm5y ago

NodeLists should have a forEach method as far as I know

arp2425y ago

There are quite a few more examples of this:

    $('.class').remove()
    $('.class').after(...)

vs:

    var e = document.querySelector('.class')
    e.parentNode.removeChild(e)

    document.querySelector('.class').insertAdjacentElement('afterend', ...)

realityking5y ago

This is good example of how browser APIs have gotten better:

// Edge 12 document.querySelector('.class').remove();

// Edge 17 document.querySelector('.class').after(...);

Where jQuery shines - but also hides a lot of complexity- is when operating on an array of elements, e.g. if you want to remove all elements with a certain class.

jamiesonbeckerOP5y ago

This kind of code grows explosively in a moderately-sized project, and the sheer volume and verbosity makes it hard to debug. Not to mention requiring more tylenol ;)

jarek-foksa5y ago

The modern DOM equivalent would look almost the same as the jQuery version:

  document.querySelector(".class").remove();
  document.querySelector(".class").after(...);

mejutoco5y ago

Agree. Even before getting into things like: $(".classname").closest(".container").addClass("active”);

I do not get the hate over jquery, specially since frameworks like angular used (use?) to include a light version of it (sizzle or similar?) and methods like $httpParamSerializerJQLike, which does not scream of elegance.

I still remember when prototype.js was the default in rails, and jquery was so less overengineered and it just worked. It felt like magic.

65105y ago

The opinions mostly depend on what people know. The dvorak keyboard might be better?

asiando5y ago

Yes but the former will silently fail on you. Good luck finding that!

mejutoco5y ago

This is probably a feature. The non-jquery version will need a check for the elements existance to not blow up, which could the same be added to the jquery version for error reporting.

Plus, in this case, you will find out by seeing the dark theme is not active :p

j / k navigate · click thread line to collapse

0 comments

ryanbrunner5y ago

Maybe a nit, but these aren't equivalent. The jQuery version will apply it to all elements that match your selector, where the ES6 version will only apply to the first matching element.

Equivalent code in ES6 would be (maybe there's a terser way but this is what I'd do at first glance):

    [...document.querySelectorAll('.className')].forEach(el => el.classList.add('darktheme'));

ratww5y ago

You can use forEach without the splat:

    document.querySelectorAll(".className").forEach(el => el.classList.add('newClass'));

jamiesonbeckerOP5y ago

Still doesn't seem like much of a win compared to the jQuery :)

    $(".classname").addClass("darktheme")

peanut_worm5y ago

NodeLists should have a forEach method as far as I know

arp2425y ago

There are quite a few more examples of this:

    $('.class').remove()
    $('.class').after(...)

vs:

    var e = document.querySelector('.class')
    e.parentNode.removeChild(e)

    document.querySelector('.class').insertAdjacentElement('afterend', ...)

realityking5y ago

This is good example of how browser APIs have gotten better:

// Edge 12 document.querySelector('.class').remove();

// Edge 17 document.querySelector('.class').after(...);

Where jQuery shines - but also hides a lot of complexity- is when operating on an array of elements, e.g. if you want to remove all elements with a certain class.

jamiesonbeckerOP5y ago

This kind of code grows explosively in a moderately-sized project, and the sheer volume and verbosity makes it hard to debug. Not to mention requiring more tylenol ;)

jarek-foksa5y ago

The modern DOM equivalent would look almost the same as the jQuery version:

  document.querySelector(".class").remove();
  document.querySelector(".class").after(...);

mejutoco5y ago

Agree. Even before getting into things like: $(".classname").closest(".container").addClass("active”);

I still remember when prototype.js was the default in rails, and jquery was so less overengineered and it just worked. It felt like magic.

65105y ago

The opinions mostly depend on what people know. The dvorak keyboard might be better?

asiando5y ago

Yes but the former will silently fail on you. Good luck finding that!

mejutoco5y ago

This is probably a feature. The non-jquery version will need a check for the elements existance to not blow up, which could the same be added to the jquery version for error reporting.

Plus, in this case, you will find out by seeing the dark theme is not active :p

j / k navigate · click thread line to collapse