6 ms·

I think by now many HNers will have grasped the idea behind "The core premise for React is that UIs are simply a projection of data into a different form of da

by firasd 9y ago

I think by now many HNers will have grasped the idea behind "The core premise for React is that UIs are simply a projection of data into a different form of data", but here's a related good read from around the time this was written: Pure UI https://rauchg.com/2015/pure-ui https://rauchg.com/2015/pure-ui Also of interest, the classic 'Rethinking best practices' presentation: https://www.youtube.com/watch?v=x7cQ3mrcKaY https://www.youtube.com/watch?v=x7cQ3mrcKaY

seanmcdirmid 9y ago
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.
- davedx 9y ago
  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?
  - seanmcdirmid 9y ago
    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.
  - nervestaple 9y ago
    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 https://github.com/nervestaple/react-phaser-kit) I know there are similar parallel approaches like https://github.com/FormidableLabs/react-game-kit https://github.com/FormidableLabs/react-game-kit and https://github.com/michalochman/react-pixi-fiber 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...
    - deleted 9y ago
      [deleted]
  - swyx 9y ago
    So I've never done game dev - can anyone explain what immediate mode rendering is like to a React webdev?
    - untog 9y ago
      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.
      - seanmcdirmid 9y ago
        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.
        swyx 9y ago
        thanks, what is the benefit of no caching then? seems fairly wasteful if you have an engine capable of rendering at frame rate already.
        seanmcdirmid 9y ago
        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.

by firasd 9y ago

seanmcdirmid 9y ago

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.

davedx 9y ago
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?
- seanmcdirmid 9y ago
  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.
- nervestaple 9y ago
  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 https://github.com/nervestaple/react-phaser-kit) I know there are similar parallel approaches like https://github.com/FormidableLabs/react-game-kit https://github.com/FormidableLabs/react-game-kit and https://github.com/michalochman/react-pixi-fiber 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...
  - deleted 9y ago
    [deleted]
- swyx 9y ago
  So I've never done game dev - can anyone explain what immediate mode rendering is like to a React webdev?
  - untog 9y ago
    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.
    - seanmcdirmid 9y ago
      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.
      - swyx 9y ago
        thanks, what is the benefit of no caching then? seems fairly wasteful if you have an engine capable of rendering at frame rate already.
        seanmcdirmid 9y ago
        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.