[resonious]

React is crazy high in abstraction from what's actually happening. Your data goes through many "translation" steps before actually being rendered to the screen.

1. You have your signals and stuff - the actual data you want rendered.

2. React creates a virtual DOM tree thing out of your markup.

3. That virtual DOM gets turned into real DOM.

4. React gives the real DOM to the browser, who probably has to shift a lot of internal data around to accommodate changes.

5. The browser loops through its DOM and draws it on the screen (somehow - another black box).

This is a crazy amount of internal bookkeeping. Compare this with something like Dear ImGui (https://github.com/ocornut/imgui) where it's more like:

1. You have raw data in memory (just ints and char arrays).

2. You loop over your data, generating vertices for the GPU.

3. You give those vertices to the GPU to render a frame.

IMO this is way easier to reason about. It may seem "inefficient" as you're building up the entire screen from scratch for each frame. But if your content is static, who cares? You can draw one frame and leave it there for as long as you need. If your content is animated, you're probably already redrawing each frame from scratch anyway. At least you know that it's happening now that you've removed the endless layers of black box tree structures.

[jakelazaroff]

Consider that those layers of abstraction exist for a reason? Let’s say you can’t see very well. This is what I hear when I enable VoiceOver on macOS and open Discord (either the web app or the desktop app):

1. “Discord, friends - Discord window, direct messages, selected cell”

2. “You are currently on a cell inside of a table. To navigate the cells within a table, press…”

3. (when navigating with the keyboard) “1 mention, $SERVER_NAME, cell” “$SERVER_NAME, cell” etc

And here’s when I do the same with a random Dear ImGui app I have installed:

1. “$APP_NAME, $APP_NAME window, $APP_NAME window”

2. “You are currently in a window”

3. (when navigating with the keyboard) [silence; no additional instructions]

So that Dear ImGui app is entirely unusable for anyone who needs a screen reader. This is something every React app — really every web app, period — gets basically for free.

And it’s not just screen readers, right? It’s different viewport sizes and alternate character sets and right-to-left text and user-defined fonts and searching through text on a page and the zillion-and-one other things that you either take for granted or don’t need at all but are crucial for millions of people.

Yes, if you could make a good UI by just filling a frame buffer with pixels, web browsers and React would all be hideously over-engineered. But we don’t live in that world.

[resonious]

This is a good criticism of ImGui, but feels like a false dichotomy. I don't think it's the many layers of DOMs and tree diffing that makes screen readers work well on browsers. Conversely, there's nothing about the ImGui abstraction that makes screen reader support impossible. ImGui already sees all of your text and buttons, so no reason why it couldn't send those to a screen reader as well as the screen.

All in all, I don't think "there is a reason things are the way they are" quite means "the way things are is actually the best they possibly could be".

[jakelazaroff]

Sure, I don’t disagree. Browsers and frameworks are extremely heavy. I do think there’s something to be said for having these affordances on by default. Screen reader support in Dear ImGui isn’t impossible, but that’s a super low bar that puts the onus on developers. Browsers do it out of the box! Our tools should lead us into the “pit of success”, where it’s easy to do the right thing and hard to do the wrong thing.

I don’t want to get too hung up on Dear ImGui. The official repo says that it’s meant as a developer tool rather than for building end-user UIs, so it’s not a fair comparison. My point is simply that all these things require layers of abstraction. Maybe the way things are isn’t the best way, but even the best-case scenario will be significantly more complex than what you described once you start adding in the things I mentioned.