32

Lleva tu React al siguiente nivel con Compound Pattern

9595Puntos

hace 22 días

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC

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

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">
    <optionvalue="">Choose a framework</option>
    <optionvalue="react">React</option>
    <optionvalue="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:

<GMapmarkers={}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:

functionGMap({ 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}>
	<Markerposition={position} /><Polygonpaths={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:

Mapa

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!

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC
Joel Humberto
Joel Humberto
dezkareid

9595Puntos

hace 22 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
9682Puntos

Buena explicación, gracias por compartir.

1
9595Puntos
21 días

Gracias a ti por leer 😃

2
1303Puntos

bueno, bueno, de esta forma los componentes quedan muy bonitos y organizados. +10

1
9595Puntos
21 días

Gracias, si y lo más importante, desacoplados 😃

2
6921Puntos

Ese patron es bueno para los que les gusta tener muchos archivos con fragmentos, al operar la codificacion el resultado es tener muchas pestañas abiertas y moverte por todo el editor de adentro de las funciones hacia afuera o viceversa del padre entrando hacia los hijos con control click, o si usas vim usando el shortcut g+d(go to definition).

En lo personal prefiero el patron de composicion de componentes donde en la misma hoja o archivo tienes varias funciones, así al operar te mueves dentro de la misma pagina de arriba hacia abajo o abajo hacia arriba, pero el resultado de esto es tener mega componentes con varias lineas de codigo… pero es mejor buscar una palabra con vim dentro de un solo archivo que estar paseandose por paginas…

con vim on Vsc para buscar algo es usar la barra /nameBuscado para buscar hacia abajo, para buscar hacia arriba es con
?nameBuscado

2
18292Puntos

easy

2
9595Puntos
22 días

Genial, en futuros post agregaremos un poco más de complejidad 😃

1
39138Puntos

La verdad si me quede como el meme de inicio al final jajaja, espero usar en un proyecto futuro esto 🤓

1
9595Puntos
17 días

Ten por seguro que si te servirá 😃

1
23003Puntos

Perfecto para tener componentes desacoplados.👌
Por cierto, hay que cambiar el icono de ese marker por un taco, jeje. 🌮

2
9595Puntos
20 días

Esa es una muy buena idea XD

1
5622Puntos

¿Cúal método uso para llamar a mi ubicación actual? ¿locate?

2
9595Puntos
21 días

Ese en un método del navegador llamada geolocation, te da “tus” coordenadas actuales

2
5622Puntos
21 días

Me falta entender eso aún. Invesigaré. Gracias!