I hope you understand that a fair bit of my second post was tongue-in-cheek.
I appreciate the concrete examples, and yes, that makes perfect sense when you start getting into data-heavy frontend applications. I do remember jQuery being useful for AJAX and for DOM selection primarily, so I get it.
And of course I knew I was missing something, that's why I asked lol, the question was serious and I knew HN wouldn't let me down.
I'm still a bit mystified about the necessity of a shadow DOM, it just seems counterintuitive to me, but perhaps it's because I'm not familiar with browsers' DOM handling conventions. Perhaps me gaining some insight there would make the purpose of a shadow DOM more clear.
Honestly, I really did figure that it had something to do with the event model (not the DOM or shadow DOM). Something about providing a more consistent apparatus for wiring and handling events.
I still think there's a lot of unnecessary spinning of the wheels on the front end, but that gets beat to death around here, so I'll let it be.
By shadow DOM do you mean the virtual DOM? The shadow DOM is also a thing, but it's largely unrelated to web frameworks.
The idea behind the virtual DOM is that it's usually easier to render everything in a functional sort of way. You treat rendering like a function that takes state as an argument, and returns your desired UI. Every time an event handler fires and changes some state somewhere, you rerun all the functions with the new state and that produces a (potentially different) UI.
For various reasons, it's not practical for these functions to actually return a new DOM every time the state changes, so instead they return the VDOM, which is a description of what the DOM should look like, and React diffs the real DOM against the VDOM and updates it if there are any changes. This way, if you've got an input that the user is typing in, it doesn't get replaced completely every time the component updates, but React might update properties on it as they change.
Originally the React team talked about how the VDOM made React faster, and this claim got stuck in everyone's heads, but it's not really true. The VDOM allows React to separate the rendering phase (i.e. when all the component render functions are called) and the DOM update phase, which can have some performance improvements against more naive approaches, but if you could optimally update the DOM directly whenever state changes, then this would still always be quicker. (And a lot of frameworks are moving towards this model, and away from the more React-like VDOM approach.) The main benefit of the VDOM is that it simplifies the programming model: it allows the "UI as a function of state" concept, and makes it easier to reason about what's happening while a render function is being executed.
A lot of more modern frameworks are moving away from VDOM-based approaches, although React is staying very much where it is. Like I said, there are faster approaches, but these arguably come with tradeoffs about complexity. Personally, I tend to avoid React because of the VDOM approach, in large part because it's a layer of abstraction that I don't really need.
I'm a BE dev that has do to some FE work now and again, but IIRC the shadow DOM thing is about performance: it is in theory more performant to modify the shadow tree and then send it to the browser for rendering in one go than to manipulate individual elements and have the updates render immediately.
Back in the day I had to use an escape hatch in Vue 2 (which does not have shadow DOM) to work with the DOM directly to render a fast changing component (a structured log browser window with live logs flowing in rapidly). No idea if React would have worked better though. :)
I appreciate the concrete examples, and yes, that makes perfect sense when you start getting into data-heavy frontend applications. I do remember jQuery being useful for AJAX and for DOM selection primarily, so I get it.
And of course I knew I was missing something, that's why I asked lol, the question was serious and I knew HN wouldn't let me down.
I'm still a bit mystified about the necessity of a shadow DOM, it just seems counterintuitive to me, but perhaps it's because I'm not familiar with browsers' DOM handling conventions. Perhaps me gaining some insight there would make the purpose of a shadow DOM more clear.
Honestly, I really did figure that it had something to do with the event model (not the DOM or shadow DOM). Something about providing a more consistent apparatus for wiring and handling events.
I still think there's a lot of unnecessary spinning of the wheels on the front end, but that gets beat to death around here, so I'll let it be.