Achieve design consistency through code
or: a designer's perspective on ReactJs
In the last few weeks a major topic amongst all my friends in tech was ReactJs, some people saying how good it is, some people saying Angular is better, although they are completely different things. After a few discussions with my friend and colleague Weslley Araujo I decided to give ReactJs a try.
That is the moment where I stop and think:
I'm a designer, why should I spend time learning that?
React like many other frameworks/libraries has it's core on componentization and for me that was the selling point.
So, what now?
$ npm install -g create-react-app
And you are good to go.
But, as weird as it might seem, this article it's not about ReactJs, it's about design consistency and right now, ReactJs is my weapon of choice.
Don't repeat yourself
DRY it's a well known concept in software development, it was formulated by Andy Hunt and Dave Thomas and featured in the book The Pragmatic Programmer (which I never read but found out about while writing this, so I promise I'll read it soon), and I quote:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system
Although that was quoted from a book about software development it could easily be replicated in any design book.
Every modern design tool has some kind of functionality related to components, like Symbols in sketch which allow you to create a interface component that can be reused throughout the entire design comp and if you need to update a given symbol you do it once and that change is applied to the entire project.
And that leads us, inadvertently, to a design styleguide or UI kit, like this simple one:
That's when we start talking a about consistency, and we start to create a design system, a design language.
"We’re not designing pages, we’re designing systems of components" — Stephen Hay
But it's all fun and games until you have to implement that, and we often find ourselves copying and pasting bits and pieces of code in our application
And that's where ReactJs can help you, because you can easily create components that accepts several parameters, making it very malleable and yet consistent.
Let's create a button component
In order to make this simple here is a gist with some comments explaining each decision I made:
As you can see in the beginning I'm importing the css from a separate file, and in that file I create the classes that will define the states of the button:
Now that I have the base for the button and all the states I can simply use it in my application by just adding this:
This render the button with a red background defined in the warning class.
Separation of concerns
In computer science, separation of concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. — Wikipedia
That links back to the way I separated the files in my example, keeping the file that constructs the button separated from the styles.
Because the create-react-app package creates it like that, so I just followed the way it was presented to me, but you can do it in several different ways.
This was just a simple example of how you can use ReactJs to improve the design consistency throughout your application by using components and defining parameters.
Don't get scared about it, just go and give it a try, it is way more simple then you think.
I would like to thank my dear friend Weslley Araujo for helping me out with this article and for being the one who actually taught me how to use React, and I hope you are as excited as me and Weslley.
Riot lets you build user interfaces with custom tags using simple and enjoyable syntax. It uses a virtual DOM similar…riotjs.com
Facebook's ReactJS is all the rage for web designers. Here are five reasons why you might want to learn more about this…www.godaddy.com