Insights

Immediate Mode User Interfaces with ReactJS

2 min read Joe Hanson on Oct 22, 2014
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

In his talk, Pete Hunt gives an overview of the library, and walks through ReactJS in action (talk includes stick figures, emotion, and ice cream).

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.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff