Patrones de diseño y estructuras de datos en React

Muy buenas, Gerardo. ¿Qué tal? ¿Cómo

estás?

Muy buenas. Iba a decir que ya especial,

especial, ya en dos semanas seguidas

dejo de ser tan especial. [risas]

Bueno, dos semanas seguidas si que es es

especial, o sea, dos directos seguidos,

eso es muy especial.

Sí, sí, sí, eso es verdad, eso es

verdad. Pero vamos, [ __ ] yo encantado

de estar aquí de nuevo con vosotros y

con muchas ganas, además, porque cuando

lo comenté con Ana e sobre esta charla,

la lo que íbamos a preparar, dije,

"Joder, que esto va esto va a quedar muy

guay, muy muy muy guay porque hay poca

literatura sobre este tema,

especialmente en español. Así que vamos,

una hora bastante divertida y prometo

que va a ser una hora, no como en la

sesión anterior que empecé, empecé,

empecé y no había quien me parase.

Sí, la verdad es que a veces es

complicado cuando estás hablando de algo

muy interesante, eh, sobre todo el

último día que había muchas preguntas

también, eh, al final es difícil que te

centres en una hora. Pero bueno, hoy

tenemos algo eh que para mí también

personalmente es muy interesante, que

son patrones de diseño y estructura de

datos. En este caso, ¿vas a centrarlo

más en la parte de React o cómo vas a

hacerlo? va a estar basado. Bueno, hola

Nacho, ¿qué tal? Es que un antiguo compi

mío el que acabas de poner ahí en en

Tala, así que le saludo especialmente y

va a estar basado en React, pero esto lo

bueno es que se podría aplicar en

cualquier tipo de librería framework, o

sea, que es completamente agnóstico.

Vamos además a usar Type Script. Además

va a quedar muy guay porque va a quedar

así una, yo creo que va a quedar

bastante redonda la sesión porque va a

ser 100% agnóstico. Es verdad que al

final podamos ampliar React para ver

unas ver cómo funcionaría dentro de una

aplicación y un par de casos de uso,

pero esto lo bueno de lo que vamos a ver

hoy es que es 100% JavaScript y pues

aunque lo hagamos en TypeScript y es

agnóstico de la librería del framework

que estemos usando. Así que

perfecto. Pues nada, eh si puedes

compartir pantalla y lo pongo en el

directo. Y nada, mientras

sí, mientras tanto a todos os animo a

que participéis en el chat. Cualquier

pregunta ir poniéndola, ¿vale? Que

bueno, pues mientras que estemos en

directo pues la podremos contestar o si

vamos haciendo algún paroncito, pues

vamos eh contestando esas esas dudas,

¿vale? Y bueno, todo lo que veáis de

código y las diapositivas, pues lo

tendréis en el Twitter de Garaje, en

LinkedIn y en el propio GitHub, ¿vale?

Sí.

Pues nada, yo te doy paso, Gerardo, y

todo tuyo.

Y vamos allá. A ver qué tal está esta

ahorita. Eh, no vamos a evitar

duplicarnos por aquí. Me mando esto ya

para acá y vamos a empezar pues con la

con la sesión de hoy. A ver qué a ver

qué tal si os gusta lo que os traigo

para esta tarde tan fría, por lo menos

en Madrid de de miércoles. ¿Vale?

Entonces, como lo he preparado, van a

ser dos tipos de, bueno, vamos dos dos

ejercicios, ¿vale? Uno en el que vamos a

vamos a resolver un caso de uso mediante

un event dispatcher, ¿vale? Y en el otro

vamos a aplicar pues una estructura de

datos que es una col una cola, ¿vale?,

para encolar tareas y que se ejecuten en

orden que es super importante, pues como

veremos para resolver determinados

problemas cuando estamos construyendo

aplicaciones. Como le comentaba a

nuestro compañero, pues esto lo voy a

hacer con React, pero lo bueno es que

sería aplicable 100%

en cualquier tipo de librería, framework

y demás, ¿vale? porque son estructuras

de datos. Y lo bueno de este tipo de

patrones y y estructuras, valga la

redundancia, es que no importa con qué

estemos trabajando, al final son

agnósticas de la librería y framework y

las podemos aplicar en cualquier lado.

Así que nada, pues dicha esta mini

introducción, le voy a dar así un

poquito más de cariño, un poquito más de

zoom mientras tanto y os cuento pues de

dónde vamos a partir, qué caso de uso

tenemos y por qué aquí sería buena idea

implementar un even dispatcher, ¿vale?

Entonces, este es un proyecto que he

montado yo aquí tranquilamente. Mañana

ya tendréis disponible en el

repositorio, bueno, pues todo lo que

vamos a hacer en el día de hoy, pero en

este caso, bueno, pues estoy trabajando

con la libría Read Query, que en este,

bueno, pues da igual que sepáis o no

cómo funciona, pero lo importante aquí

es que lo que estáis viendo aquí en la

derecha, que es la aplicación, ¿vale?,

Vale, pues tenemos por un lado como

cuatro cajitas en las que se está

mostrando pues información de referente

pues a esta aplicación de tareas que

estamos haciendo. Tenemos el usuario que

se ha logueado con el nombre este que lo

he pillado por ahí en un generador de

nombres aleatorio y el número de tareas

que tiene creadas, que aunque se vean

pequeñito, os prometo que es un tres.

Por otra parte, pues tenemos una lista

de tareas, ¿vale? Por las tareas que ha

creado este usuario. Por otra parte,

unas tareas, las tareas asociadas a una

cierta etiqueta, porque las tareas las

podríamos etiquetar. Y por otra parte

las etiquetas que tenemos dado de alta

en el sistema. Y a la derecha pues

nosotros podemos ir mediante un

formulario ir añadiendo etiquetas y todo

funciona perfectamente. Aquí yo si pongo

pues por ejemplo bajar a mi perrete,

¿no? Y le doy a enviar, pues aquí va a

aparecer una nueva tarea y todo

funcionando. Ahora bien, que ¿por qué me

inventado yo este ejemplo para hablar de

del even Dispatcher y cómo crear un even

dispatcher que podamos emplear pues en

TypeScript eh con TypeScript y luego

integrarlo en una aplicación con React?

¿Y qué es eso de un event dispatcher y

qué caso de uso nos vendría a resolver?

Mira, vamos a abrir aquí eh uno de los

componentes, ¿vale?, que es el del

formulario. Entonces, os cuento un

poquito

qué problema tenemos o qué situación nos

podemos encontrar. Claro, esto tenéis es

un ejemplo muy preparado, así que tened

en cuenta que es como muy pequeñito,

pero esto trasladadlo todo lo que yo os

cuente a una aplicación más grande de

estas en las que ya trabajamos en la

empresa en la que para la cual

programemos, pues al final es fácil

encontrarnos con ese tipo de situaciones

y por eso el even dispatcher pues es

como s super buena idea, ¿vale? Entonces

la idea ya os digo, no importa que esté

usando React query, ¿vale? Es que me

cuadraba bastante hacerlo con con él

para mostrarlo, pero la idea aquí es que

en el formulario nosotros cuando

introducimos una nueva tarea, por

ejemplo, pues bajar a Simba, ¿vale? y la

descripción pues que la voy a duplicar.

Yo le doy a enviar y aquí evidentemente

pues van a aparecer, se va a refrescar

el número de tareas que tiene el

usuario, se va a añadir la tarea, se va

a añadir la tarea bajo la etiqueta pues

label 1 y por otra parte, bueno, pues la

lista de etiquetas se va va a aumentar

el contador de la etiqueta número uno.

¿Qué quiero decir con esto? Que nosotros

cuando rellenamos el formulario, ¿vale?,

que yo tengo creado por aquí, que es el

que estáis viendo ahí con título y

descripción. En el momento en el que yo

le doy enviar, sucede lo siguiente. Se

envía una mutación mediante React query,

¿vale?, que es como una llamada a la API

para crear la tarea en base de datos.

Eso, ¿qué significa? Pues que yo por

aquí

hago el post de la tarea que acabo de

crear, ¿vale? Que la tengo medio

hardcodeada por aquí, pues para no

montar mucho, para no montar mucho lío.

Y lo importante, ¿vale?, Vale, es que