¿Deberíamos tener lógica de negocio en la interfaz de usuario?

Así que mi nombre es Samuel. Samuel P. Puedes llamarme Sam si quieres. Es más fácil. Creo que es un nombre más universal, Sam. Creo que me parezco más a esto que a esto. Sí, los pañuelos. Así que tenemos algunos contactos. Si quieres comunicarte conmigo después de la conferencia para aclarar algunas preguntas, si quieres aprender más sobre lo que estoy hablando hoy. Y de lo que están hablando hoy es todo esto. Así que puse 15 minutos en cada paso. Pero esto irá más a tu velocidad. Así que algunos de ellos son mucho más rápidos que 15. Otros son un poco más largos que 15. Pero en promedio, serán 15 minutos. Así que comenzaremos mostrando lo que estamos construyendo. O en este caso, reconstruyendo, porque ya tenemos algo funcionando. Y lo haremos de una manera diferente. Usemos una palabra diferente para esto. Y compartiré el código con el que estamos comenzando. Y luego haremos algunas refactorizaciones en él. Y tenemos un pequeño descanso. Tenemos dos descansos. Tres descansos, diez minutos cada uno. Así que en cada paso está bien si te pierdes algo de código. Siempre puedes revisar la rama y estarás al ritmo del grupo. Sería bueno si puedes hacerlo tú mismo. Si alguna razón, tienes que ir a la puerta, tienes algo en el horno y tienes que sacarlo, simplemente puedes revisar el siguiente paso y estarás bien. Después de ver el estado que tenemos, comenzaremos a hacer algunas cosas. Al principio, como todo, es como una aplicación de UI, y básicamente en el componente, comenzaremos a sacar cosas de él. El primer paso es usar un hook de React, así, lo sacamos del hook de React, luego tenemos un pequeño descanso, y luego en realidad pasaremos a una aplicación. Así que esto, te mostraré un poco lo que hay en esta aplicación de la que estoy hablando porque del paso uno al paso dos, en realidad hay muchos cambios, así que tendremos que ver el tipo y el código real. Después de eso, todavía tendremos una refactorización, y tenemos algunos valores en nuestra aplicación, y haremos que funcione, no siendo desencadenada por la interfaz de usuario, sino por algo más. Y luego tendremos algunas nuevas funciones, así que esta aplicación tiene una prueba y dos funciones, funcionando con banderas de funciones, y tendremos más cosas encima. Por ejemplo, la primera función que implementaremos es agregar más sonidos a la prueba, y luego crearemos un vestíbulo para la aplicación, porque actualmente la aplicación se inicia automáticamente. Este es un juego que estamos jugando, estamos haciendo un juego, un pequeño juego de preguntas, y el juego se inicia automáticamente, por lo que el usuario se confunde un poco. Entonces lo que haremos es preguntar al usuario cuándo quiere comenzar, qué quiere hacer, para que podamos jugar y comenzar el juego. Y luego tendremos la animación de Dan. Entenderemos quién es Dan en un momento. Tal vez si eres fanático de Mortal Kombat, puedas saber quién es Dan. Así que crearemos una animación similar al caballero Dan, y luego solo una pequeña función para cambiar el nombre de la imagen de la persona que estamos mostrando. ¿Entiendes de qué estoy hablando, un poco? Esta fue una función solicitada por mi esposa, porque estaba jugando, no le gustaban los nombres de las figuras, y pensó que tal vez deberíamos usar el nombre que usan en el programa de televisión. Así que veamos qué van a hacer. ¿Alguna pregunta hasta ahora?

Muy bien. Así que estamos construyendo esta hermosa aplicación. Aquí vamos. Esta es una aplicación de React. Básicamente, fue un inicio rápido desde una aplicación de creación de React. Y lo único que teníamos era la dependencia Meet. Todo lo demás es solo JavaScript que escribimos, porque Meet también es JavaScript, pero alguien más lo hizo.

Muy bien, quiero ver manos de nuevo. ¿Quién conoce el patrón de publicación-suscripción? Debería hacerlo de manera negativa. Muy bien. ¿Quién no lo sabe? ¿Quién tampoco lo sabe? ¿Quién no conoce el patrón de publicación-suscripción? Estamos bien. Muy bien. Entonces, puedo explicar un poco qué es. Meet es una biblioteca que nos ayuda a implementar el patrón de publicación-suscripción, por lo que básicamente es lo que hace el navegador, ¿no? Tienes un elemento y puedes hacer algo cuando haces clic en él. Te suscribes a un evento, y este elemento realmente emitirá un evento, como, `ok, alguien hizo clic en mí`. Y puedes tener varias personas allí, ya sabes, como en clic, clic, clic, clic, y cuando alguien hace clic en este elemento, te emitirá un evento como, `ok, alguien hizo clic en mí`. Entonces, esto es algo que funciona no solo en el navegador, por lo que se puede usar en cualquier lugar. Esta es una de las ventajas, porque si quieres usarlo en un servidor de nodo, seguirá funcionando y los otros eventos personalizados no funcionarán aquí. Entonces, puede funcionar sin ellos. Si solo quieres usar el navegador, puedes usar el evento personalizado y seguir adelante. Pero estoy entrando en muchos detalles que no tenía planeado hablar. Así que sigamos adelante.

Aquí hay una prueba de eBit y la prueba de eBit trata sobre Mortal Kombat. La mostraremos en un momento. Por eso tienes hecho en la mezcla y tienes dos características. Por defecto, el tiempo es de ocho segundos. Tienen que tomar ocho segundos para responder. ¿Quién dijo esto? ¿Cómo estás? Si conoces la serie de televisión, probablemente sepas quién lo dijo. Tomará diez segundos, supongo, algo así. Y esto se llama función VIP. Y tienes una función de unicornio. Entonces, la función de unicornio en realidad te dirá quién lo dijo. Básicamente, estamos haciendo trampa. Solo por diversión. Así que esto tendrá seguimiento en su lugar y muchos, muchos, muchos sonidos. Hablando de sonidos, déjame compartir mi sonido contigo porque necesitaremos escuchar cosas. Muy bien. Tal vez no quememos los oídos. Y vamos. Demo, demo, demo, demo. Veamos qué tenemos. Así que este es nuestro juego y este es el punto de partida. ¿Alguien tiene alguna pregunta? ¿Alguna duda? No. Genial. Así que este es el juego. Como dije, si abres el sitio web, el juego comenzará automáticamente. Lo cual es un poco molesto. Lo siento, tengo el unicornio activado. Así que si haces clic. Oh sí. Phoebe, ella dijo, oh sí, fui yo. ¿Pudiste escucharlo? Bien, pero si fallas. Dices, no, no fue ella. Y cada persona hablará. Si fue o no fue. No. Lo siento. Estás inventando todo esto. Entonces, si fallas tres preguntas seguidas, hay un anti combo. Entonces, básicamente tenemos un sonido especial para eso. Y si obtienes tres seguidas, tenemos un sonido de combo. Como Joey. Monica y Joey. Entonces tenemos un sonido especial cuando haces un combo. Así que estamos comenzando desde aquí. Y agregaremos esta función de inicio de sesión. Solo saltaré al código y iré a la rama principal. Y si vuelves aquí. Entonces el juego no comienza por sí solo. Eso es lo bueno.

Así que tenemos tiempo para, no sé, hacer lo que necesitemos hacer. Y tenemos como un vestíbulo afuera. Esto no es una característica adicional. Puedes tener música de fondo, solo porque podemos y podemos comenzar a jugar. Así que la misma situación. Ahora, si quieres probar la versión de Mortal Kombat, solo necesito establecer cookies para que mis pruebas sean vistas por las cookies. Oh, otra característica que olvidé mencionar, el tiempo de espera. Entonces, si no respondes, lo llamarán. Así que simplemente cambiaré a la versión de Mortal Kombat para que podamos ver la diferencia. Pero antes de eso, te mostraré el combo para la versión de control y luego saltaremos. De acuerdo, hagámoslo de nuevo. ¡Comenzar! Porque estoy haciendo trampa, no parezco haberlo hecho de memoria. Así que Rachel, Monica y Joseph. ¡Oh, Dios mío! Así que tenemos a Janice mostrando el combo. Y este es el tipo de animación que tendremos que implementar muy pronto. Así que lo cambiaré para que podamos ver en realidad cuál es la versión de Mortal Kombat. Entonces, ahora, si juegas, en realidad tienes una canción de té diferente. Muy bien. Y si comienzas. Ronda uno. Esto es familiar para algunos de ustedes, diría yo. Así que Phoebe. Bien hecho. Rachel. Bien hecho. Joey. Frosty. Y están los famosos combos de animación de Mortal Kombat. Así que esto es lo que estaremos haciendo o trabajando. ¿Qué estás esperando? Sí, sí. Y lo siento. ¿Alguna pregunta hasta ahora? Bien, bien, bien. Permítanme revisar el chat. Hola. La clonación, lo mostraré en un momento. Así que no nos perdimos. Todavía se están uniendo personas. No te estás perdiendo mucho. Solo estoy mostrando lo que estaba haciendo en la agenda. Muy bien. Entonces, después de la demostración, ¿qué tenemos? Muy bien, aquí vamos. Solo clonas cosas. Este es el repositorio y puedes clonarlo. Si no tienes ningún cliente, bueno, necesitarás uno. Solo avísame si no tienes ningún kit. Así que debes esperar o no para ti. ¿Está todo bien con el kit? Lo siento, ¿podrías pegar la dirección del repositorio en el chat? Sí, sí, sí, sí, sí. Lo siento, está compartiendo una de mis cinco pantallas. Acabo de enviarlo. No hay problema. ¡Oh, gracias! ¡Gracias! Así que en realidad puedo compartir el siguiente paso porque... Entonces, tenemos algunos pasos. El paso 0 es en realidad el que no tiene nada, así que ahí es donde deberíamos comenzar. El maestro es la última versión. Así que no uses el maestro. De lo contrario, no tienes nada que hacer. Todo está hecho. Y luego saltaremos de paso en paso. Ten cuidado al pasar del paso 1 porque en el paso 0 tenemos step-0. Pero todos los demás tienen step underscore 0. Solo un truco. No es un error de mi parte, ¿verdad? Entonces, si vas al repl, verás que tenemos todos los pasos aquí. Así que vamos al 0, y tenemos algunas instrucciones que haremos, y básicamente no hacemos nada aquí. Solo veremos el código y seguiremos con nuestras vidas. La generalidad será la misma en todos los pasos. Solo te está diciendo lo que estás tratando de hacer. Muy bien.

Si saltas, por ejemplo, solo un spoiler. Si saltas al paso uno, verás que tienes algunas instrucciones para hacer lo que tienes que hacer. Y si de alguna manera tienes dificultades para hacerlo, tenemos un enlace para la... como una solución propuesta para el cambio. Así que siempre puedes consultar... el pequeño enlace allí. Entonces, ¿dónde estamos? ¿Tenemos el repositorio conectado a la hoja? ¿Tu internet es demasiado lento para hacer la instalación final? Es normal.

Muy bien, una de las cosas que probablemente nunca cuento como hacer cosas voy a mostrar lo que tenemos, cuál es la estructura de nuestros archivos para que podamos navegar un poco más fácilmente. Así que una visión general. Tenemos una carpeta pública donde están nuestros activos, como imágenes y sonidos, y algunas API falsas porque no implementamos ninguna API pero tenemos algunas llamadas falsas allí. En realidad, estamos usando una API abierta real en el B2oc. Tenemos nuestro dominio aquí es donde tenemos todas nuestras entidades de dominio. Al principio, son básicamente algunas, algunas estructuras, no tienen ninguna lógica. No saben qué hacer. Nada, solo como un personaje tiene un nombre. Tiene una foto y tiene reflejos de objeto. ¿Qué puede decir? Puede decir sí, puede decir no. Puede decir otra cosa. Y si tiene posiciones diferentes tiene diferentes formas de decir algo. Pero no saben qué hacer nada. Es solo el data, data sin procesar.

Entonces, la infraestructura al principio, este es uno de los seguidores con los que jugaremos mucho. Pero al principio, es solo la forma en que alcanzamos data. No tenemos mucho más. Así que tenemos dos repositorios. Uno para obtener los personajes y otro para obtener las citas. Tenemos los mapeadores. Porque obtendremos este data de algún lugar si viene al objeto de transferencia de datos, pero no queremos trabajar con objetos de transferencia de datos. Queremos trabajar con nuestras entidades de dominio. Entonces tenemos un mapeador que tomará este objeto GTA y lo mapeará a algo que nuestra aplicación conoce, no algo que esté optimizado para una transacción de red. Entonces, en el paso uno, esto es todo lo que la infraestructura debería hacer. Podría hacer algo más como almacenamiento en caché u otras cosas, pero aún no estamos ahí.

Entonces, servicios. He proporcionado algunos servicios muy básicos para hacer pruebas AB. Entonces, si quieres consultar una prueba AB o hacer la impresión o el calor de la prueba. El bus de eventos es el envoltorio elegante que usaremos mucho. Al principio, aún no lo estás usando, pero ya está ahí. Y el panel de características, es la misma herramienta, consultar la característica. Entonces, si tienes una característica habilitada, puedes react y trabajar con ella. Tengo un bloqueo en el seguimiento. Entonces, el seguimiento realmente hace el seguimiento. Podemos ver aquí. Si voy a mi navegador y si voy probablemente a la red. Ahí lo tienes. Si hacemos esto, solo filtramos el seguimiento. Si hago clic en algo, veré que el seguimiento realmente está sucediendo. Entonces estamos enviando algunos valores. De acuerdo, sí, fue. Algo sucedió. Y lo mismo para la prueba de datos. Si actualizo el seguimiento, seguimiento. Probablemente debería estar funcionando. Pero no lo está. Sí. Muy bien. Pero verás si las cosas funcionan o no. Veamos qué estamos haciendo. Permíteme asegurarme. Muy bien. Entonces, esto es una interfaz de usuario. De acuerdo, interfaz de usuario. Tenemos tres carpetas. Entonces tenemos una carpeta con ganchos. Que son ganchos de React. No hay mucho que agregar aquí. Componentes. Básicamente, son solo componentes sin procesar. Nuestros componentes no hacen nada. Solo este hace algo. Y trataremos de resolver esto.

Entonces, el contenedor hace muchas cosas. En realidad, hace de todo. Quiero decir, todo es todo. Seguimiento. Obtención de datos. Todo. Lo siento. Y tenemos una carpeta llamada adaptador. Así que estamos usando useReduce. Muy bien. ¿Quién conoce el gancho useReduce? Muy bien. Estamos usando eso. Muy bien. De acuerdo. Entonces este adaptador es el reductor. Tenemos el estado. Y hay algunas funciones auxiliares aquí para calcular los puntos. Y las acciones que podemos enviar. Muy bien. Sí. Y eso es todo. Y luego, en realidad, tenemos una carpeta Reduce, como cualquier otro proyecto, donde ponemos todo lo que no sabemos dónde poner. Ni siquiera en la diapositiva. Así que salté desde una esquina al azar, porque tengo una idea de dónde poner este tipo de código. Y hay algunas utilidades para obtener cookies y convertir objetos a cadena, y reproducir el sonido y mezclar arrays. Cosas muy aleatorias. Genial.

¿Estás listo con la clonación? Bien. Entonces aquí a nuestra izquierda, esto es un gif muy borroso. Espero que puedas leer cosas. Pero a nuestra izquierda tenemos nuestra interfaz de usuario, nuestro contenedor. Y luego a nuestra derecha, tenemos nuestro dominio. Al menos el HootSegregate de nuestro dominio. Y comenzamos con una interfaz de usuario muy voluminosa, como puedes ver. Y un dominio muy delgado. Entonces, lo que haremos en esta masterclass es en realidad revertir esta tendencia. Así que verás que en el final nuestro HootSegregate es bastante inteligente y nuestra interfaz de usuario está bastante hecha. Sí, así que, subamos y continuemos.

Muy bien, veamos si todos están realmente listos para comenzar a codificar. ¿Alguien todavía está en el repositorio o todos están listos? Levanta la mano si todavía estás descargando cosas de Internet. Muy bien, bien. De acuerdo, como vimos, ahora tenemos que ir al paso uno y la aplicación dejará de funcionar. Así que podemos comenzar a verificar si la aplicación está funcionando. Deberías ir a los pasos.

De acuerdo, esta realidad cambiará si revisas el paso uno, la aplicación se romperá. Y si puedo... aquí, si hago el mismo comando checkout, step underscore one. Plataforma interesante, de acuerdo. Es bastante difícil leer un archivo README así. Pero si haces clic en este bonito botón y no sé si usas Visuals, usa VSCode. Bueno, no sé. Yo uso VS Code. Entonces, para aquellos que usan VS Code, si haces clic en este botón en la esquina aquí, tendrás una versión agradable para ver los archivos README. Así que tenemos un enlace para los archivos aquí. Abre este archivo y luego toma el código de este archivo y pégalo en este otro. Así que tendremos, como, 15 minutos para hacer esta tarea. Estaré por aquí. Si tienes alguna pregunta, avísame. Como puedes ver, tenemos el esqueleto para el libro y tenemos el código aquí que ya no se está utilizando, pero aún está aquí. Así que solo necesitamos moverlo allí. No solo eso, sino que también tienes que copiar, como, solo las importaciones y algunas otras cosas. Toma este código. Ven aquí. Pega. Algo se queja. Genial. Hecho. Todavía se queja. Pega. Todavía se queja. Importa. Este es un truco para importar todo. De acuerdo, así que, Entonces, De acuerdo, Entonces, Entonces, De acuerdo. Entonces, Entonces, um entonces ¿qué está pasando con todos? ¿Algún paso que está complicado para alguien en las salas de descanso? Entonces, si terminas, simplemente puedes hacer checkout del paso dos, no es necesario comentar Puedes compararlo con la solución propuesta, pero no creo que pueda hacer mucho Puedes intentar hacerlo aquí, pero no tiene sentido porque uno de los pasos será eliminar todo este código de todos modos. Tienes 60 segundos, no hay problema si no terminas, puedes hacer checkout del paso dos y estará listo. Entonces, pasemos al juego y veamos qué sucede. ¿Por qué lo estamos haciendo? Si echamos un vistazo y volvemos a nuestro código, todo nuestro código todavía está en la interfaz de usuario. No hay nada. Todavía está aquí. Entonces, si voy a mi dominio, son entidades, personajes y este. Todavía, no hace nada. Entonces, todavía, mi interfaz de usuario sigue haciendo todo. Entonces, en realidad, este paso no me ayudó mucho a sacar la lógica de mi interfaz de usuario. Todavía está allí. Así que es solo un disfraz en un libro. Eso es bueno, supongo. Entonces, ahora, crearemos una nueva carpeta aquí. Cuando hagas checkout del paso dos, estará allí. Y veamos por qué. Entonces, si realmente haces checkout del paso dos en este momento, probablemente te confundirás porque hay muchos cambios. Y me gustaría darte algo de contexto antes de que realmente comiences a trabajar en ello. Puedes hacerlo porque hay algunas instrucciones. Déjame ver qué digo. Eso será interesante. Paso 2. Así que iré a este archivo, eliminé todo el código, emito y evento.

De acuerdo. Esto es un poco extraño. Muy bien. Veamos lo que estoy tratando de decir aquí. Entonces, hasta este punto... De acuerdo. La idea general. Olvidé esta parte.

Entonces, lo que cambiamos del paso 1 al paso 2 es darle un valor semántico a esta carpeta. Como dijimos al principio, tenemos una carpeta de dominio, cada infraestructura y cada interfaz de usuario, pero el código estaba simplemente allí. Y puede hacer lo que quieras. Es como si todo estuviera en la raíz, en realidad no deberías seguir un patrón architecture algo que le dé sentido a esta carpeta. Y en el paso 2, en realidad tendremos la carpeta de la aplicación. Esa es la parte de la aplicación que está más cerca del dominio, que hará que las cosas sucedan. Entonces, esta es en realidad la capa que realizará la acción... La aplicación. Hay más cosas. Vamos paso a paso. Veamos algunos conceptos clave de esta idea de hacer de esto una arquitectura de cebolla.

Por cierto, ¿alguien está familiarizado con una arquitectura de cebolla? Entonces, esto es como una cebolla. Tiene capas. Tienes una capa para acceder a la siguiente. Una capa para acceder a la siguiente. La parte más importante de nuestra aplicación es el dominio. Todas nuestras reglas, nuestras reglas principales del negocio. E idealmente, es la parte del código que cambia menos. Entonces, no necesitas cambiarlo mucho. Pero, la interfaz de usuario, por otro lado, está fuera. Cambia mucho. El botón es verde, mañana es azul. O es menos y luego va a la derecha. Siempre está cambiando. Sigamos adelante, porque ese no es el punto de la masterclass. Pero por favor, pregúntame cosas si tienes alguna pregunta.

Entonces, uno de los puntos principales es, ¿qué es la prueba? Las dependencias funcionan desde la capa exterior desde la interfaz. Por ejemplo, la interfaz de usuario puede acceder a la infraestructura, puede acceder a la aplicación, puede acceder al dominio. Pero el dominio no puede acceder a la aplicación. El dominio no puede acceder a la infraestructura. El dominio no puede acceder a la interfaz de usuario. La interfaz de usuario es lo más pura posible, lo más que puede ser. Pienso en un punto para eso. Porque si hacemos que nuestra interfaz de usuario sea simplemente pura JavaScript, somos agnósticos del marco de trabajo. Entonces, puede cambiar de dirección en cualquier momento. React es muy popular, y espero que lo sea durante 20 años. Pero puede venir como algo más que mate toda tu aplicación, como hace 10 años, FakeQuery era una cosa. Exactamente. Entonces, la interfaz de usuario es solo un mecanismo para entregar tu contenido. No es la aplicación en sí. Es solo la forma en que llevas tu aplicación a un usuario. Si pones todo en el mecanismo de entrega, pagarás mucho por esta entrega. Entonces, como dije antes, el dominio debe ser independiente de las bibliotecas. Entonces, si tienes algo que tu dominio necesita, por favor, inyéctalo, inyéctalo, para que puedas darle forma como necesites, porque el mismo dominio puede funcionar en diferentes áreas. Imagina, por ejemplo, en nuestro caso, tenemos una aplicación que tiene diferentes etiquetas blancas. Entonces, la misma aplicación funciona en diferentes países. Tiene diferentes reglas, diferentes sistemas de interfaz de usuario, lo que sea. Tenemos el mismo dominio, pero hay algunas cosas específicas que son específicas para áreas específicas. Todo debería venir desde arriba e inyectarse. Entonces, hazlo lo más claro posible. Y la aplicación, lo mismo. Entonces, la aplicación conoce todas esas cosas, pero no conoce los detalles. Por ejemplo, el repositorio. Entonces, sabes que tu aplicación necesita obtener estos data de algún lugar. La aplicación no necesita conocer los detalles, como qué hay en el servicio. Esto está usando GraphQL. Esto es REST, esto es JSON. La aplicación solo necesita saber que necesita obtener estos data. Cómo llega, alguien me lo dirá. Y esto puede cambiar en cualquier momento. Por ejemplo, hemos pasado por una refactorización recientemente. Y el mismo punto final cambió cinco veces en un mes porque estábamos cambiando muchas cosas.

Entonces, era un punto final, y luego pasamos a la puerta de enlace de la API, y luego cambiamos a GraphQL, y luego cambiamos directamente a Play. Así que todos estábamos cambiando la forma en que los datos llegaban a la aplicación. Entonces, si pones esto directamente en la aplicación, estás copiando las cosas. Así que simplemente dale la aplicación o realmente obtén tus datos o cualquier otra cosa, cookie o lo que sea.

De acuerdo. Entonces, nuevamente, organiza tu código en torno a las ideas de negocio, no a los frameworks. Esto es divertido. Sí. Entonces, deberías escribir... Deberíamos escribir nuestras reglas de negocio tal como te las indica el propietario del producto. Entonces, el usuario va al sitio web, hace esto, hace aquello, y debería describir tu aplicación desde la perspectiva del propietario del producto, porque si escribes el código como, tengo esta base de datos, React hace esto, y luego tengo un enrutador, será difícil asegurar que estás haciendo lo correcto porque estás conectando herramientas para hacer tu trabajo. Probablemente sea más fácil describir qué está haciendo exactamente el código, como alguien preguntó, porque el propietario del producto probablemente no tiene idea de qué es React o GraphQL o este tipo de cosas.

Y esto es algo de lo que ya hemos hablado, por lo que la regla de dependencia mantiene las colas alejadas del núcleo, por lo que sabes que necesitas acceder a los datos, pero no necesitas saber cómo obtener los datos. Sí, solo quería preguntar si tienes un ejemplo, un escenario para el penúltimo punto que mencionaste, organiza tu código en torno a las reglas de negocio, no a los frameworks. Entonces, si tomas por ejemplo, esta aplicación de preguntas que hiciste, ¿cómo se aplicaría a esta aplicación de preguntas? Sí, no estoy seguro si tenemos aquí un ejemplo específico para eso, pero recientemente tuvimos, por ejemplo, puedo dar un ejemplo de nuestras rutinas diarias. Y tenemos un problema que estamos tratando de resolver un problema. Tal vez Ruben pueda ayudarme a recordar. Entonces estábamos tratando de hacer algo. Dame un segundo. Y sí, porque esperamos que la interfaz de usuario tenga que hacer algo. Así que estamos cambiando todo de un formulario simple a un paso a paso. Y estamos tratando de organizar nuestras reglas de acuerdo con el paso a paso porque primero mostraremos este paso y este paso tiene estos campos. Entonces, en algún momento nuestro dominio necesitaba saber que estábamos en el paso a paso. Pero no, no lo sabía. Entonces, la forma en que configuras tus eventos, entonces en realidad, le darás forma a la aplicación de acuerdo a cómo se desarrollen tus eventos. Entonces, el usuario, entonces tienes una entrada y luego el dominio ejecuta una acción y así sucesivamente. Entonces comienzas a seguir estas acciones, acciones, acciones, acciones. Porque si intentamos comenzar, si comenzamos a moldear nuestro dominio según cómo se ve, entonces será difícil cambiarlo de nuevo. Entonces, las reglas serán las mismas, porque estamos haciendo el formulario, tenemos una validación para un campo que es el mismo, no importa si este campo se muestra en un paso o en otro paso o no importa. No estoy seguro si puedo explicar de alguna manera esta pregunta o si la evité. Entonces, en su mayoría, tienes algo que incluso se hace en la arquitectura... Sí. Sí. Entonces, si defines los eventos, cualquier otra persona puede reaccionar a ellos. Si defines tu interfaz de usuario y tus herramientas, estás atrapado. Entonces, eso es lo que estamos tratando de resolver. Si definimos la forma en que funciona nuestro núcleo, independientemente... Independientemente, una de esas palabras. Elige la correcta. Puedes dar forma a la interfaz de usuario o cualquier otro servicio en torno a ellos. Entonces, esa es la idea. Así que sé agnóstico de lo que estás usando y construye el negocio sin importar lo que estés usando. Entonces, puede construir... Puede usar este núcleo en otros lugares. Tenemos este largo y complejo formulario de validación en el cliente, y simplemente puede tomar esta parte y compartirla en GraphQL, y puede evaluar la misma entrada. No sabe siquiera que tiene una interfaz de usuario. Así que solo necesita saber que algo está sucediendo, en esas cosas y sale. Entonces, puede compartir todo este núcleo en el cliente, y en GraphQL, por ejemplo, u otros usos. Esa es la idea. Diría que si tienes una capa de interfaz de usuario, debe ser completamente independiente de las demás capas. Y el estado X, ¿es una preocupación de la interfaz de usuario? Probablemente porque no estoy muy familiarizado con X state, pero creo que es una especie de cosa de Redux, la máquina de estado. Tu núcleo, tu dominio, básicamente es tu estado, en este caso. Entonces, lo que haremos aquí es tomar nuestro dominio, y la interfaz de usuario lo adaptará a un estado. Entonces, todo lo que tu interfaz de usuario sabrá es el dominio. Entonces, obtiene, okay, mi dominio tiene este estado en este momento. Y luego, el reductor tomará, de acuerdo con el evento que estamos tratando, como algo se cargó, algo falló, notificación del infierno, quién sabe. El reductor de tu X state o cualquier otro gestor de estado que uses, tomará este nuevo conjunto de información y adaptará el estado. Es por eso que llamo, en realidad, a un adaptador dentro de la interfaz de usuario. Porque toda tu entrada es el estado del dominio. Entonces, básicamente, ya tiene de alguna manera un gestor de estado, porque esto puede funcionar de forma independiente de la interfaz de usuario, solo puede hacer aquí un jQuery, volver a reaccionar a jQuery como si fuera JavaScript puro, puede hacer lo mismo. Entonces, tienes algo que tiene que tomar tu dominio, y de acuerdo con un evento que ocurra, tiene que dar forma al estado en caso de tener algún tipo de framework reactivo, o simplemente actualizar tu DOM directamente. Depende de tu estrategia en una interfaz de usuario. Entonces, estamos usando React, pero puedes usar lo que sea o incluso nada. Y facilita las pruebas inyectando todo. No tenemos pruebas en este framework, pero el hecho de que en realidad podemos inyectar todo, no necesitas simular todo. Entonces, simplemente puedes pasar una simulación o pasar lo que sea, por lo que no necesitas, por ejemplo, si quieres probar si algo se obtuvo, no necesitas representar algo, simplemente lo pruebas directamente, porque puede acceder a cada una de las capas y probarlo, necesitas probarlo. Porque algo que es muy común es que hacemos pruebas de integración testing a las pruebas unitarias. Entonces, representamos una aplicación completa para probar si algo está funcionando correctamente, o un componente de uso de representación para probar si se hizo algo. Entonces, aquí estamos evitando todo este trabajo adicional de representar cosas en las pruebas unitarias. Creo que es una pregunta muy buena.

Entonces, él está preguntando si el dominio es un lugar para los casos de uso. Sí, lo mostraré en un momento. No realmente, no los casos de uso, los casos de uso son esa aplicación, el dominio tiene las reglas que permiten o no los casos de uso, o dan forma a los casos de uso. Entonces, cada caso accederá al dominio y hará algo dependiendo de las reglas de tu dominio, pero la aplicación es la que tiene los casos de uso. Así que sí, todos lo veremos en un momento.

Déjame ver, hay algo más aquí que no he seguido. Entonces, si puedes ayudarme. Entonces, todo lo demás está bien. Así que tengo un dibujo, creo que es uno de los próximos que muestra esta situación de casos de uso. Veamos si es este. Sí, está bien. Así que esta es nuestra interfaz de usuario, hermosa. En nuestro caso, usamos React, pero como dije antes, puedes usar lo que quieras, literalmente hicimos la simulación de la consola. Así que tenemos todo igual, el usuario usa una terminal para construir el código y estaba funcionando. Así que simplemente cambiamos la forma en que le pedimos cosas al usuario y la aplicación estaba funcionando. Así que tenemos muchos usuarios. Puse muchos usuarios porque la aplicación puede funcionar de manera diferente según el usuario. Entonces, el usuario realmente usa la pantalla que el componente React para interactuar con nuestra aplicación es nuestra entrada a la aplicación. Entonces hace clic, desplaza, ve, carga, ¿cómo se llamaba? Los montajes, sí, los montajes y el componente, lo que quieras usar para desencadenar una interacción desde el lado del usuario.

Ahora, primero estamos en nuestro paso cero y paso uno, nuestro componente React está haciendo seguimiento, está verificando pruebas A/B, está mapeando datos. Está haciendo todo. Entonces un componente hace todo, crea una acción, envía esta acción, que será procesada por el reductor, el reductor toma esta acción, la mapea al estado, y luego React está escuchando el estado y hace su magia. Esto es lo que tenemos en el paso cero y uno. Pero queremos alejar todo. Así que ya hemos eliminado todas estas acciones de la pantalla y las hemos llevado a otro lugar, solo para hacer un poco más claro el cambio. Pero ¿qué pasa si aquí hacemos un desvío? En lugar de ir al reductor, enviamos esta acción, no esta acción, déjame corregir. Si redirigimos la intención del usuario, ni siquiera la intención del usuario, si simplemente elevamos lo que sucedió en el navegador y lo elevamos a otro lugar, como si alguien hiciera clic en un botón. Eso es todo lo que la pantalla tiene que hacer. Básicamente, eso es lo que hace un DOM de interfaz de usuario. Un clic, simplemente lo elevas. De acuerdo, alguien hizo clic aquí. Entonces, en lugar de hacer realmente el trabajo, solo digo, okay, alguien hizo clic en mí y lo envío a todos. Gracias por eso. Transmites esta intención de la interfaz de usuario. ¿De acuerdo? Y esto va al evento, por eso dije transmitir. Para aquellos que no saben qué es el publicador-suscriptor, la pantalla aquí está emitiendo un evento. Como UI, clic en UI, comienza a hacer clic. ¿De acuerdo? Algo así. Y luego el evento debe recibir esto y notificar a todos los suscriptores. Y uno de los suscriptores puede ser la aplicación. O no. Hay cosas que la interfaz de usuario hace que a la aplicación ni siquiera le importa. Por ejemplo, el seguimiento. El usuario ve la pantalla. La aplicación tal vez no necesite hacer nada pero los chicos de analítica, ellos necesitan saber que viste una pantalla. Entonces, verás a qué me refiero. Entonces, el usuario hizo clic allí y luego literalmente dice, Hice clic aquí y lo envío a todos los que están escuchando. Y tienes una aplicación con un caso de uso como Dave estaba preguntando. Entonces, okay, sí, te vi hacer clic aquí. Sé cómo manejar estas cosas así que lo haré, ¿sabes? Y puede que necesite algunas... Permíteme mover esto y otras cosas, por favor. Lo siento. Entonces, es posible que debas consultar el dominio porque hay algunas reglas o interfaces o algo que realmente necesitan consultar. Pero el dominio no hace nada. Hay muchas formas de ver DDD y muchos autores lo escriben en un lugar diferente pero lo que están haciendo aquí es, como nuestro dominio no hace nada, ¿de acuerdo? Es uno de los enfoques. Todo esto es aplicación. El dominio es solo el conjunto de reglas. Como qué hacer, cómo hacerlo, cuándo hacerlo, puedo hacerlo, como reglas. Digamos entonces, esas reglas pueden diferir según los usuarios, pueden diferir según la infraestructura, pueden diferir según muchas cosas. Puede tener políticas. Entonces, tienes una política para un usuario específico, tienes una política para algo específico, ¿de acuerdo? Depende de lo que estemos construyendo. Y okay, entonces ejecutas esta acción y luego, y luego, y luego, ¿de acuerdo? La aplicación dice que algo se hizo. Así que en realidad, la aplicación es la que hace las cosas. La aplicación u otros servicios. Luego, dije que se hizo porque el tiempo pasado aquí es muy importante. Algo se hizo, ¿de acuerdo? No es como una consulta, literalmente, algo se hizo, ¿verdad? Y vuelve aquí y, okay, algo se hizo y luego vuelve al reductor y el reductor hace estas cosas. Básicamente, solo estamos tutorizando. Antes, la pantalla hacía todo y luego reducía el tiempo, ¿de acuerdo? Ahora, la pantalla simplemente manifiesta la intención de hacer algo. Alguien lo hace y luego vuelve al mismo lugar. Y con esta estrategia, podríamos simplemente eliminar el evento plus y usar la aplicación directamente si quieres. Pero estamos usando un evento plus aquí porque podemos delegar cosas a otros lugares como analíticas.

No quiero que mi aplicación se encargue del seguimiento. Quiero que alguien específico que sepa cómo hacer seguimiento se encargue de ello. Así que mi aplicación hace la cantidad de casos que tiene que hacer, y puede delegar todas estas cosas a otras personas. Así que puedo configurar fácilmente un seguimiento sin interactuar con mi interfaz de usuario o cambiarla o cambiar mi aplicación o cambiar mi inicio de sesión o cambiar, lo que sea. Puedo comenzar a construir, me quemaré, microservicios dentro de mi aplicación, en mi cosa.

Entonces, en la misma, como una funcionalidad, como una funcionalidad que puede cargarse de forma independiente y ser completamente independiente de la aplicación. Puedo simplemente ponerla ahí. ¿Está habilitada mi funcionalidad? Sí, bien, entonces me suscribiré a esos eventos y haré cosas. Si la aplicación, si la funcionalidad ni siquiera está habilitada, bien, no haré nada, bien, vete. Lo mismo con, en nuestro caso, el audio. Moveremos todo el audio a un servicio específico. Cada vez que algo suceda, ahora lo reproducirás. Así que potencialmente podemos tocar el audio, incluso podemos ponerlo bajo una bandera de funcionalidad. Así que no quiero que el audio moleste a los usuarios, apágalo. Y se puede apagar el audio fácilmente en un solo lugar. Eliminar el código. Eliminar el código es un paso, eliminar el código. Todo esto está aislado, aislado. Prometo que puedo hablar mejor. De acuerdo, aislado. Y lo mismo para lo que quieras hacer. De acuerdo.

Preguntas. Diré que esto será un poco confuso. Déjame ver el chat. Vale, Ruben está fuera por un momento, pero volveremos. Hay una parte en particular que es muy confusa. Porque esto es lo que haremos en los próximos pasos. En realidad, refactorizaremos algunas cosas para seguir este flujo y agregaremos nuevas características para seguir este flujo. ¿Ivan? Sí, gracias. En cuanto al rendimiento, ¿este nuevo Shannon funcionará más rápido? Esto es, diré, en cuanto al rendimiento de la aplicación, ¿cuál es el rendimiento? Sí, siempre es un tema muy importante para preocuparse, pero esto es lo que el navegador está haciendo de todos modos. Así que estás haciendo... Esto será un problema de rendimiento si usas un Bus de Eventos en servicios backend a gran escala donde hay miles de eventos ocurriendo, pero en tu aplicación cliente, espero que no tengas miles de eventos ejecutándose. Esto es como si alguien hiciera clic y tienes cuatro suscriptores, cinco suscriptores, 20 suscriptores, incluso si son cien suscriptores, no debería ser un problema. Podría ser un problema aquí en tu reductor, por supuesto, porque si cada uno de ellos está desencadenando nuevos cambios a los que estás escuchando, es lo mismo o incluso peor con los hooks porque, ya sabes, estás... Sabes cómo funcionan los hooks. No encontré ningún problema de rendimiento. De hecho, encontré muchos beneficios porque cuando estábamos trabajando directamente en las pantallas, esperábamos a que los hooks hicieran cosas y a que se memorizaran las referencias y se usaran los estados. Y era muy difícil saber cuándo tenía que hacer algo. Y aquí, porque ninguno de los componentes tiene acceso al dominio, simplemente puedes emitir una combinación de eventos, si quieres. A veces hicimos cosas como, tenemos una situación en la que si el usuario cambia algo en el formulario, otras 20 cosas cambian. Vale. Y puede haber una sincronización. Así que en realidad podemos agrupar todos estos cambios y enviarlos en el mismo evento. Así que en lugar de 20 o más renderizaciones, tienes una. En cuanto al renderizado, esto puede optimizar realmente estas cosas. Pero si tu preocupación es la situación de suscripción emergente. No creo que haya un problema porque esta estrategia está utilizando muchos frameworks internos que no conocemos. ¿Cuál era? Creo, pero la próxima oportunidad está utilizando esta situación. Están utilizando esto internamente para comunicarse. Gracias. Suena genial. Y de esta manera, parece que podemos usar no solo una aplicación. Sí. Puedo usar varias aplicaciones React en la misma página. Sí, sí. Por ejemplo, algo que no hice, pero por ejemplo, una de las características es una animación Dyn. Estamos utilizando la misma aplicación React para esta animación, pero en realidad puedes agregar una nueva aplicación aquí y configurarla y simplemente ejecutarla como un verdadero portal o lo que quieras. Así que puedo comenzar a construir estas cosas de esta manera. Vale. Gracias. De acuerdo. Después de que todo esto se mueva de un lugar a otro y blah, blah, blah. Intentemos hacer un ejemplo. Así que vayamos al segundo paso. Y aquí hay un archivo de lectura. Te mostraré el archivo de lectura. Paso dos. Oh, bueno, debería mostrarte el código. Permíteme mostrar el código. Paso dos. Así que, oh sí, está bien, vete. No quiero que mis cambios desaparezcan. De acuerdo, paso dos. Y si echas un vistazo ahora, nuestras acciones de usuario son mucho más pequeñas. Correcto. Nuestra interfaz de usuario sigue siendo la misma porque ya estamos usando el hook. Pero lo cambié un poco, puedo mostrártelo en un momento. Entonces, aquí, como dijimos, cuando el usuario hace clic en el personaje, no hace nada, solo dice, está bien, el clic del personaje. Y te encuentras con este evento. ¿De acuerdo? Lo encontramos y alguien se encargará de ello. Y nuestra tarea aquí es hacer lo mismo con esto. Cuando el usuario hace clic en comenzar juego. Eso hará lo mismo, aún no está hecho. Así que esta es nuestra tarea. Algo que hicimos es que rompimos el audio. Así que no tendremos audio hasta el próximo paso. Así que tendremos que arreglar el audio en el próximo paso. Pero no nos preocupemos por el audio ahora mismo. Nuestro paso es conectar la acción de comenzar nuevo juego de la misma manera. Así que básicamente diremos, alguien hizo clic aquí.

Incluso podemos verlo aquí, decimos, UI, clic en el personaje, y aquí, aplicación, nuevos códigos cargados. Así que el código está hecho. Ya está listo para hacer algo. Está en el lugar equivocado, esto no es una aplicación. Esto es una interfaz de usuario. Cosas que debes saber aquí. Cosas importantes. Entonces, con el flujo directo que tomamos, se debe configurar. Muy bien. Entonces, nuestra aplicación de usuario, básicamente, tiene nuestra infraestructura de uso. Te mostraré qué es el uso de la infraestructura. Dije que la infraestructura se utilizará mucho y se está empezando a utilizar. El uso de la infraestructura básicamente tiene el propósito principal de hacer un solo giro de tu infraestructura, porque será la misma infraestructura para todas las aplicaciones. Así que lo pones en una referencia y solo lo creas una vez. ¿Qué es el conjunto de infraestructura? Así que creamos un bus. Esto es lo que estamos diciendo, como, diciendo. Entonces, el bus es, muéstrame el tipo. TypeScript. Muy bien, con un bus, puede encontrarse con un evento. Puedes suscribirte a un evento. Puede apagar un evento. Eso es todo. Hay algo nuevo en la versión tres, pero no estoy seguro, pero básicamente eso es todo. Tenemos un registrador. Tenemos nuestro agregador de búhos. Nuestro agregador de búhos tiene más cosas ahora. Así que realmente podemos hacer cosas en nuestro búho. Por ejemplo, el cálculo de puntos. Es una regla del dominio porque los puntos dependen del tiempo que tardes. Y si es una combinación o no, porque tiene un multiplicador. Así que esta es una regla específica del dominio. Así que lo movemos aquí, hacia el dominio. Donde pertenece, no allí por qué. Más cosas que movemos aquí, como establecer un tiempo de espera. Sí. Actualizar los códigos. Iniciar el tiempo de espera. Establecer el valor de ejecución, así que cuando el usuario intenta votar por un personaje. Comenzar un nuevo juego. Entonces, lo que tenemos que hacer cuando comenzamos un nuevo juego, tenemos que actualizar nuestros códigos, tenemos que actualizar, eso es la configuración. Muy bien. Cuando comienzas un nuevo juego, estás en la primera pregunta. Así que tienes que configurar estas cosas. Y los códigos son una cosa privada que se utiliza allí solo para mover el código activo al siguiente lugar.

¿Alguna pregunta? Sí. Sí, tengo una. ¿Qué significa? Agregador raíz. Quiero decir, ¿por qué lo llaman agregador raíz? Entonces, el agregador raíz debería ser el único punto de entrada a tu dominio. Porque, por ejemplo, si puedes acceder directamente a tu dominio a través de un código y cambiarlo, entonces no tendrás un estado consistente. Porque tu dominio... Entonces, debes tener una forma de cambiar tu dominio en un único punto. Si tienes, por ejemplo, la agregación de tus códigos, tus personajes, lo que sea que tengas allí. ¿Qué tienes aquí? Marca de tiempo. De acuerdo, no tenemos esto. Si vas directamente a los personajes, y puedes, bueno, podrías, si no los estás congelando. Estamos congelando el objeto. Pero si estás cambiando directamente la cosa, estás creando un comportamiento inesperado porque hay reglas aquí. Por ejemplo, cuando estableces un valor, hay varias cosas que debes hacer. Como actualizar el tiempo de llamada, e incluso la marca de tiempo actual. Así que si solo cambias la marca de tiempo aquí, tu dominio se corromperá porque no estás completando todos los pasos necesarios para cambiar realmente, para votar por el personaje. Por eso tenemos el agregador raíz, para ser el único punto en el que hacemos cosas. Entonces, si vamos a nuestro, te mostraré. Entonces, el nombre, agregador raíz significa en realidad, punto de entrada principal, algo así, o el recolector de todos los objetos del dominio. Es como, de acuerdo. Sí. Esto es lo que agrega. Sí. Podrías interactuar directamente con las otras entidades. Es altamente recomendado por el diseño orientado al dominio porque estamos creando consistencias. Si tienes que hacerlo, hazlo con mucha atención, ¿verdad? Porque en el pasado nos quemamos, si puedes. De acuerdo. Gracias por eso te mostraré por qué también tenemos esto. De acuerdo. Entonces se creó el agregador raíz. Este es nuestro dominio. Llamémoslo como nuestro punto de entrada a nuestro dominio. Y esto se compartirá en todos los eventos o los eventos que desencadenemos, lo tendrán. Así que tenemos este agregador raíz que básicamente es un decorador de bus que en cada evento que se emite enviaremos el agregador raíz porque, por ejemplo, ve a las acciones de uso, acciones de uso. Entonces, enviamos este personaje porque hacemos clic en él, necesitamos saber qué sucederá es que quien realmente se suscriba a esto, también obtendrá el agregador raíz, el agregador raíz. ¿Por qué? ¿Por qué? Empecemos con el más fácil. Por ejemplo, cuando la página está lista, enviaremos automáticamente el agregador raíz. Lo primero es porque confiamos en que el agregador raíz siempre estará ahí. Así que podemos proyectar o obtenerlos con la palabra correcta. Deberíamos hacer como getters, obtener información. Así que necesito saber en qué ronda estoy porque necesito hacer un seguimiento. Entonces, usan clic en nuevo juego y quieres hacer un seguimiento de análisis. De acuerdo. Y necesitan saber que estás jugando y estás en el archivo equivocado. Así que envías tu dominio a todos los eventos si necesitas extraer información para completar tu acción. Porque de lo contrario tendrías una carga muy compleja para los eventos y quieres que sea lo más simple posible porque debería ser responsabilidad de los suscriptores conocer el dominio y extraer datos de eso. Si tienes que preparar los datos cada vez que extraes un evento, entonces comenzarás a extraer datos en diferentes lugares y de una manera que las personas que están escuchando no necesitan. Y este es uno de los puntos aquí. Cuando encuentras un evento, aquí está la diferencia entre un patrón de observador y un patrón por suscriptor. Aquí, el emisor no tiene idea de quién está escuchando. De acuerdo, en los observadores, el observador sabe que alguien está allí. Aquí no tiene idea. ¿Es esto la difusión? ¿Como una radio? Estoy hablando, no tengo idea si estás escuchando. Por eso sostenemos el agregador raíz aquí para poder obtener los datos que necesitan. Si no pueden, es porque nuestro dominio no está completo. Y por ejemplo, aquí necesitamos enviar acceso. De acuerdo, así que decoramos nuestro evento de bus con esta información y con el registrador. ¿Por qué el registrador? Porque si revisamos aquí, de acuerdo, cada vez que hacemos algo, como aquí, sé lo que está sucediendo, lo siento, ¿puedo hacerlo más grande? Más más, más. Maldición, el equivocado, más. De acuerdo, así que cada vez que algo sucede en mi aplicación, puedo seguir fácilmente los eventos. Así que déjame refrescar. Entonces la página estaba lista y la aplicación se cargó de nuevo. De acuerdo, hago clic aquí, veo el clic de la interfaz de usuario y la aplicación evalúa la respuesta y así sucesivamente. Esto es solo para fines de depuración, es más fácil seguir lo que está sucediendo en la aplicación. Esto está inspirado en el patrón de simulación de consulta de comandos. Donde alguien desencadena una consulta de comando, alguien más hace un comando pero no está seguido por el libro porque es un poco demasiado en mi opinión. De acuerdo, ¿qué más estamos haciendo aquí? Entonces configuramos cosas. Por ejemplo, si quiero probar mis aplicaciones, el seguimiento ya no funciona. Así que este es solo un punto donde puedes configurar.

Por supuesto, si no configuras la aplicación, la aplicación no hace nada, por lo que sería inútil. Pero si por alguna razón, este no es el caso sino el audio que haremos a continuación, puedes condicionar si tu aplicación tendrá audio o no en un solo lugar. Así que tu infraestructura, de acuerdo a alguna condición de infraestructura, puedes lanzar tus servicios o no. ¿Aún confundido? Muy bien, entonces configuramos la infraestructura en nuestra aplicación de uso. Y luego están nuestras acciones de uso. Entonces, tus transacciones de audio son lo que estábamos trabajando antes, pero con la diferencia de que ahora son muy simples. De acuerdo, así nomás. Y aquí hay un truco. Esta es la parte que no me gusta pero en React no encontré una forma que lo haga simple. Así que si vamos a nuestro reductor, nuestro reductor está haciendo cosas según algunos eventos. ¿De acuerdo? Y si no sabe, simplemente devuelve lo que era antes. Pero estamos mapeando los eventos a acciones. Así que necesitamos decir que tenemos una lista de cosas que queremos que nuestro usuario pueda usar. Y queremos que nuestra interfaz de usuario esté escuchando. En realidad, podemos estar escuchándonos a nosotros mismos. Pero, de acuerdo. Entonces, lo que quiero decir es cuando uno de los servicios o cualquier otra cosa, aplicación, o cuando la aplicación en nuestro caso, hasta ahora, hace algo, ¿cómo debo React a eso? Sí, como cuando se cargó el juego. No, entonces la aplicación fue a cargar la aplicación, la fecha que necesitamos cargar. Así es como tenemos que unir los servicios y la interfaz de usuario, ¿de acuerdo? Entonces, aquí, si ves, así que vamos a todos los eventos y nos estamos suscribiendo. Entonces, cuando esto suceda, enviaré algo, ¿de acuerdo? Lo estamos metiendo en el bucle. Tal vez si muestro esto aquí. Así que estamos obteniendo esta acción para ir al recurso, así que estamos creando esta flecha. De lo contrario, la interfaz de usuario nunca repintará esto aquí, ¿de acuerdo? Entonces, si haces algo en nuestra aplicación que tu interfaz de usuario necesita saber, desafortunadamente, en esta solución que estamos estudiando hoy, necesitamos decírselo aquí, ¿de acuerdo? No es bonito. Sería bueno si pudieras hacer, como, lo siento, solo puedes hacer, sería bueno. No necesitas hacer nada más, solo esto, pero luego tu interfaz de usuario ejecutará el reductor en cosas que no le conciernen. Hay acciones en las que tu interfaz de usuario puede no estar interesada, y tendrás una renderización, una nueva renderización en este caso, sin motivo. Así que esto es por razones de rendimiento. Así que si no te importa el rendimiento, simplemente coloca un asterisco y tu interfaz de usuario intentará reducir todo. Por supuesto, no usará nada, porque no está aquí, pero esto causará una renderización en cada caso.

De acuerdo, ¿alguna pregunta? De acuerdo, casi hemos terminado. Bien, eso es todo. Luego enviamos acciones y el estado de vuelta. Nuestro contenedor es esas acciones que estaba usando antes y usa nuestro estado como lo estaba usando antes. Así que esto simplemente crea el acceso directo para nuestra herramienta profunda a nuestros servicios. Sí, te dejaré jugar. Iniciaré el temporizador, así que avísame si tienes alguna pregunta. Pero el objetivo de este paso es deshacernos de este código aquí, ¿de acuerdo? Así que tienes una aplicación de Friends que está aquí y nunca, sí, alguien te proporciona el caso de uso. Probablemente deberíamos mostrarte algo antes, así que. Lo siento, ¿puedes repetirlo? El propósito de este paso es deshacernos de esto, por ejemplo, en el momento, la interfaz de usuario todavía está, por ejemplo, obteniendo datos, haciéndolo, haciendo un seguimiento y emitiendo un evento con una respuesta de la acción, ¿de acuerdo? Así que queremos hacer algo como esto. Alguien, alguien tiene la intención de iniciar el juego de alguna manera, ¿de acuerdo? Y creo que está aquí, bien. Cuando el usuario hace clic en el diálogo, necesitamos hacer algo. Eso ya está hecho, esta parte. Configuración. Si ves nuestra configuración de nuestra aplicación, la tenemos aquí, así que estamos diciendo, cuando nuestra aplicación esté lista, que está aquí, crearemos un juego y emitiremos un evento, ¿de acuerdo? E incluso puedo hacerlo mejor. Entonces, la aplicación dice, cuando la página esté lista, crearé el juego. Básicamente, está obteniendo los personajes, los códigos y todo y configurándolo. Y está bien, la aplicación se cargó. Y el seguimiento está haciendo lo mismo. Cuando la aplicación esté lista, realizaré un seguimiento de la vista de página. Entonces puedes adjuntar varios servicios a la misma intención. De acuerdo, en este caso, solo tenemos dos aplicaciones en particular. Así que tenemos dos aplicaciones y seguimiento, pero comenzaremos con eso más adelante. La pista que dan al principio es construir la aplicación en torno al dominio y no los marcos y herramientas. Pero eso es precisamente, si echas un vistazo aquí, casi podemos ver, fue solo una consola. Pero como diría un propietario de producto, así que si actualizas, entonces la aplicación, la página se abrió y comenzamos el juego. De acuerdo, probablemente este evento no debería ser game-loaded, debería ser game-started. Así es como debería ser la descripción de una característica. Por ejemplo, y luego vas allí, cuando el usuario hace clic aquí, cuando el usuario hace clic en un personaje, validas la respuesta. Nuevamente, probablemente los nombres de los eventos no sean los mejores porque no tenía un propietario de producto para diseñar esto. De acuerdo, pero la idea es así, cuando el usuario hace clic, hacemos algo. Así es el flujo y estabas diciendo que muchas cosas se pueden hacer al mismo tiempo y se hacen y no están aquí. Probablemente eso es lo que estás preguntando, pero el seguimiento. Sí, tienes razón, podría ser como usar el usuario que está hablando de algo y eso es lo que estábamos haciendo. En otro lugar, intentamos actualizar algo y enviamos otra notificación a la manera inversa, como enviamos las notificaciones de la aplicación y podría ser como una recursión porque accidentalmente envío un mensaje y a lo que ya estoy suscrito y cómo hacerlo programáticamente para intentar resolverlo. Entonces, una pista sería cada vez que llames algo así. Entonces, si estás dentro de una suscripción y haces otra suscripción, esto es una señal de que algo se está volviendo extraño. Así que sigo intentando encadenar la suscripción dentro de las suscripciones, puedes enfrentar este problema. Utiliza las suscripciones encadenadas sabiamente porque luego será muy difícil de seguir, tienes razón. Pero eso es como una ayuda de devolución de llamada. No es muy diferente, es solo una forma de poner las cosas. Creo que tengo algo que ocultar aquí, pero ¿quieres ayudar? Sí, en realidad tenemos este ejemplo en nuestro código base, que es un evento que depende de otro evento. Y esto es simplemente porque nuestro código estaba mal hecho. Encadenar está bien, pero sí, como dijo Samal, puede ser complicado de entender y detenerlo después y así sucesivamente. Así que sí, hazlo de manera inteligente cuando necesites hacerlo. Sí, probablemente la conclusión de esto es que si tienes que encadenar, probablemente algo no estuvo bien diseñado porque no debería haber muchos casos en los que tengas que encadenar. Así que echa un vistazo detenido mientras encadenas los otros eventos. De acuerdo, gracias. Así que estoy unos 30 segundos tarde. De acuerdo, ¿cómo estuvo la ronda? ¿Todos pudieron terminar o guardar? Porque Denny fue el primero. Soy bastante nuevo en esto y creo que me gusta la experiencia de la VM hasta ahora, especialmente con los enums para los eventos. Eso fue genial. Tengo una pregunta, ¿esto es algo que está creciendo en la arquitectura? Creo que puedes encontrarlo en varios marcos como Angular o algo así, ¿o hay alguna plantilla de este tipo que se mantenga en algún lugar o solo es una pregunta sobre este tipo de género? No realmente, tengo un comentario interesante aquí en el archivo readme. DDD es un patrón orientado a los negocios. Por lo tanto, esto no es un patrón de software, pero estamos resolviendo problemas y desafíos empresariales. Entonces, ¿por qué no seguir la misma estrategia? Si hay plantillas para comenzar esto, no lo sé. Creamos esta plantilla porque se ajustaba a nuestras necesidades. Por ejemplo, puedes ir directamente omitiendo el evento plus y usar directamente la aplicación, pero luego perderás la oportunidad, no estamos cerca, pero será más difícil agregar nuevas características. Como el seguimiento, el audio, una función en una prueba, simplemente enchufar y usar. Pero si no te sientes cómodo con todos estos eventos yendo de aquí para allá, puedes hacer simplemente la aplicación normal y ejecutar cosas. Hablando de la plantilla, no lo sé. Es por eso que, en una de las respuestas anteriores, mencionaste que esto se usa en este tipo de arquitecturas utilizadas en Next.js, por ejemplo. Entonces me preguntaba cuál es la similitud, como el marco de Next.js utiliza este tipo de arquitectura o el propio código base de Next.js. Sí, el propio código base. Entonces, no estoy seguro si están usando DDD, pero cuando estaba buscando Leap para hacer la publicación y suscripción, estaba verificando si ya estábamos usando algo en nuestro código base porque no quería crear otro. Si ya tienes nuestras dependencias, úsalas. De lo contrario, crearé o buscaré algo que me ayude a crear el evento. Y descubrí que el Meet que estamos usando aquí era la dependencia de pares de Next.js. Entonces, de alguna manera, Next.js en su implementación está utilizando publicaciones para suscribirse al trabajo.

No es muy común usar publicaciones suscribir. De hecho, tengo dos enlaces aquí que puedo compartir. Sí, puede ser porque NextJS tiene esta funcionalidad interna donde quieres rastrear ciertos aspectos comerciales sobre nuestro uso. Sí, creo que sí. Así que compartí dos enlaces en el chat sobre el posible uso de publicar y suscribir. Tal vez pueda ayudarles a encontrar más formas de utilizar esta estrategia. Así que es una cosa, DDD es otra cosa. Así que usa las publicaciones suscribir para comunicarte pero son dos cosas diferentes.

Perfecto. Definitivamente recomendaré una plantilla junto con si puedes implementar algo de eso. Puedo compartir contigo la plantilla que puedo rastrear algo así. Gracias. ¿Cristian? Sí. ¿Puedo preguntarte si puedes ejecutar rápidamente, rápido, digamos a través del evento en el sentido del archivo de acción de uso. De acuerdo. Esto es muy claro. Admites un nuevo evento. De acuerdo. Muy probablemente interceptarás este evento en tu configuración superior. Correcto. De acuerdo. De acuerdo. Tienes una función para cargar un nuevo juego. De acuerdo. Porque creo que hice algo mal. Reutilicé el inicio del juego, iniciar nuevo juego o probablemente, de acuerdo, iniciar cargar nuevo juego. Ahora, ¿qué sucede dentro de cargar nuevo juego? De acuerdo. Mi pregunta aquí es, ¿necesitas devolver las cotizaciones para poder pasarlas al, quiero decir, el evento que originalmente estaba en la interfaz de usuario? ¿Por qué no? Esperaba que devolvieras de alguna manera las cotizaciones desde este método. Bueno, lo siento. Esa es una muy buena pregunta. Entonces, ¿por qué saliste a devolver las cotizaciones? Así que de alguna manera va en la misma dirección de algo que estaba explicando antes por qué estamos poniendo la ruta en todos los eventos. Porque si envías las cotizaciones aquí en esta carga útil, así, si usas la acción, esta acción, lo siento, esta función enviará las cotizaciones, esta función enviará las cotizaciones en los personajes. Esto envía el plátano, este enviará algo más. Así que estamos haciendo la carga útil demasiado dinámica. Esto significa que los consumidores del bus tendrán que saber, así que el caso, es muy bueno mostrarlo. Tendrán que saber, lo siento, tipos. Tendrán que saber y diferentes cargas útiles. Así que podrías enviarlo aquí. Podría enviarte las cotizaciones. No sé si este es el evento, pero podría enviar las cotizaciones, pero las cotizaciones ya están dentro de la ruta. Todo está ahí, así que simplifica. Todos leerán tu carga útil de la misma manera porque es el mismo dominio.

De acuerdo. Así que esto tiene mucho sentido. Pero por otro lado, tuve problemas en el archivo de configuración de la aplicación. Tuve un problema porque ¿cómo puedo especificar exactamente las cotizaciones aquí? Si pudieras configurar... De acuerdo. Probablemente no estabas esperando esa respuesta. Así que si haces esto, si no esperas, las cotizaciones no se cargarán en absoluto. No, no, no. Esperaba aquí que emitieras nuevas cotizaciones cargadas. Esperaba que tuviera una carga útil, pero creo que aún se necesita. Porque si agrego las cotizaciones, esa es la razón por la que devolví las cotizaciones desde el juego de carga. Así que lo que estamos diciendo es que esperábamos que proporcionaras las cotizaciones aquí. Sí, en su lugar. Porque de lo contrario, aparentemente parece diferente al código original. Podrías enviarlo. Pero... Pero lo que quieres decir es que si no envío una carga útil, de todos modos está en la ruta, que es automático. De acuerdo, esto no estaba claro. Sí. Entonces puedes enviarlo, incluso puedo ponerlo aquí como opcional si quieres anularlo por alguna razón. No, de acuerdo. Probablemente no me quedó claro. De acuerdo. Es muy, muy interesante preguntar. Gracias. Sí, ahora está mucho más claro. Gracias.

Muchas gracias. Y por cierto, muy ingeniosa, muy ingeniosa solución. Sí. Sí. Nos enfrentamos a este problema en el pasado, y por eso empezamos a ejecutarlo aquí. Sí, genial. Muchas gracias. ¿Alguna otra pregunta interesante?

Sí, tengo una pregunta. ¿Recomendarías separar las capas del hilo principal? ¿O alrededor? No lo sé. Eso está bien. En realidad, tenemos un problema muy interesante que ocurre en el dominio, pero aún no hemos encontrado la solución que se trata de redimensionar imágenes y cosas que serían muy interesantes si pudieras hacerlo allí. Pero sí, puedes, bueno, déjame volver aquí, dame un segundo. Porque la aplicación usa el dominio directamente, no, pero podría extraer la aplicación a un lugar diferente. Todo lo que podría estar en el servidor. No, tu configuración, en lugar de usar la aplicación, podría simplemente hacer una llamada al servidor. Así que esto podría ser, como en 1995, donde no había JavaScript, y vamos al backend. Sí, es posible. Así que puede ejecutarse en un worker diferente. Worker, por ejemplo. Podría ser. Y ahora, porque tenemos la referencia a los objetos, debería estar bien. No veo ningún problema. Si tienes, ¿qué estás tratando de resolver? ¿Tratar de mejorar el rendimiento? Sí, estaba pensando en cálculos costosos o algo que podría bloquear la interfaz de usuario. Sí, esto te permitirá hacerlo fácilmente porque no estamos tocando nada, especialmente la aplicación. Todo está inyectado. Debería estar bien. Pero hasta ahora nunca hemos tenido ese problema. Así que lo veo perfectamente factible. Gracias por la respuesta.

Muy bien, ups, quedan 10 minutos. Muy bien, sigamos adelante. Así que espero que les haya gustado esta exploración de cómo viajar en eventos de un lugar a otro. Ahora, no hay audio. Si intentas reproducir tu aplicación, el audio está completamente roto. Eso es triste. Así que intentaremos configurar el audio. Bastante independiente. Si vamos a nuestro paso tres. Probablemente algunos de ustedes ya estén en el paso tres. No quiero desechar mi trabajo. Aquí, revisen el paso tres. ¿Qué agregar? Así que tendremos que tomar nuestro archivo de acciones de uso. Nuevamente, usar nuestro archivo de acciones de uso y tenemos todo este código de comentarios de uso aquí en la parte inferior que antes estaba en la acción y lo eliminamos. Y queremos convertirlo en un fragmento de código separado, completamente aislado. Así que lo configuraremos. No puedo crear el problema de configuración que no existe. Entonces, el valor de infraestructura de origen es un archivo que OK. Así que eso que ya estamos tratando de ejecutar aquí. Michael también tiene esta queja. Ya estamos tratando de establecer un valor. Simplemente enviamos el bus y él tiene que hacer todo lo demás. Christian, tienes la mano levantada algo. Y el muy bueno sí. Tienes que suscribirte a cuando se valida una respuesta y cuando el juego haya terminado. ¿Lo tienes? No sé si te diste cuenta de que aquí tenemos un código que es. ¿Qué estás comiendo? Eso solo funciona para Mortal Kombat. Para Mortal Kombat, por cierto. Y se fue. ¿Qué pasó? Parece una progresión, pero puedes hacerlo. De acuerdo, bien. No está ahí. Entonces, la cosa es, si cuando el juego termina, eso es por qué tenemos esta suscripción. Cuando el juego ha terminado y todas mis respuestas son correctas, reproduciré el audio solo para Mortal Kombat victoria impecable. Así que hay un audio ahí que tienes que reproducir. ¿Alguna pregunta? Sí, perdón, estaba un poco distraído, ¿puedes decir las condiciones bajo las cuales reproducimos el Mortal Kombat 5? OK, así que la primera es como el usuario, que al final de la aplicación, mientras es una respuesta, deberíamos reproducir sí, no o el personaje debería reproducir nosotros no de acuerdo con la prueba AB. El código está en algún lugar aquí para eso. Ubicación. Sí. Así que si es Mortal Kombat

Viene de ahí. Lo haré aquí. Lo siento, si no quieres seguir. No me hagas reír. Después de 7, lucha todo el tiempo. Si no es... pero está más allá de eso, ¿a qué estás esperando? El momento perfecto. Sí, definitivamente. ¿Alguien quiere compartir el progreso? De acuerdo, compartiré. Entonces, tenemos tiempo para la animación. Muy bien, así que lo que he hecho aquí, como preguntaba Kristen, no tenemos esta información de ronda en el agregado raíz. Entonces, nuestro dominio no lo sabe y debería saberlo. Entonces, lo que hemos hecho es crear una nueva propiedad en el agregado de red, se llama 'round' y se inicia como sea que comencemos para cero. Y luego cada vez que tenemos un nuevo juego, incremento la ronda, ¿verdad? ¿Y qué tenemos aquí? El agregado de red tiene el nombre de celda, se concentra en el estado Nu, se incrementa cada vez que lo iniciamos. Y en la configuración del audio, agregamos este 'onGameFinish', haremos un anuncio de fin de juego. Y esperé 2 segundos, porque de lo contrario se superpondrá con los otros antes, así que para darle algo de tiempo al otro chico para hablar, y estoy mostrando el código equivocado. Y... escribí el anuncio, lo siento. Sí, eso es exactamente correcto. Exactamente, así que cada vez que codifiques, cuando tengas nuevos datos, gritaré. Entonces, básicamente, cuando inicio, cuando creo un nuevo juego, o cuando hago clic en un nuevo juego. Tal vez debería poner aquí algunos comentarios, o renombrar esos eventos. Y así obtendré mi ronda de mi raíz. Y si la ronda es menor que 7, reproduciré el número incorrecto, de lo contrario iré a la versión de lucha. ¿Hasta dónde llegaron ustedes? ¿Cuál fue la parte más difícil de entender aquí? ¿Alguien quiere compartir algunas dificultades?

Igual que antes. Estaba tratando de hacer eso, es decir, agregar la ronda en algún lugar de la raíz, pero luego, no estaba... Al principio, no sabía cómo agregar el más uno. Así que no estaba seguro si tenía que agregarlo aquí o usarlo en algunos otros eventos, pero esto debería ser suficiente, creo. Sí. Y por cierto, creo que tienes un error en tu código 63. Porque la ronda es un número, no... Sí. Mientras que los archivos de audio se llaman según las letras que los componen, como audio uno. ¿Lo son? No. De acuerdo. Vi que hay un error. De acuerdo. Lo siento por eso. Malentendido. De acuerdo. Genial. Gracias por compartir. Entonces veamos qué tenemos que hacer a continuación. Crear un lobby. ¿Cuál es esta situación de lobby? Así que pasemos al paso cinco.

