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.
What React Does for Programmers
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.