intive Argentina Blog

Simplificando el diseño de un sistema visual. Herramientas para crear una librería de componentes

“Los desarrolladores no son diseñadores. Creo que esto lo tenemos muy claro, pero a veces se nos olvida e igual lo intentamos”. Así comenzaba su discurso Pablo Hiyano, desarrollador Javascript y amigo de la casa, en la última meetup de React que concretamos en nuestras oficinas. Aunque el tema protagonista del evento era React como tecnología, nos enfocamos también en cómo definir un proceso con las herramientas adecuadas para diseñar un sistema visual.

A continuación, explicamos entonces las ideas de Hiyano sobre cómo crear una librería para usarla a gusto y piacere del dev y, así simplificar el proceso de diseño.

Primero, RollUp.js

Rollup es un module bundle de Javascript que está enfocado al buildeo de paquetes y librerías (y no aplicaciones web) y que nos va a ayudar a construir nuestra librería.

Para ello es necesario un archivo de configuración de babel, puesto que vamos a transpilar ES6 y después vamos a tener un archivo de rollup de configuración.

Así, con una configuración absolutamente simple podemos tener rollup funcionando y compilando nuestra librería para que nos devuelva lo que precisamos. ¿Cómo es el archivo de configuración?

Podemos ver que la configuración tiene un archivo input que es de donde va a sacar la información, ese archivo va a hacer el import de todo lo que queremos tener en nuestra librería.

Después, en el punto de salida, tenemos que decir cuál es el nombre de nuestra librería, en qué archivo queremos que compile y en qué formato. Particularmente, en esta presentación, Hiyano eligió EcmaScript 6 para  mantenerse a la vanguardia, pero cada quién es libre de trabajar con lo que se sienta más cómodo (como funciones autoinvocadas, commonJS, etc). El propósito es que el programador tenga su código, Rollup lo tome y luego lo digiera y muestre como el desarrollador desea.

“De repente, quieren hacer una librería que funcione en Explorer. Entonces, puede no ser necesario ES6 porque es mucho más moderno; en ese caso, puede sustituirse por commonJS que tiene otro patrón de exportar la información.”, aclaró el experto.

Luego, abajo, (en los plugins) estamos definiendo que use un plugin que es babel y que excluya la carpeta de node_modules, porque no sirve para nada. Agregamos un plugin para transpilar, en caso de que lo precisemos. También tiene una key de configuración que se llama external y dice react.

“Eso es para decirle a la librería que estamos creando que no se compile con React y, que cuando precise usar React, use la librería  del proyecto en donde lo tenemos instalada” agregó.

Simplemente con esta configuración ya es posible construir una librería Javascript.

Un poco de React

A continuación, les dejamos la parte de la receta por la que originalmente decidimos hacer esta meetup, en la que vamos a usar la librería que construimos.

npm link

Es muy raro usarlo, pero cuando se comienza a emplear una librería propia, es lo que se tiene que usar.

“Para la primera librería que desarrollé no usé   y me llevaba más trabajo, porque cada vez que hacia un cambio en el código pusheaba una nueva versión a npm, al nuevo paquete. Se actualizaba, iba a la otra carpeta, me lo volvía a instalar y así estaba un tiempo hasta que encontré esto”.

¿Qué tiene esto de importante? Pues npm instala paquetes, el tema es dónde. Entonces seguimos los siguientes pasos

  • Paso 1

Nos paramos en la carpeta de nuestra librería y le decimos

npm link

Nada más. Lo que va a hacer es crear en una carpeta de Node.js un enlace simbólico a esta carpeta.

  • Paso 2

Vamos a la aplicación donde queremos usar esa librería y le decimos

npm link intive-library

Así le pasamos el nombre de la librería.

¿Qué va a hacer este comando? Genera otro link simbólico que tenga esta librería en nuestra carpeta de node_modules y que apunte al link simbólico que tiene Node.js

Todo eso significa que cuando la aplicación que se está desarrollando quiere utilizar intive-library va a ir a ese enlace simbólico que está en la carpeta de Node.js y, de ahí va a ir luego a la carpeta sobre la que se está trabajando, lo que resulta eficiente cada vez que se actualiza la librería.

Una vez que terminamos, podemos dejarlo y después instalar el paquete que ya realmente subimos terminado. Simplemente se le hace un unlink al paquete y después se instala directo. Veremos que npm lo que hace es fijarse cómo está seteado el source de los paquetes.

El ingrediente a gusto, Emotion.sh

emotion.sh es una librería para trabajar CSS-in-JS. Es a gusto, ya que podemos usarla para darle estilos a nuestros componentes, o usar otra, o ninguna. Algún otro desarrollador podría elegir, por ejemplo, styled-components o alguna de las otras librerías disponibles para usar y manejar CSS-in-JS.

Para cerrar:

  • La ventaja de crear tu propia librería es que, en un proyecto donde tienes que reutilizar muchos componentes, que son más estéticos que funcionales, te simplifica el proceso y te ahorra duplicar código. Si estamos en un proyecto cuyos componentes requieren mucho trabajo, y tienen muchas responsabilidades, tal vez no puedas tenerlos en una librería, o no haga falta. Es una forma de compartir el código.
  • Respecto a los devs y los diseñadores, creo que cometemos siempre el error de subestimar al que no hace nuestra tarea, y simplificamos lo que otros hacen. En este caso lo notamos con el diseño y lo complejo que resulta pensar y diseñar un sistema visual que tenga sentido.

Ilein González

Ilein González es licenciada en Comunicación Social, mención periodismo, graduada de la Universidad Católica Andrés Bello. Desde mayo del año 2018 se desempeña como Analista de Calidad en intive, en uno de los proyectos más desafiantes de la compañía. Ilein es además una entusiasta de la innovación y los procesos.

Deja un comentario