Intive Blog

Simplifying the Design of a Visual System: Tools for Building a Components Library

“We all know that a developer isn’t a designer, but we nevertheless forget it along the process,” declared Pablo Hiyano, Javascript developer and good friend of the our house, in the latest React meetup held at our offices. Although the topic of the event was the React technology, we also wanted to discuss how to define a process with the right tools to design a visual system.

We’ll comment on Pablo’s ideas on how to build a library that’s friendly for the developer and, consequently, can make the design process easier.

But First, Rollup.js

Rollup is a module bundler for Javascript that bundles packages and libraries (but not web apps), useful for building a library. In order to do this, we need a Babel configuration file, because we’ll transpile ES6 and get a Rollup config file.

This extremely simple configuration allows us to get Rollup up and running and compiling our library, so that we can get what we need from it. How does the configuration file look like?

As we can see, there’s an input file from which to obtain the information, and this file will import everything we want our library to have.

In output, we have to state the name of our library, the file to which our library will be exported to and the format in which it will be compiled. Pablo chose EcmaScript 6  so as to be innovative, but feel free to work with what you’re most familiar with (self-invoking functions, commonJS, you name it). The aim is to instruct Rollup to take the code, process it and show it the way the developer wants to.

“Perhaps you want to build a library that works in Explorer. ES6 may not be necessary because it’s too new, so you can replace it with commonJS, which has a different information export pattern,” Pablo explained.

Then, in plugins, we tell it to use a Babel plugin and exclude the node_modules folder because it’s of no use. We could add a transpiling plugin if we needed one. There’s also an external configuration key, where we put “react”. “We do this to tell the library we’re building that it shouldn’t compile with React and, when it needs React, to use instead a library  from the project where it has been installed,” he added.

With this configuration we can easily build a Javascript library.

 A Bit of React

We’ll now share with you a step-by-step recipe —the reason for this meetup— where we’ll use the library we built.

Npm link

It isn’t used very often, but when you start using your own library, this is what you have to use.

“In the first library I built I didn’t use   and it took me more work, since every time I made a change in the code a new version was pushed to npm, to the new package. It would update, go to the other folder and install it again… until I found this.”

What’s so important about it? Npm installs packages, but where? So, we follow these steps.

  • Step 1

We go to our library’s folder and put “npm link”. That’s it. This will create a symbolic link to this folder in the node.js folder.

  • Step 2

We go to the application where we want to use this library and put “npm link intive-library”. We’re indicating the name of the library. This command will generate another symbolic link to the library in the node_modules folder, aiming at the symbolic link in the node.js folder:

This means that when the application in development wants to use “intive-library”, it will go to the symbolic link in the node.js folder and then to the folder where it’s working, which is very efficient every time the library is updated.

Once we finish, we can leave it like that and then install the package, which is already complete to be uploaded. You just have to unlink the package, and it gets installed directly. What npm does is to check how the packages’ source is configured.

Add Emotion.sh as Desired

Emotion.sh is a library for CSS-in-JS. It’s optional: we can use it if we want to style our components or not use it at all. You could also choose styled components or another library available to use and manage CSS-in-JS.

Summing Up

  • The advantage of building your own library is that it simplifies the process and helps to avoid code duplication in projects where you need to reuse many components, which are rather esthetic than functional in nature. If we’re working on a project whose components require a lot of work and have many responsibilities, perhaps you can’t have them in a library, or it isn’t necessary. This is a way to share code.
  • With regard to developers and designers, sometimes we tend to underestimate the person who doesn’t do our job and underrate what others do. We notice this with design: it’s very complex to think and devise a visual system that really makes

 

Ilein González

Ilein González has a degree in Social Communication, journalism mention, graduated from the Andrés Bello Catholic University. Since May 2018 she has been working as a Quality Analyst at intive, in one of the most challenging projects of the company. Ilein is also an enthusiast of innovation and processes.

Add comment