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.
ReactJs is a Javascript library created by Facebook and Instagram in order to build interfaces through components and views. Another big selling point is the "Learn Once, Write Anywhere" approach so with React Native you can write native mobile apps the same way you create web apps with ReactJs.
So, what now?
Well, I got curious so I had to check it out and It clearly states "A Javascript library for building user interfaces" and as a Designer that totally got my attention.
Once you head to their website you might find it quite hard to get started, it was not a plug and play kinda of thing, which I would expect as a designer who just knows enough javascript to… to… well, to do almost nothing. But that's when I found out about this Create React App, where you can basically get the package from npm:
$ npm install -g create-react-appRun:
create-react-app hello-worldAnd you are good to go.
This basically removes the barrier for Designers that are not proficients with Javascript or setting up complex development environments (Like me).
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:
<button state="warning">Delete</button>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
Recently Mattias Petter Johansson from the amazing YouTube channel FunFunFunction talked about it:
He basically talks about having HTML, Javascript and CSS in silos within your application, although they fall in the same concern so they should not be separated like we do nowadays.
That links back to the way I separated the files in my example, keeping the file that constructs the button separated from the styles.
When React first appeared some years ago people freaked out because your Javascript, HTML and CSS were living in the same file, but if you stop and think about it for a second it makes some sense. So, why did I chose to go in that path?
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.
Further reading:
