Hacker News new | past | comments | ask | show | jobs | submit login

The problem with retained mode UIs is that they lose the ability to continuously translate data with functions. Immediate mode UIs don’t have that problem (since you are just drawing to the screen on each frame), but suffer from efficiency problems (not to mention you have to do your own layout). Databinding (e.g. as in WPF) allowed some of these transformation to occur declaratively, but were too inexpressive in general.

React is a nice new point in the space, and is much more pragmatic than FRP or Rx.




Yes, React is an interesting middle ground that hits a sweet spot for many classes of web apps. Try and make (real time) games with it and you soon realize that despite it being a good conceptual model, you really need to be in an immediate mode rendering mode.

Does anyone know of any immediate mode game engines using concepts from React?


I'd be curious to know too -- I've been working on a custom React renderer for the Phaser webgame engine after dealing with a lot of frustration around state management in Phaser. (https://github.com/nervestaple/react-phaser-kit) I know there are similar parallel approaches like https://github.com/FormidableLabs/react-game-kit and https://github.com/michalochman/react-pixi-fiber. You can sort of use them in immediate mode by calling setState inside the update loop, but the abstraction leaves a bit to be desired...


Immediate mode is really the sweet spot for games, I still do most of my experimental UIs using immediate mode on top of canvas for that reason. If you need to write something like a code editor, it is just much easier than fighting the DOM (you can easily do your own caching using images), though you have to roll a lot on your own.

The problem with gaming is that you usually don’t want to use the DOM, and React’s value add is mostly in its DOM handling.


So I've never done game dev - can anyone explain what immediate mode rendering is like to a React webdev?


In the simplest way possible, it would be like running

   this.element.innerHTML = "new value"
instead of

   this.setState({text: "new value"})
React's method of async state setting is really great when you have a bunch of components that know little to nothing about each other, because it'll automatically batch things up. But in some situations, and games are a perfect example, you need the value to change right now.


Actually, that looks like retained mode.

Immediate mode simply means you specify what to redraw on every frame, there is no caching unless you specify it. And you basically redraw whenever some state changes (in a game this is going to be at frame rate).

In React, when some state changes, you respecify the DOM for components whose state has changed, but asynchronously the library determines how to make the DOM update more efficient on the next frame redraw.


thanks, what is the benefit of no caching then? seems fairly wasteful if you have an engine capable of rendering at frame rate already.


Simplicity. Retained-mode means you modify the scene graph (aka DOM) using imperative statements, it is difficult to keep your UI in synch with your models. With immediate-mode, you simply create a function f(m) over your model m to render it on each frame rate (which also often involves imperative instructions affecting the frame buffer, but the buffer can be cleared on each frame so who cares).

Retained-mode caches by default (often in opaque ways), which was the whole point (only re-render parts of the scene that have changed). You can roll your own caching for immediate mode, usually via some kind of invalidation scheme (use image for a node if nothing changed for this component, otherwise call that node's re-render method). On the other side, projects like React takes the retained-mode DOM and make it look more like an immediate-mode abstraction without sacrificing so much performance.


thank you!




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: