Lleva tu React al siguiente nivel con Compound Pattern

El desarrollo de software puede ser complicado. Por eso, hacer componentes React reusables y flexibles es una aventura para la cual debes tener en tu inventario conocimientos y herramientas.

Hoy agregarás un nuevo conocimiento: el patrón Compound.

Meme puke rainbow

¿Qué es el Compound Pattern y cómo se usa?

El patrón Compound permite crear interfaces complejas compuestas por pequeños fragmentos que se comunican con el componente padre. Este no los conoce y solo se encarga de darle las propiedades necesarias para trabajar.

Un ejemplo de implementación de este patrón a nivel HTML lo podemos observar en el elemento select:

<select name="framework">
    <option value="">Choose a framework</option>
    <option value="react">React</option>
    <option value="vue">Vue</option>
</select>

La única condición de este elemento para poder funcionar es que los hijos sean elementos option. Estos pueden contener elementos internos de cualquier tipo, y no nos interesa, pero deben cumplir la regla descrita anteriormente para poder funcionar.

Eso es lo que buscamos, tener una interfaz simple, declarativa, fácil de mantener y escalar.

A partir de aquí hablaremos de React, ¡por eso sería genial que aprendieras a usar esta biblioteca JS! Para hacerlo, te invito a que conozcas el Curso de Introducción a React.js.

Diseño de un componente siguiendo el Compound Pattern

Para este ejemplo vamos a crear un componente que utilice Google Maps. Este podrá mostrar en el mapa marcadores y polígonos.

Explicar a detalle la API de Google Maps, tomaría mucho tiempo, y lo importante es entender cómo funciona el patrón y cómo nos puede ayudar a hacer componentes más hermosos.

El componente de Maps se encargará de dibujar el mapa base, donde vamos a dibujar, y los elementos hijos usarán el mapa para dibujarse. Esto es crucial, ya que estamos separando responsabilidades al componente Google Maps, y a él no le importa si se dibujan polígonos, marcadores o rutas.

El componente se usará de la siguiente manera:

<GMap {...props} >
	<Marker {...props} />
	<Polygon {...props} />
</GMap>

Quizás hayas visto algunas implementaciones que hagan algo como esto:

<GMap markers={} Polygons={} />

Menos líneas, menos problemas, ¿verdad?

La verdad es que no, pues el detalle de este tipo de implementaciones es que terminaríamos haciendo que el componente tuviera demasiadas responsabilidades. Además, para agregar soporte a un nuevo elemento tendríamos que modificar directamente el componente: adiós a la flexibilidad, hola a los bugs.

Implementación en React para Google Maps usando el Compound Pattern

Vamos a comprobar cómo implementar el Compound Pattern. De igual forma, pueden revisar el código de la demo para verlo en acción.

El primer paso es darle al componente padre la capacidad al componente de aceptar hijos:

function GMap({ children }) 

Lo segundo es clonar a esos hijos antes de dibujarlos, esto con la intención de pasar propiedades del padre que el hijo va a necesitar para realizar su trabajo (en este caso solo se inyecta el mapa, eventualmente podríamos agregar más cosas).

Esto lo hacemos con las APIs de React Children y cloneElement:

const mapElements = React.Children.map(children, child =>
    React.cloneElement(child, { map })
  );

Una vez hecho esto, usar el componente será algo tan simple como:

<GMap mapOptions={mapOptions}>
	<Marker position={position} />
	<Polygon paths={paths} options={options} />
</GMap>

Resultado final de la implementación

Recuerda que el código está disponible para que lo explores y juegues con él. Pero ten cuidado, pues la API Key tiene un límite😄.

Al final tendríamos algo similar a esto:

Te propongo el siguiente reto

Agrega al marcador un evento on click que te permita centrar el mapa. Si tienes dudas sobre este reto o patrón, cuéntamelo en los comentarios.

Espero que lo hayas disfrutado, y recuerda: ¡si este post es popular, podemos traer más ediciones y tutoriales!