29 July 2020

What is React?

A Concise Explanation for Everyone (Not Just Engineers)

I’ve spent a good chunk of time over the past year adding React to my company’s Rails project and using it to roll out new features. Explaining to the rest of the team why this work is a benefit to the business (and ultimately to our users) has proved to be a deceptively challenging bit of communication.

When engineers talk to other departments, we sometimes fall into a cycle of trying to explain incomprehensible jargon with more incomprehensible jargon which, in turn, requires further explanation.

This is in part because it’s difficult to talk about what a piece of technology is. Among other engineers, we’re used to glossing over the details of particular technologies by slapping arbitrary labels on things — e.g. “Capybara”, “Yarn”, or “React.” This naming system obviously breaks down when communicating with non-engineers, who haven’t spent their professional lives becoming familiar with these arbitrary labels and the technical details they encapsulate.

The challenge becomes describing what a piece of technology does from the perspective of software users, rather than what it is. As a sort of case study in this type of explanation, I’m going to try to explain what React does and how using it benefits our engineers and end users alike.

How Static Web Pages Work

Before we can dig into what React does, I first need to explain how static web pages work.

For the purposes of this explanation, it’s useful to think about web interactions as being composed of two timelines. The UI timeline is what the user sees, and the network timeline is how the browser communicates with the server (sending and receiving information over the internet).

On a static web page, these two timelines are perfectly in sync, meaning that when the user takes an action (e.g. clicks a link) the UI timeline pauses and waits for the communication with the server on the network timeline to finish before updating what the user sees.

In certain cases (such as when you have a slow network connection, or the user needs to do a lot of rapid clicking around), this delay can make for a sluggish user experience.

How Dynamic Web Pages Work

By contrast, on dynamic web pages, the UI timeline and the network timeline can diverge, meaning that as a user, you don’t need to wait for communication with the server to finish before receiving feedback on the UI.

For example, if the user clicks a link to download a large report, the network timeline requests the report from the server. Without waiting for the long network request to finish, the UI timeline can immediately update to show a loading screen. Later, when the network request finishes, the UI timeline can update again, displaying the report.

Javascript

Out of the box, browsers are only set up to request and display static web pages. Luckily, browsers also ship with a baked-in programming language called Javascript that allows programmers to build custom dynamic behavior.

Javascript programs sit between the network timeline and the UI timeline, coordinating what the user sees on the screen with simultaneous network communication happening in the background.

Writing and maintaining Javascript programs that perform this type of coordination is tricky – it opens engineers up to a whole class of programming challenges and bugs that don’t exist in static/synchronous web interfaces. For example, if there’s a problem in the network timeline, you don’t want your UI timeline to get stuck on a never-ending loading screen.

What React Does for Programmers

React is a framework written in Javascript that provides programmers with a pattern to use to solve this common class of programming problems related to building dynamic web pages. It’s helpful to think about the distinction between Javascript and React as analogous to the difference between a bin of random Lego pieces, and a specific Lego set.

Let’s say you’re trying to build a castle out of Legos. Javascript is like the bin of random pieces – you’re free to build whatever kind of castle you want, but you’ll also need to solve a bunch of castle-related design problems for yourself. (For example: How does the drawbridge mechanism work? What pieces will you use as door hinges?, etc.) React, on the other hand, is more like the single-purpose castle set – it encourages you to build the castle in a very specific way, and solves a bunch of castle-related building problems for you.

React is a set of Javascript pieces that makes it easy to build dynamic web pages. It allows engineers to write complex UIs that provide instant (asynchronous) user feedback without getting totally mired in complexity and strange bugs that arise when the UI timeline doesn’t wait for the network timeline and vice versa. It solves common problems in a standard way so that engineers don’t have to re-implement custom solutions to the same general problems over and over again.

What React Does for Users

Having the ability to ship React code alongside our Rails project ultimately means we can be more ambitious with the interactive web components we build for our users. It lets us bring the zippy, animated feel of a native app to parts of the website, and to do it faster, and with fewer bugs.