Immediate Mode User Interfaces with ReactJS

Modifying and querying DOM is a major challenge for mobile app developers, especially when it comes to performance. ReactJS is a JavaScript library for creating user interfaces. It’s often thought of as the V in MVC. ReactJS was built to solve the challenge of building large applications with data that changes overtime.

Pete Hunt, formerly of Facebook and Instagram, dropped by the PubNub office for the SF JavaScript Meetup to discuss “Immediate Mode UIs with ReactJS.” In his talk, Pete gives an overview of the library, and walks through ReactJS in action (talk includes stick figures, emotion, and ice cream).

Immediate Mode User Interfaces with ReactJS from PubNub on Vimeo.

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.’

Think of retained mode like the DOM. You can manipulate it, say, draw on it. But to change it, you need to erase what was there originally, then make the changes. Every step you of changing the state in retained mode is mutated. As a result, you have to think of every single transition between every state. And this is the way we’ve built JavaScript applications for a really long time.

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.