Hacker Read

bastawhiz | karma 10010 | avg karma 3.84 · 2022-12-14 13:15:52

Anything involving multiple elements in a single operation. $('.foo').hide() requires something silly like

  Array.from(document.querySelectorAll('.foo')).forEach(el => el.style.display = 'none');

Being able to select something, then chain operations on those nodes is really where jQuery shines, IMO. All of the non-DOM stuff (e.g., AJAX) is fine with vanilla JS these days.

bufferoverflow | karma 5508 | avg karma 2.35 · 2022-12-14 13:27:26

You don't need Array.from this works fine:

    document.querySelectorAll('.age').forEach(el => el.style.display = 'none')

But I didn't have to do anything like that in years. With reactive frameworks you just bind visibility and styles to variables, refs or some central state.

Spivak | karma 16605 | avg karma 1.79 · 2022-12-14 14:10:39

I think that was to handle older browsers. https://caniuse.com/mdn-api_nodelist_foreach looks pretty good but it didn't used to.

tambourine_man | karma 37043 | avg karma 6.16 · 2022-12-14 19:13:25

> With reactive frameworks you just bind visibility and styles to variables, refs or some central state

I fail to see the superiority of that approach after more than a decade.

To me, the success of React and the likes has more to do with team dynamics, hiring, etc.

reply

bufferoverflow | karma 5508 | avg karma 2.35 · 2022-12-15 10:41:37

I easily see the superiority. The data controls the UI, instead of some random line of code that's very hard to find.

Essentially it's declarative programming, you declare your UI should look this way when the state is this, and that way when the state is that.

It's much easier to reason about than when you have a thousand random functions that can change the UI, often in ways that break each other.

reply

tambourine_man | karma 37043 | avg karma 6.16 · 2022-12-15 15:20:45

That’s what I meant by team dynamics.

I can separate concerns instead of multiple functions changing the same UI, but I can’t guarantee that everyone else will.

The conventions that React provides sidesteps the need for discipline and that I find useful.

Doesn’t mean that the approach in itself is better, IMO. and if you work alone, it’s clearly way too much trouble for little gain.

reply

pitaj | karma 4013 | avg karma 2.53 · 2022-12-14 13:29:31

FYI, the collection returned by `querySelectorAll` has a `forEach` method, so no need for the `Array.from`

Beltalowda | karma 5211 | avg karma 3.32 · 2022-12-14 18:01:01

Things like "I want the first/last element" is still a PITA as far as I know, so lots of people use Array.from() wrappers. For all cases I used it, the performance impact seems negligible.

I don't know why querySelectorAll() doesn't just return an array.

reply

bastawhiz | karma 10010 | avg karma 3.84 · 2022-12-14 21:05:35

Supporting legacy Edge requires the conversation from NodeList to Array, sadly.

Eduard | karma 2879 | avg karma 3.9 · 2022-12-14 23:53:43

Manipulating CSS properties via Javascript/jQuery often is a code smell for a cleaner alternative purely CSS-based solution:

    some-selector .foo {
      display: none;
    }