React JS for Design Prototyping

There are many tools available for designers to prototype interfaces and user experiences. Here at Geckoboard we’ve tried just about all of them, and there’s a handful we use regularly.

But Geckoboard’s core product experience is a complex, data-intensive web app, rather than a website or consumer mobile app. For example, we have interfaces to build data visualizations that need to handle intricate configurations and varied datasets, as well as provide a live preview reflecting the current options. None of the usual design tools handle that too well.

So since last year, I’ve adopted React as a tool to build some of my design prototypes, and now I’ve started helping the other designers to use it too.

This post is an intro to why and how we use React for design at Geckoboard. I’m also working on a practical tutorial for designers who want to get started learning. So if you’re interested, follow me on Twitter or Geckoboard on Medium to learn when it’s published.

What is React?

React is a javascript library built by Facebook that powers the interfaces of many modern web-apps, including Geckoboard.

It’s not intended as a design tool, so the learning curve can be steep for a designer with only basic Javascript skills. But once you grasp the core concepts, it can be a great (and surprisingly fast) tool for prototyping interfaces for a platform like Geckoboard.

Why use React for design?

I initially looked into React so I could collaborate better with the engineers on my product team, Team Taco 🌮. I was unfamiliar with React and wanted to understand how it fits together, and learn any key principles I should keep in mind when designing.

I started by working through a few tutorials, and now React is one of my go-to prototyping tool. It works in a way that really suit some of the more challenging aspects of designing Geckoboard:

1. It’s componentized
   We try to design with reusable components, and React uses the concept of components at its core. For a single-page web app, components make more sense than pages.
2. It’s stateful
   With React, an interface’s “state” is described and updated, and can be passed to any component to be used. For example, this is very helpful for building config forms with live previews — the form can update the interface’s state, which is then passed instantly to the preview. Much more elegant than toggling classes with jQuery.
3. It handles data
   Because it’s Javascript, it’s easy to test the same visualisation or interface with different data or modify the data within the prototype.

When designing our new table visualization, a React Prototype helped test different configurations with a realistic (but obviously made-up) dataset. It’s not pretty, but it’s better than mocking-up a bunch of test-cases in Sketch.

Of course, React isn’t always a great choice of tool, and for some designers it won’t ever be especially useful. It’s overkill for simple interfaces and experiences — page-flow tools like Marvel win out here easily. Transitions and animation can also be tricky to work with. For prototyping highly polished interactions, Framer is going to be much less of a headache.

Using React with ease

CRA just makes it work

React JS is known to require a fair bit of tooling, but Facebook’s Create React App (CRA) has been a game-changer for getting up and running quickly.

CRA handles the scary bits (Webpack 😱), and has some neat features like hot reloading and great error handling.

Sharing

CRA also makes it easy to deploy your React app to Github Pages, which I use to share and the prototypes I build. Makes user testing easy 🙂.

An example React Prototype created at Geckoboard. You can read more about this project on my website.

Styling

I’ve put together a version of Tachyons with Geckoboard’s own color and shadow options. It’s easy to include with React, and it’s just CSS so it also can be used in any code-based prototype. Tachyons is an example of a new approach to CSS, where elements are styled by building up single-use functional classes, for example w-80 white bg-dark-gray pa4 br1. Once you’ve used it a few times you can pretty much design interfaces by writing markup, and you rarely need to write additional CSS.

React also makes it easy to mix stylesheets with inline styles, and even calculate styling with Javascript, which I’ve used for several projects that involve generating and applying new styles on-the-fly.

Anice.red — a side-project of mine. Color palettes are generated dynamically in React.

Getting Started

If you’re a designer who’s dabbled in Javascript before, I’d definitely recommend trying React.

I would like to thank Shu Uesugi for his excellent tutorial React.js Introduction For People Who Know Just Enough jQuery To Get By, which was the best thing I read when starting out. Unfortunately the post isn’t currently usable because the code snippets are broken.

There are other great resources online pitched at a range of different levels and uses, but I’m currently working on a practical tutorial for getting started aimed at folks with some basic Javascript knowledge who want to try React for design prototyping.

If you’re interested in the finished tutorial, follow me on Twitter or Geckoboard: Under the Hood on Medium to learn when it launches.