4 ms·

I can't help but feel web dev is reinventing the wheel when it comes to UI. It's basically game, there is a game loop, and all the actors/components may need up

by proc0 3y ago

I can't help but feel web dev is reinventing the wheel when it comes to UI. It's basically game, there is a game loop, and all the actors/components may need updating on every frame. I'm not saying websites should be done in Unreal (although it's possible but probably overkill), but the patterns and abstractions in single page interactive applications has a lot to learn from patterns in game engines.

ath92 3y ago
That “game loop” exists in the browser too. It’s just the main event loop, and it’s been there since the inception of JavaScript. Not saying everything that web developers aren’t reinventing the wheel, but I think the reason for it isn’t a lack of tools, it’s a combination of poor ergonomics of the existing tools and (perhaps more importantly) people not understanding those tools and building frameworks for things that are included by default.
- proc0 3y ago
  That's mainly my point. The browser is the game engine, the web app is a game running it, but the way UI interactivity, components, etc, are abstracted in such a way that the tools end up creating a lot of problems instead of solving them. It's hard to summarize in short form but I think tools would be much better if the underlying abstraction was better. HTML and CSS is a crude way of specifying elements rendering in a viewport, and its main usefulness is really in the past when computers were much less powerful.
kaba0 3y ago
That’s hardly the whole picture. There are endless possibilities within that - e.g. the design of a text editor will look nothing like that of an AAA game’s ECS.
- proc0 3y ago
  Text editor is probably not the best example. I'm thinking of the typical web app with "data lifecycle" as the article calls it, where there is rich interactivity and content is updated frequently based on interactions. In those cases you have components listening on local and global scope, updating of state, and updating of the rendering frame (handled by the browser).
slmjkdbtl 3y ago
You don't have access to the low level render loop, you have to deal with the already high level DOM api.
- proc0 3y ago
  There are at least animation libs with methods to access the render loop, and then there is canvas api and maybe wasm.js? Not sure that is necessary for just exposing better abstractions to use directly instead of simplified languages with limited control like CSS.

by proc0 3y ago

ath92 3y ago

That “game loop” exists in the browser too. It’s just the main event loop, and it’s been there since the inception of JavaScript. Not saying everything that web developers aren’t reinventing the wheel, but I think the reason for it isn’t a lack of tools, it’s a combination of poor ergonomics of the existing tools and (perhaps more importantly) people not understanding those tools and building frameworks for things that are included by default.

proc0 3y ago
That's mainly my point. The browser is the game engine, the web app is a game running it, but the way UI interactivity, components, etc, are abstracted in such a way that the tools end up creating a lot of problems instead of solving them. It's hard to summarize in short form but I think tools would be much better if the underlying abstraction was better. HTML and CSS is a crude way of specifying elements rendering in a viewport, and its main usefulness is really in the past when computers were much less powerful.

kaba0 3y ago

That’s hardly the whole picture. There are endless possibilities within that - e.g. the design of a text editor will look nothing like that of an AAA game’s ECS.

proc0 3y ago
Text editor is probably not the best example. I'm thinking of the typical web app with "data lifecycle" as the article calls it, where there is rich interactivity and content is updated frequently based on interactions. In those cases you have components listening on local and global scope, updating of state, and updating of the rendering frame (handled by the browser).

slmjkdbtl 3y ago

You don't have access to the low level render loop, you have to deal with the already high level DOM api.

proc0 3y ago
There are at least animation libs with methods to access the render loop, and then there is canvas api and maybe wasm.js? Not sure that is necessary for just exposing better abstractions to use directly instead of simplified languages with limited control like CSS.