Immediate Mode User Interfaces with ReactJS
User Interfaces Are Like Stories
ReactJS renders User Interfaces in the browser is very similar to the way that complex games renders sprites and user interfaces to the screen. UIs are a lot like stories. You draw pictures as it progresses thorough time. In his talk, Pete goes through “story time” in two ways – ‘retained mode’ and ‘immediate mode.’
However, data changing over time is the root of all evil.
Next, we look at immediate mode. If we want to manipulate it, instead of deleting and adding parts, we blow the whole thing away. This is what separates immediate mode rendering from retained mode rendering. We’re immediately updating the state every frame. We describe the states of our applications, not the transitions between them.
So how do we make this fast, getting rid of the unnecessary work?
Enter: ReactJS, bringing this immediate mode paradigm to the retained mode DOM. The logic is expressed in terms of the state, rather than the transitions between the states. Treat your code as a black box. Whenever anything changes, ReactJS re-renders to a virtual DOM tree, diff previous render with current one, and ReactJS performs batched DOM manipulations.
Benefits of ReactJS
To put it simply, ReactJS presents a smaller number of states to think about, and makes it feasible and predictable.