Lo siento, Samuel. También quiero agregar algunos pensamientos sobre... Para mí, la parte más difícil fue entender si debía crear un nuevo evento exactamente para este paso o si debía usar uno existente. Así que decidí usar esto, también el evento de interfaz de usuario para iniciar rápidamente un nuevo juego. Pero no sé. No estoy seguro porque no es como la implementación o el evento de lanzamiento para este evento. No sé cómo explicarlo. Sí, entiendo. Tal vez dije al principio aquí, juego.cargado. Probablemente esto no sea lo que dirá un propietario del producto. Probablemente dirá aplicación juego creado, ¿de acuerdo? Tal vez aquí tenga más sentido, sí. Y aquí también, nuevos códigos cargados. Tal vez no, tal vez como nuevo juego comenzado, ¿de acuerdo? Sí, veo que la nomenclatura de las cosas probablemente sea lo más importante en la ingeniería de software. Entonces, si alineamos estas cosas con nuestro gerente de producto, propietario del producto, probablemente esos nombres serán más claros para nosotros porque los desarrolladores tendemos a hacer este tipo de cosas y luego no nos entendemos a nosotros mismos. Entonces, si todos hablan el mismo idioma, será más fácil. Probablemente por eso tenemos este problema de tratar de averiguar dónde poner esto. Sí, por eso preguntaba antes sobre los casos de uso y el almacenamiento en el dominio porque entiendo que no es para la parte principal, pero como propietario del producto, él puede crear algún archivo con los casos de uso en relación con ellos. Entonces, tal vez podamos simplemente poner una constante aquí y usarlos. Y será como nuevas diapositivas si no sabemos qué tipo de, no sé un momento. Perdí mi pensamiento. De acuerdo, no importa. Dije que el propietario del producto puede describir esos eventos y podemos seguirlos fácilmente si tenemos esos casos. Sí, creo que será mejor si alguien que no sea un desarrollador los crea porque intentamos crearlos como, no sé, sí, usé algo aquí, etc., como React pensando. Exactamente. No subestimes a tus propietarios de productos. Saben lo que están haciendo. Gracias por compartir. Lo siento, ¿puedo preguntarte algo que no es específico de esto, sino más general? ¿Hay alguna forma, en tu opinión o en tu experiencia, de usar eventos tipados en lugar de cadenas para que sea fácil navegar al código, por ejemplo? En lugar de cadenas.

En realidad, son eventos tipados porque los definimos aquí. Entonces, si intentas llamar a este evento con algo que no existe, fallará. Así que si intentas obtener eso. Estoy de acuerdo con eso, pero digamos que quiero ver dónde se define answerValidate, tengo que buscar en el código, hacer una búsqueda de cadena en el código. ¿Crees que hay alguna forma o tal vez la pregunta es si crees que puede ser beneficioso tener objetos o enumeraciones? Puede funcionar en primer lugar o no? E incluso podemos enviar un símbolo aquí que te permitirá cancelar la suscripción al evento. Puedes enviar lo que quieras. Incluso podemos enviar una función como identificador. Pero no estoy seguro de si esto es más fácil de identificar. Para ser honesto, trabajé en un proyecto en el pasado en el que estaban usando funciones como el ID del evento. E incluso pueden aprovechar eso y ejecutarlo al mismo tiempo. Así que fue bastante confuso, no me gustó. Por eso esta vez decidí usar cadenas porque podemos crear espaciado de nombres aquí, o también podemos crearlo con objetos. No tengo una opinión fuerte. Si alguien tiene una forma inteligente, por favor compártela conmigo más tarde. Muy interesado en mejorar. Solo curioso, gracias. De nada.

Así que se nos acaba el tiempo, pero todavía tenemos tiempo para terminar uno más. Esta es probablemente la característica más útil que necesita este juego. Eso es el lobby. Vamos al lobby. Porque en el momento en que usamos nuestra aplicación, el juego comienza de inmediato. Y esto es un poco molesto. Así que agregaremos un diálogo que le pida al usuario que comience. Lo mismo. Vamos al paso cinco. Y tenemos algunas instrucciones allí también. Así que ahí está el contenido para poner en el diálogo. Puede ser creativo, pero proporciono algunas sugerencias. Y tenemos un ejemplo del diálogo ya en el contenedor del juego, TXX. Así que necesitaremos otro diálogo que se mostrará solo si el juego no ha comenzado. Y cuando haya un clic, en realidad comenzaremos. Ahora mismo el juego se está iniciando automáticamente y está listo. Así que necesitamos cambiar algunas cosas para hacer que comience y esté listo y que comience solo cuando el usuario haga clic en ese botón. Y creo que debería ser el último ejercicio. Desafortunadamente, la animación fue la más genial, pero no creo que podamos hacerlo. Entonces, esto aquí, lo que sugeriré es cambiar algunos de los eventos porque ya no tienen mucho sentido, especialmente desde la interfaz de usuario. Esperaba que el evento existente Start Game Click pudiera hacer el truco que estás sugiriendo usar. Sí, todavía podemos usarlo. Pero entonces el nombre no tiene mucho sentido. Entonces, lo que hice, lo dividí en... Necesitaremos uno nuevo, porque es un nuevo inicio, de esa manera tenemos una nueva interacción desde la interfaz de usuario. Pero luego entraremos en conflicto un poco con lo que tenemos. Permítanme mostrar el archivo predeterminado. Escribiré hecho. Sí, así que tengo un play again y start playing. Creo que tiene más sentido. ¿Alguien logró mostrar el diálogo incluso si no cambia el flujo? Oh, genial. Entonces, ¿quieres compartir cuál fue tu solución? Estaba tratando de cargar el texto en ese momento. Denis, ¿cuál fue tu solución? No lo sé porque fue un poco complicado. No eliminé ningún evento antiguo, solo agregué. Cambié el atributo de estado inicial, lo que se llama GameOver, a algo como atributo de hundimiento, cuyo nombre es solo estado de diálogo. El estado de diálogo tiene tres estados diferentes. Como estado de bienvenida, fin del juego o estado de juego y oculto. Depende de la carga de datos, envío la información, pero debería ser un estado de bienvenida, y este truco funciona. De acuerdo. Así que estamos usando lo mismo. Lo que estás deteniendo la aplicación en la pantalla. Correcto. De acuerdo, puedo compartir lo que he publicado más o menos. Realmente me gustaría saberlo. Debería ser bastante similar a lo que está en el Git. Muchas gracias por tu aporte. De acuerdo, gracias.

De acuerdo. Así que entre diferentes direcciones aquí, pero la que encontré con la que realmente estoy de acuerdo con todo lo que ella dijo, es que va a ser un cambio para algo, creo que ella va a tomar un poco más de tiempo. Veamos. Veamos, si me equivoqué al poner esto en mis pensamientos, vamos de ronda en ronda. Y luego, ya sabes, para los impuestos, entramos en cualquier cosa, yo estaba haciendo el paso extra que tenía que hacer durante mucho tiempo. No era parte de esta tarea. Y entonces, cuando haces clic en comenzar de nuevo, esto ya no está en una página. Está en comenzar un juego. Y con lo que estaba haciendo antes. Y tenemos este nuevo aquí, en realidad, es lo mismo con cada nombre. Exactamente. Entonces, cuando juegas de nuevo, se está cargando. Básicamente, lo estaba mezclando con los data. Así que el juego ya no comienza en la página lista, sino cuando el usuario realmente hace clic en algo. Más cosas, así que para obtener las mismas cosas, voy a rastrear el clic del juego en un evento diferente. Y tomé un enfoque diferente de ellos, literalmente creé un nuevo diálogo, que muestro solo cuando tengo códigos. Así que asumo que si tengo códigos, el juego está listo para comenzar. Tal vez sea complicado. Tal vez no. Dime qué piensas. Esta fue la solución.

De acuerdo. Así que teníamos dos desafíos más para ti, pero puedes completarlos fuera de línea y puedes chasquear los dedos para obtener ayuda. Uno de ellos era hacer la animación de Dan. Como mostré con el caballero de Mortal Kombat que viene desde el costado haciendo un salto, incluso puedes tener una ilustración aquí para el paso seis. Y... oops, ese fue el último. Entonces, ¿cuál es el enlace a esta animación? Así que cuando tienes una combinación en la parte superior de los hijos, tenemos a este caballero que viene. Y en caso de una versión de control de la red real, puedes intentar hacerlo. Solo te doy un consejo para que sea un poco más difícil. Tal vez esta ruta, llamada anteriormente paso siete, este código puede ayudar. Así que es hora de enviarlos al cambio. Puedes intentar ver si es una combinación o no porque el código anterior lo dirá, esto es una combinación. Así que solo puedes react. Algo más que me gustaría desafiarte es algo bastante simple. Entonces, el paso siete es el último. Ese nombre es estúpido. No, nadie sabe quién es Joffe's Francis en el juego, el programa de televisión, todos lo conocen como Joey. Entonces, la función se usa como abreviatura. Es muy simple, solo ve a la respuesta y cambia el valor en el personaje, espero que aún te diviertas con esto después de la masterclass. Pero desafortunadamente, ahora no es el momento de terminar estos dos pasos. Espero que puedas terminarlos por ti mismo. Solo contáctanos si necesitas ayuda para terminarlos. ¿Alguna pregunta? Solo quiero decir que fue muy, muy interesante. Gracias. Diría que es algo ligeramente diferente a lo que estamos acostumbrados a hacer en las aplicaciones. Sí, porque lo siento, mi perro. Sí, porque, ya sabes, es un principio común dividir la interfaz de usuario y la lógica del negocio, pero a veces, especialmente en JavaScript, no sabes cómo hacerlo. Así que esto es, uh, muy bueno para dar pistas. Sí, puedo agregar algo más. Desde que comencé en el front-end, solía. He recibido muchos comentarios así. Esto es lógica del negocio. No debería estar aquí, pero nunca me dijeron dónde debería estar. Así que se quedó allí hasta hace muy poco. Sí, esto es algo muy común de hacer fuera del mundo del front-end. Desarrollo front-end. Esto es todo desarrollo de software. Así que deberíamos seguir utilizando los mismos patrones y los mismos principios. Definitivamente. Entonces, ¿cómo comenzarás a modelar tu dominio? ¿Cómo, bueno, realmente crees que vale la pena mover las cosas fuera de la Y para todas las aplicaciones o solo para aplicaciones grandes o para ninguna en absoluto? En realidad, intenté evitar este sueño de dominio design. Lo que sucede es que, separar para NT y App y otras cosas. Pero en este descanso, Redux hace mucho trabajo por ti e intenté cambiarlo más como tu forma de hacer las cosas. Y en nuestra empresa tenemos una aplicación realmente grande, Redux era muy lento. Y después de cambiarlo a PubSub, su performance aumentó. Así que muchas gracias, porque, para mí, esta práctica, porque intentamos implementarla a nuestra manera. Sabemos que no hay una bala de plata para todo. Y por eso, cuando compartes tu conocimiento ahora, sé un poco más. Sobre cómo podemos hacerlo, cómo podemos implementarlo en nuestros servicios. Así que gracias de nuevo. De nada. De acuerdo. Eso es todo lo que tengo, probablemente esperaba terminar, pero, sí. Eso está bien. Realmente lo disfruté. Muchas gracias por tu atención y espero verte pronto.