React for designers
There is no doubt that React has become the developers first-choice for building rich web applications. Maybe is time for designers to climb aboard?
I have spent the last 10 years designing websites. Coming from a graphic design background my early works was often Photoshop sketches. Like a lot of us, responsive design made me do more in HTML and CSS and it was wonderful. Being forced to think in systems and code made me a much better designer. Building with the real building blocks of the web was fantastic.
But the need for prototyping richer interactions came rather quickly. Prototyping in code and not being able to do animations, transitions, step-by-step forms, callouts and modals just felt like an halfway run.
The need for prototyping interactions
I spent a lot of time hacking in JavaScript. Copying others code took me halfway there. but it was not very satisfying actually not understanding what was going on. Making the fine-tuned interactions I wanted was nearly impossible and I decided to level-up. Angular (1) seemed like the perfect choice. A lot did happen i the html which i already knew, and it felt like I got superpowers. It was nice, for a while...
Taking “shortcuts” is quite easy in Angular. Using predefined directives and the go to Stack Overflow for the complicated stuff. But suddenly I realized that I actually did not knew anymore JavaScript than before. I do not blame this on Angular, it was totally my own fault. But my mission on leveling up on JavaScript had failed. So, I decided to level up again, for real.
All my developers friends and colleagues pointed at React and ES6. And Oh Yes! the road have been painful. It took me around 6 months, a lot of googling and reading, late nights feeling dumb and a not a very happy wife. But was it worth it? Definitely. Learning new things is by nature painful and time consuming, but at the same time the most satisfying thing a human being can do. And luckily, I am still married.
Why React is great for designers
Most things I have read about the benefits of React is its performance and developer friendliness. Since I am not a developer, I belive the other smart people on this. But on thing about React is a bit understated, even though the websites tagline says it clearly — A JavaScript library for building user interfaces. React is a great tool for building and designing user interfaces.
When using React I get the same feeling as when i started to use SASS. Even though the complexity had increased, making color systems, typography hierarchies and spacing rules was a lot easier than before. React give me the same, but this time for the whole user interface.
We’re not designing pages, we’re designing systems of components.
— Stephen Hay
I love the thoughts behind Atomic design and the thinking about reusable design patterns. Everything is components, and a component can consist of other components making a design pattern. And React is components. Interactive components combining both presentation and interaction. In React it is not just easy to think in reusable components, you are forced to. Because this is is the core concept of React. A concept that could not fit us designers any better.
Work together on the real thing
Finding good ways for designers and developers to working together in a fun and creative way can be challenging. I am a strong believer in that working together in a cross-functional team with the real product is the best solution. To do this, is may time for our designer to pull up ours sleeves and dive into a real application. Even thought it may sounds terrifying, knowing a bit of React can actually make it happen.
Because, while learning React and JavaScript can be quite hard, contributing into a React project is quite easy for designers knowing HTML. When a developer takes care of all the scaffolding (yes, it is daunting…) the components itself are quite easy. Specially the stateless ones, which there is most of in a React application:
import React from 'react';const Button = (props) => { // Do JavaScript stuff here if you want to. return (
<button className="button">
<span className="button-icon">⭐</span>
<span className="button-text">{props.text}</span>
</button>
)
}export default Button;
As you can see, everything that goes into the return is basically just like HTML. But it is JavaScript, that is why the JSX syntax is used. The only practically difference between HTML and JSX is that you need to write className instead of class (and a few other properties), but that is mostly it. Then you can flavor it with JavaScript if you want to or leave it to the developers. The cool thing is that you are now working on the real thing and building components together.
Summary
To summarize, I do not mean that every designer should learn React, not even code. But if you are already is designing in code and know a bit of JavaScript, React is definitely worth checking out. Even tough it seems a bit overwhelming at first, it is actually a quite small library. It will not let you take any shortcuts, which means that you have to learn to write your own JavaScript. But in return you get a framework specially made for building user interfaces. It will force you to build reusable components and design patterns in a structured and manageable way. It could even make you a better designer.
