Interface from Data: using React to sync updates and offline activity across devices
Rendering views as a function of state makes networked interfaces more intuitive.
View as a Function of State
“The core premise for React is that UIs are simply a projection of data into a different form of data.” (React — Basic Theoretical Concepts)
I was figuring out how to use React to show a hidden element in response to a click when I really understood: even toggling element visibility or disabling a button should be handled using data. Don’t manipulate the property of an element in the browser; use a variable to set the property in the first place, then update the variable when necessary. It’s a bit Zen.
It is easy to go deep into technical or philosophical aspects of React: the Virtual DOM, immutable data, immediate mode graphics, and the functional programming ecosystem. However, I am wary of fixating on specific approaches to writing programs: ultimately, the users of our products don’t care about coding methodologies. That said, if a tool is enjoyable for developers to use, and enables great user interfaces, both of which drive business goals, then adopting it makes sense across the board. React is not (yet!) a monolithic panacea, or consultant-driven industry trend. It’s just an elegant weapon, for a more declarative age.
React renders views as a function of state, and Redux maintains state as a function of actions on previous states. When they are used together in an app, UI updates are expressed with surprising clarity. To demonstrate this, I made a React Sync Demo that coordinates devices connected to the demo app. Actions like adding or deleting a comment, typing in the form fields, or clicking a link are mirrored across devices.
Astute readers may recognize this app as a modified version of the comment box from the React tutorial. Readers with the good taste to have read my articles will know I previously modified the comment box app for a Redux tutorial and then a Universal React tutorial. This time I didn’t write a tutorial, because I wanted this article to be more conceptual, and because the modifications I made to the app are specific to the demonstration instead of being generally instructive.
This isn’t a comprehensive solution for offline support, of course. But it’s a neat trick, especially useful for flaky mobile connections that fade in and out.
Syncing inputs and routes in the demo app is admittedly a gimmick, but clearly expressing UI updates, both within applications and across networks, is increasingly valuable as people use the same apps across multiple devices and environments. If your form inputs are an easily synced object, users can start filling out an order on their phone and complete it at a desktop.
New technologies like HTTP/2 and WebSockets are trending towards low-latency, real time, and push communication, while Service Workers are enabling web apps that support persistence and offline activity. As a greater number of applications transmit streams of data, a UI library based on data transformations can lead to more intuitive code on both the client and server. We have enough complexity to deal with in mediums, devices, and networks; let’s reduce complexity in developing user interfaces.
view = f(state)
A more declarative approach to building interfaces is the way forward.
- React — Basic Theoretical Concepts: “A description of the conceptual model of React without implementation burden.”
- Pure UI: “A lot has been written about the merits of React as a framework. Today I’m compelled to write about the benefits of a programming model it enables and its implications to the design and creation workflow."
- Removing User Interface Complexity, or Why React is Awesome: “I’m mostly concerned with the core problems of data binding and componentizing UIs. After much research and usage of the technologies mentioned above, I found React to provide the best solution.”
- Nothing new in React and Flux except one thing: “What is it that makes React so innovative and compelling?… The Virtual DOM allows us to convert a mutable retained mode graphics API to an immutable functional immediate mode API.”