S3 E4: Mi primer proyecto con Next

[00:00:08] Estás escuchando My typeof Radio, un podcast de desarrollo web en español. Somos Axel Martínez, Arturo Mosqueda. Comenzamos.

[00:00:35] Buenos días, buenas tardes, buenas noches, bienvenida, bienvenido a esta nueva instancia de My Typeof Radio. Esta instancia va a ser un tipo anécdota, contarte algo que me pasó. Y bueno, como ya viste en el título, es acerca de una migración y mi primer proyecto con Next3S. Entonces, bueno, había una app que estaba creada en Angular 12, por ahí. Ya existe la app y la están usando y todo.

[00:01:02] Y, al mismo tiempo, la empresa en donde estoy está comenzando a crear un design system. A lo mejor podemos usar una instancia más específica acerca de los design systems, sería buenísimo. Ok, te voy dando un poquito más de contexto acerca del proyecto. Yo llegué como una especie de apoyo para este desarrollo y cuando llegué, pues ya había algunas cosas en marcha. La aplicación como tal de Angular 12 que te contaba antes, pues eso que ya existe, ya está, digamos, en producción o lo que sea.

[00:01:29] Y bueno, existía también este repo de Next14, ya creado, ya había un pipeline en el... Había un ambiente de deployment remoto. Y bueno, a esta parte no le he movido demasiado todavía, ¿no? Esto ya es como haces el merge a develop y él solito hace todo. Entonces aquí no le he movido demasiado. También tiene una mezcla de CSS con Tailwind y... Bueno, pues eso es, así está. Aprovecharon Tailwind en este caso, pero también crearon como archivitos de CSS para diferentes partes. Entonces, bueno, estaba ahí la mezcolanza.

[00:01:59] En caso, pues yo procuré casi casi que no tocar lo que ya estaba, porque si ya funciona, pues no lo toques, ¿no? Pero me llamó la atención que está como mezclado. No sé si es algo común desde mi perspectiva y por lo que he podido ver un poco, se supone que no. Es más, como que utilices y aproveches Tailwind para todo en general. Pero en fin, esto es lo que hay, ¿no? Como dicen por ahí. Ya existía un diseño en Figma. Entonces, algunas de las pantallas pues ya habían sido creadas por otros devs. Y...

[00:02:27] Pero en este caso, pues eran más como a crear el componente, el layout de cómo se vería. Que si traía unos cards y no sé qué. Que si la tabla va aquí. Pero en realidad, pues no estaba conectado a nada. O sea, no había datos reales ni nada por el estilo. Entonces, bueno. Digamos que los datos para poder mostrar el componente pues estaban como le decimos hardcodeados. O sea, el dato en duro ahí en el mismo archivo. Y no se lo estaba trayendo de ninguna otra parte. Y...

[00:02:56] Bueno, eso es más como... Más o menos el... El panorama al que yo llegué, ¿no? Voy a platicarte un poquito acerca de esto de las versiones. Porque, bueno, Next, al momento en que estamos grabando este episodio, pues ya tiene la versión 15, si no me equivoco. Y este proyecto pues estaba en la 14 todavía. Hablar de también que, pues no pude. Justamente no pude actualizar la versión. Yo dije, bueno, pues ya aprovechando que ya estamos.

[00:03:24] A lo mejor puedo crear un merge request para actualizar de Next 14 a 15 y etc. Pero no pude. No me fue sencillo. Ni siquiera pude actualizar el miner. O sea, de la 14, 20 y no sé qué. A la que seguía. No pude hacer eso. La verdad es que no la intenté demasiado tampoco. Pero como no fue así tan directo, dije, pues mejor no le movemos. Una parte de la toma de decisiones aquí, pues tenía que ver con el tiempo disponible y la urgencia que había para entregar.

[00:03:54] Entonces, bueno, a lo mejor es una historia que ya conoces si estás en el área. Y pues eso es lo que llega a suceder, ¿no? Entonces, bueno, no se podía cambiar a Next 15. Aquí también mencionar que había algunas diferentes librerías, ¿no? Por ejemplo, la de autenticación. Aquí tuve que buscar una combinación adecuada, digamos, para hacer que funcionara la migración. Básicamente, lo que terminé haciendo fue duplicar y traer el código de la aplicación original para hacer el setup de autenticación.

[00:04:22] Y que el backend, que en realidad es como un servicio en la nube, pues llegara a pensar, entre comillas, que se trataba de la misma app, ¿no? Aquí, pues, puede copiar varios archivos. Al final, como yo entiendo que sucedió, es que terminé recreando a mano el resultado de ciertos comandos que se ejecutan desde una utilería de consola, que es provista por el servicio este que te digo que nos proporciona la autenticación.

[00:04:49] Pero como ya lo habían usado, digamos, ya lo habían creado para la app de Angular, entonces, pues, yo me fui trayendo cositas, cositas de ahí, archivos y pedacitos de código, y poniéndolos en esta app de Next. De manera que, para el backend de autenticación, para el servicio este que tenemos, pues fuera como transparente, digamos, decir que es esta misma aplicación la que ya se está conectando, a la que ya estaba configurada y todo, pues ya no habría problemas con la autenticación.

[00:05:15] Así que, pues digamos que eso nos ahorró un poquito de tiempo para no tener que volver a configurar cosas y así, ¿no? Crear una nueva app del otro lado, que por cierto, pues a esa parte yo no tengo acceso. Y, pues fue una de las razones, ¿no? Por las que hubo que hacerlo de esta forma. Entonces, algo que me había ayudado a mí como para hacerme una idea, es que cuando yo estuve trabajando en una startup, utilizábamos igual un servicio muy similar y, pues ahí como que yo ya tenía una idea así como de,

[00:05:44] pues a lo mejor lo que está sucediendo del otro lado es algo como esto y esto, y por eso requiero estos archivos aquí y aquí, y por eso, no sé, esta variable de entorno con este nombre, etcétera, etcétera. Entonces, bueno, por lo menos para este ambiente de dev ya veremos después cómo es lo de llevar la producción, pero por lo menos para hacer esta parte como del desarrollo y podernos seguir moviendo hacia adelante, pues ya había quedado cubierto eso, ¿no? Entonces, sí, de la autenticación, pues eso fue de lo primerito que me empecé a meter.

[00:06:13] Esta app tiene otra parte donde también se inicia sesión y se crean, o sea, se obtienen datos del user de un software que se llama Tableau. Entonces, bueno, ya había medio escuchado un poquito, pero nunca había realmente como hecho nada con Tableau o interactuado de alguna forma. Entonces, bueno, te voy a contar un poquito más acerca de eso en un ratito, ¿va? Bueno, platicarte más o menos la cronología de cómo sucedió y algunos detalles técnicos. Así que, bueno, si no eres una persona demasiado técnica, a lo mejor te aburre un poco.

[00:06:43] Y si sí, a lo mejor algo de aquí pues te sirve, te ayuda para darte alguna idea. Y también, ¿por qué no?, decirme en qué me equivoqué yo, en qué podría mejorar o qué cosas podrían haber sido diferentes de las decisiones que tomé. Y si tienes por ahí algún consejo para mí, bienvenido. Porque, bueno, como ya dije, no conozco demasiado The Next todavía, ¿no? En fin, déjame seguirte contando.

[00:07:11] Bueno, entonces, la pantalla del login, como te digo, ya existía, digamos, la implementación del CSS y que CSS y que CSS y que CSS y que CSS y que CSS y los dos paneles y no sé qué. Bueno, pero pues todavía había que conectarle a este servicio que te digo para la autenticación. Entonces, hay una librería que es provista por este servicio que te proporciona toda la UI, ¿no?

[00:07:31] Te da el formulario con su cajita para el username, para el password, un link por si se te olvidó el password como usuario y cosas del estilo, ¿no? Las notificaciones o los mensajitos de error cuando hay un problema, la autenticación. Todo eso ya viene por esta librería que ya está integrada dentro de este servicio de autenticación. Entonces, pues había que, lo mismo, traerla e implementarla. Y, bueno, ahí empezamos.

[00:07:56] Además de lo que te contaba de este login con este third party, también teníamos que implementar la parte de, bueno, ahora ve y busca los datos de Tableau que son relacionados con este user que es del servicio de autenticación, ¿no? Entonces, bueno, ahí hubo que ir. Fue de las primeras cosas que hice. Fue ir y buscar en el código de Angular cómo estaba hecho, qué cosas se requerían para poderse traer los datos, etcétera, en qué momento se hacía y todo.

[00:08:22] Entonces, bueno, a lo largo de todo el proyecto hubo mucho a lo que yo le llamé ingeniería a la reversa, reverse engineering, para poder averiguar qué estaba haciendo la otra app, de qué se trataba y luego implementarlo de este lado. En fin, ya que dijimos del login de Tableau y que me traje mucha lógica de allá como de Angular y luego la traté de implementar acá,

[00:08:44] ahora necesitaba como de las pantallas que ya existían, pues ahora sí llenarles los datos con algo más real, ¿no? Que no fuera algo hardcoded. Bueno, y lo primero en lo que pensé fue en el trabajo anterior estábamos utilizando React Query, que ahora se llama TAN Stack Query. Y me pareció una solución muy elegante y muy práctica también. Me pareció que tenía todo el sentido del mundo, la manera en la que se utiliza. Entonces dije, bueno, pues vamos a ponerla acá también.

[00:09:14] Entonces en Angular tienen los servicios y de ahí van sacando todos los endpoints y no sé qué, ¿no? En React Query lo que tienes son queries que vas alimentando con la respuesta que obtienes del endpoint. Y entonces React Query o TAN Stack Query se encarga de darte, digamos, de la caja. Te da caching y un montón de otras cosas interesantes.

[00:09:41] Que luego si quieren podemos platicar más de eso en otra instancia dedicada. El punto es que, bueno, con esto lo que hacíamos era, o lo que hicimos, fue crear como esta capa de datos para poder estar interactuando con la API, que es una RESTful API. Entonces, bueno, lo que hice fue crear algunos hooks para envolver estas queries. Y entonces lo que estamos utilizando en el lado, digamos, de la UI es todo lo que me devuelve el hook

[00:10:09] en vez de poner la query directamente ahí. Un poco técnico como dije, pero más o menos espero darte la idea de cómo está. Entonces una query envuelta en un hook y este hook, pues es el que se utiliza en la UI. Luego, como TAN Stack Query te permite hacer uso de cualquier solución que tú prefieras para hacer las llamadas. O sea, puedes usar fetch o puedes usar librerías específicas. Yo me traje Axios.

[00:10:34] Axios es una librería que ya había usado antes y no sé si sigue siendo como muy, muy común utilizarla. Pero a mí me parecía como poderosa lo suficiente y también útil, ¿no? Para lo que yo quería. El punto que quería yo tomar de Axios era poder crear un interceptor para meterle unos valores en los headers, que son los que pedía la RESTful API, que siempre tuviera este campo, este campo y este campo, ¿no?

[00:11:02] Entonces, bueno, eso tenía más sentido para mí si lo creaba una instancia de Axios y luego la compartía en mis diferentes queries, las que fuera necesitando, o sea, en mis diferentes hooks. Entonces, así fue. Lo hicimos de esa forma. Y bueno, ahora ya tenemos los headers siempre y tenemos las llamadas al API básicamente iguales todas, ¿no? Dependiendo de cada endpoint distinto, los puts, los gets, los posts, etc., pues ya van dependiendo de cada hook.

[00:11:27] Entonces, ya estaban las peticiones, estaban devolviendo los datos correctos, podía mostrarlos en la pantalla. Entonces, mi primer enfoque fue, pues conectar ahora sí estos datos con la pantalla que te digo que ya existía, ¿no? Que ya habían creado con los datos hardcodeados. A veces pecamos un poco de pensar que si no está hecho como yo lo haría, hay que reescribirlo todo. O sea, esto se va. Y lo hacemos así de esta otra forma. Y a veces a lo mejor tenemos razón. El código que está ahí no está bien.

[00:11:55] Pero cuando estamos cortos de tiempo, a lo mejor el approach de no tocar lo que ya funciona, aunque esté algo así como que con pincitas y no tocarlo y seguir moviéndonos hacia adelante, ¿no? Como dije antes, este fue mi razonamiento en cierta medida dentro del código. Y pues lo mejor que se me ocurrió fue agregar todos, ir agregando todos por toda la aplicación que ya existía.

[00:12:21] Y decir, ok, aquí tal vez necesitamos, no sé, abstraer en otro componente. Aquí tal vez necesitamos separarlo y hacer esta lógica aquí y esta otra lógica allá. O todo investigar si esta forma es la mejor o así. No, entonces varios todos. Tengo ya creo que llegué a los cientos de todos por ahí. No sé, tal vez es demasiado, pero sí, agregar unos to-dos para no perderme, para dejar una especie como de historia de donde me fui moviendo.

[00:12:52] Y bueno, para el futuro, ¿no? Ya sea el futuro yo o algún otro que llegue al proyecto y que encuentre todas estas pistas, ¿no? Como a lo mejor en qué podría trabajar o qué podría mejorar. Entonces, ya que conecté todos estos datos, la pantalla ya estaba entre comillas viva. Pues bueno, ya, ya entregué la primer pantalla, ¿no? Hay que seguirse moviendo. Y la que siguió, pues tenía algo que ver con Tableau. Y Tableau, básicamente es software que te permite crear visualizaciones a partir de ciertos datos de entrada.

[00:13:20] Y ya que tienes tus visualizaciones, ya las puedes compartir. En este caso, en particular, pues por medio de un iframe. Y este iframe, pues es algo que queríamos embeber en nuestra aplicación. Y bueno, colocar ahí las visualizaciones, ¿no? Entonces, en la app original, en la app de Angular, se hacían muchas cosas a mano. Y había varios tipos de datos. Any, porque bueno, Angular utiliza TypeScript por default. Y las anotaciones del código también tenían como any, ¿no? Por todos lados.

[00:13:49] Entonces, uno de mis objetivos era no permitir que esto fuera como tan común. Y buscar alguna alternativa para que pudiéramos proporcionar los types correctos. Y bueno, que pudiéramos irnos guiando de eso también al mismo tiempo. Porque cuando estás creando tu código y tienes los tipos disponibles, pues es más fácil también implementar, ¿no? Entonces, bueno, ahí me fui como por un rabbit hole. Me fui como por este caminito siguiendo pistas.

[00:14:16] Y tratando de ver cómo podía implementar diferente la parte de Tableau. Entonces, ahí sí, digamos que pasé un buen rato. Pero bueno, como dije, leí mucho. Busqué una versión adecuada. Igual, como dije antes, buscar las versiones para el server de Tableau al que nos estamos conectando. Y tratar, ¿no? De que nos pudiéramos traer algo que nos funcionara. Que nos diera los tipos y que además, pues pudiéramos embeber esta vista de Tableau. Ya instalé la versión compatible. Creé un componentito de React.

[00:14:45] Para envolver esta lógica que me traje del otro lado. Y bueno, tratar de seguir moviéndonos, ¿no? Eso es lo que pensé. Y pensé que te iba a contar como esa parte y ya, ¿no? Pero la verdad es que sí pasé mucho, mucho tiempo tratando de que funcionara correctamente. Tuve que hacer varias cosas a prueba y error para que todo funcionara. Traté de que fuera responsivo. También de que el iframe, no sé, intentara cargar más de una vez. Porque eso me pasó en diferentes ocasiones.

[00:15:13] El código de este componente se iba haciendo como más complejo y más feo, digamos. Y bueno, en algún punto también traté de agregar este... como mensajitos, ¿no? Notificaciones pequeñas de decir, ah, estoy conectando a Tableau. Estoy cargando el iframe. Estoy listo. Algo salió mal con el iframe. Y etc. Este tipo de mensajitos. Pero no me salió. Tuve, pues, varios inconvenientes con esta parte.

[00:15:45] Y... Al final, algo que ya terminó de quitarme las ganas de seguir fue que... No puedes hacer como un try-catch de cuando estás trayéndote el iframe y luego que él mismo te diga... O sea, la librería esta te diga, ah, algo salió mal con el iframe. No lo pude traer, no lo puedo instanciar, lo que sea. No puedo traer los datos. Y... Y pues ya, ¿no? O sea, tengo el error. No hay manera de hacer eso. No sé por qué. Tableau no expone estos errores. Y entonces, pues, no puedes hacer el...

[00:16:13] Este que te digo, try-catch del error o... O hacer... Básicamente nada, ¿no? Simplemente no vas a tener iframe y pues ni modo. Esa va a ser la experiencia de tu usuario. Entonces, bueno, a lo mejor aquí hay algo, otra cosa que se puede hacer. Pero... De momento, pues, no. No he encontrado todavía, ¿no? Al final, el componente sí se quedó con un código, pues, muy fácil de leer. En realidad se quedó con un componente súper, súper ligero. Muy sencillito. Pero, pues, con un par de todos, ¿no? Acerca de esto, aparte del responsive.

[00:16:40] Acerca de la experiencia que yo hubiera preferido darle al usuario. De poder saber lo que estaba pasando antes de que cargara su iframe. O por qué no había cargado. Y... Bueno, pues así se quedó, ¿no? Y es otra de las decisiones de, bueno, hay que seguir, hay que seguir. Entonces, bueno, algo un poco más ya acerca de Next. Empezar porque yo nunca lo había usado realmente. Había, pues, siempre, ¿no? He escuchado algo, visto algún video por aquí y por allá. Tenía alguna idea de su funcionamiento.

[00:17:08] Pero, pues, nunca construí algo con él hasta esta vez. Entonces, el primer paso fue, pues, ir a la documentación. Leer todo lo que pudiera en el menor tiempo que pudiera. Para poder familiarizarme con los conceptos, la filosofía de la tecnología en general. Empaparme, como decimos, lo más que pudiera. Para poder aprovechar el framework y hacer, pues, las cosas entre comillas a la manera de Next, ¿no? No tratar de meter mis propias ideas. Y obligar al framework a hacer cosas, pues, para lo que no está hecho.

[00:17:38] Esa era como mi preocupación en el momento. Entonces, esto incluyó ver alguno que otro video de YouTube. Particularmente, por ejemplo, de las rutas paralelas y cosas así. Te cuento un poquito más de eso en un momento. Sí, al respecto de algún concepto interesante que me pareció, pues, bien ver algún video o leer un poco más, un blog post así. Y, bueno, como un dato curioso, una notita que dejé por aquí. Es que aún hoy sigo buscando cómo hacer cosas en Noxt 14 en vez de Next. O sea, con U en vez de con E. Porque, pues, no sé, la costumbre.

[00:18:08] No porque tenga miles de proyectos en Noxt, pero, pues, es un poco, no sé, no sé. La memoria muscular o algo que siempre escribo Noxt en vez de Next. Lo cual, pues, solo me pareció interesante por cuando menos contarte. Y, bueno, ya medio entendiendo cómo funciona, por ejemplo, el routing. Y basado en el diseño que tenía de Figma, pues decidí que quería agregar, en este caso, deep linking en la aplicación. Te cuento rapidísimo.

[00:18:34] Los deep links son enlaces que dirigen a los usuarios a una página específica de una aplicación desde cualquier lugar. Básicamente eso. Si en una de las pantallas, por ejemplo, que teníamos tres tabs y además una de esas, una de las pantallas con tabs, tenía breadcrumbs. Así que mi idea, pues, era agregar soporte para que al cambiar de tab, la URL del navegador reflejara este estado nuevo.

[00:18:57] Y además, como te sigues adentrando en el contenido de la tab que tiene breadcrumbs, pues también tu URL te vaya diciendo, ¿no? En el navegador. Ah, bueno, estás en esta pantalla. Estás en esa pantalla. En la segunda tab, por ejemplo. Y de la segunda tab te metiste, no sé, tres niveles en los breadcrumbs. Y entonces, pues, de esta forma ya puedes tomar la URL y compartirla con otro user.

[00:19:23] Puedes hacer un bookmark del estado en el que estás, del punto en el que estás de la aplicación. Y, pues, es más fácil regresar a él, ¿no? Y ya con esto, te decía, aprendí esto de las rutas paralelas, aprendí que hay un archivo page, un archivo layout, un archivo default. Y luego me tomó un poquito también poner todo en su lugar porque, por ejemplo, al recargar la página me mandaba a un not found, a un 404, ¿no? Y era así como, ¿y por qué? Pero sí está aquí.

[00:19:52] Y ya, estas cosas, ¿no? Crear las redirecciones para que siempre escogiera alguna de las tabs y todas estas cosas, pues, las fui. Y viendo así como casi que sobre la marcha. Eso estuvo padre porque después, pues, teníamos otro par de pantallas en las que teníamos también navegación con tabs. Y era un poco más fácil implementarlo porque ya teníamos como la referencia de cómo hacerlo en la pantalla anterior, ¿no? Y luego tenemos las notificaciones. Para los famosos toast messages, las cajitas que aparecen, no sé, en una esquinita.

[00:20:22] Después de que algo sucede, confirmar al usuario que algo fue exitoso o que fue un error, etcétera. Aquí rápidamente te cuento, creé un hook que expusiera diferentes tipos de notificaciones. Entonces, puedes tener la de success, la de error, warning, info, como te decía. Y lanzarlas a partir de este hook. Entonces, dentro del layout poníamos, ponemos un arreglo y estamos haciendo un map de ese arreglo. Y es el que vamos modificando con este hook.

[00:20:52] Y le vamos diciendo, ah, ahora entró una notificación de error, ahora entró una notificación de éxito, success. Y entonces, pues este arreglo va solito, va mostrando los diferentes toast messages, ¿no? En la pantalla. Entonces, bueno, aquí aprendí un poquito más acerca del context provider y cómo se implementa aquí en Next, que creo que no es muy diferente de cómo se usa en una aplicación de React normal. Entonces, bueno, esa parte también quedó ya implementada, ¿no? Algo similar sucedió con los diálogos.

[00:21:19] El componente en sí, pues viene de la librería, pero no hay nada de lógica para lanzarlo como tal. Solo es como, pues ahí está. Y tienes variables para controlar si se ve o si no se ve. Pero era todo. Entonces, bueno, también aquí creamos un context provider con un respectivo hook para diferentes diálogos y ya. Luego fuimos como refactorizando para poder reutilizar también los diálogos. Y creamos, no sé, uno de confirmación, etcétera, para que se pudiera, pues en primera ver todo igual.

[00:21:47] Y en segunda, que fuera más fácil implementarlo, ¿no? Y fuera más mantenible. En ese punto ya tenía ayuda de otros compañeros que llegaron también al proyecto. Entonces, bueno, ya fue un esfuerzo conjunto, ¿no? No fue una persona nada más. Platicarte rápido de los forms también, los formularios. Que, bueno, en casi cualquier aplicación que hagas vas a encontrarlos. Y al principio fueron formularios hechos a mano.

[00:22:13] O sea, era, pues, controlar el estado de forma manual con diferentes variables. Dice, el use state, etcétera. Todo eso como que conectarlo con los elementos de HTML. Pero con el tiempo a mí me quedó esta espina de probar una librería específica, ¿no? Encontré React Form Hook. Y, bueno, que simplifica la implementación de manera considerable, en mi opinión. Y también hizo que el código, pues, fuera más fácil de mantener.

[00:22:44] Incluso en formularios que realmente no son tan complejos. Porque la aplicación tampoco era como grandísima. En nuestro caso hubo que convertir algunas fechas, por ejemplo, en timestamps. Mostrar condicionalmente partes del form. Y validar cosas como muy simples, podrás decir. Pero, pues, al final la validar. Entonces, para mí esto amerito el uso de la librería. Y lo que yo creo que fue una buena decisión. Traerla porque, bueno, como dije. Es un poco más fácil de leer. Al tratar de hacer el mantenimiento del app. Y, bueno, también sí simplificó.

[00:23:14] Esta parte que te decía, ¿no? De si mostrar o no pedacitos del formulario. Vamos a ver si es verdad que realmente fue una buena decisión. Y, como te dije, pues, no eran formularios tan complejos. Pero yo creo que sí lo valía. Entonces, luego tenemos algo a lo que le puse aquí. Multidata. Como, a ver si lo puedo explicar bien. Es un poquito complicado de transmitir, tal vez. Pero voy a intentarlo. Dependiendo del tipo de user. Puedas tener acceso a los datos de más de una entidad.

[00:23:42] Entonces, si tenemos un drop down. Imagínatelo como arriba, a la derecha. No sé. En la parte de una especie de toolbar. Si cambias de selección ahí, en un drop down. Los datos que ves en la pantalla. En ese momento tendrían que cambiar. Y ser actualizados para la nueva entidad que seleccionaste en el drop down. Ojalá que me haya explicado. La app original simplemente recargaba toda la página. Y se le olvidaba todo, ¿no? O sea, si estabas en la cuarta entrada del menú.

[00:24:11] En el segundo tab de ahí. Dentro del tercer nivel del breadcrumb. Pues, ni modo. Tenías que regresar como a mano, ¿no? Y hacer los clics necesarios para volver a estar ahí. Para tu nueva entidad. Entonces, bueno. Eso aún no me encantaba. Y lo que buscábamos, pues, era mejorar la experiencia del usuario, ¿no? No solamente como que se viera nueva la app. Y que se viera bonita. Sino que además, pues, realmente reflejara una mejora en la experiencia del user. Pero bueno. Entonces, para poder hacer eso.

[00:24:41] En realidad fue algo muy sencillo. Como ya estábamos usando tan stack. Y como ya te había contado que la envolvimos en hooks cada query. Todos dependen de un key. Y con esto determinan. Y deciden. Vaya. Cuando encuentran la parte en la que estás pidiendo datos. Tan stack query. Dice. Ok. Está aquí. Que me pasaste. Ya tiene datos. Ya los había ido a buscar. Entonces, te lo voy a pasar del cache. Y en nuestro caso. Pues, lo que nos servía.

[00:25:11] Era ir cambiando este ID. De la query. Y decirle. Ok. Ahora vas a buscar datos para esta nueva entidad. Entonces, fue realmente. Como muy rápido para nosotros. Solamente ir agregando el ID. En donde no hubiera. Para decirle. Ah, bueno. Estos datos son de esta entidad en particular. Entonces, cada vez que el usuario iba a la parte de arriba. Y seleccionaba una entidad nueva. En el drop down. Pues, ahora sí ya podía ver los datos nuevos. Y entonces, fue realmente.

[00:25:40] Realmente muy sencilla esa parte. Ojalá que me haya explicado. Porque esa parte. A lo mejor de solamente escucharla. No debe ser muy sencillo. Pero bueno. Luego vino la parte de los guards. Para el routing. O sea. Si el user tiene un cierto rol. Entonces puede entrar a esta pantalla. Y si no. Pues no. Puede ver solamente ciertas. No sé. La segunda tab. De esta pantalla. Como había dicho antes. Entonces. Para poder hacer eso. Tuvimos que enfrentar estos guards.

[00:26:10] Y al principio lo hicimos del lado del cliente. Lo hice de manera que. Con puros redirects. Y leyendo un archivito. Que otro compañero había creado. Que es el routes. Punto 10. Donde pasa ya un arreglito. Con todas las diferentes pads. Y las rutas. Y no sé qué. Pues ahí buscar. ¿No? Si este rol en específico. Era. Estaba autorizado. Para ver la página. Pero algo que no me encantaba. Pues era que. Habiéndolo hecho del lado del cliente. El browser.

[00:26:39] Iba a mostrar. Como un flashazo. De la UI. Algo así. Como que. Mira. Esto es lo que podrías ver. Si tuvieras permiso. Pero. Como no tienes. Se va. Y pues eso no me gustaba. Entonces. Pues seguí investigando un poco. Y encontré que existe algo llamado middleware. En Next3. Entonces. Lo que hace el middleware. Hasta donde yo entiendo. Y como yo lo entendí. Es. Que. Ejecuta código del lado del server. Antes de terminar de hacer el render. De tu página. De tu componente. Que está.

[00:27:09] A punto de ser mostrado en el browser. Y puedes. Como middleware. Puedes poner cosas ahí. En medio. Para. Para antes de que eso suceda. No. Entonces en este caso. Pues es el momento justo. En donde se puede implementar la parte de los. Guards. Para decirle. Ok. Si es este usuario. O más bien. Si tiene este rol. Estás en una de estas. Rutas. En las que si tiene acceso. Pues déjalo pasar. Y si no. Regrésalo a. A cierto lugar. Entonces bueno. Ahí podrías implementar cualquier otro tipo de cosa. Algún mensaje. Algún.

[00:27:39] No sé. De esta forma. Pues ya evitamos. La parte del. Del flashazo. De decir. Mira. Aquí está la UI. Pero no la puede ser. Así que me voy a la otra ruta. Bueno. Y otra cosa importante también. Era tener una sola. Una sola. Fuente de verdad. Source of Truth. Que. Te decía. Pues hay un archivo routes. Y entonces ahí vamos a buscar. Cuáles de las rutas. En. En particular. Tienen acceso para este rol. Y si sí. Pues te mando. Si no. No. Otra forma de hacerlo. Pues era. En cada.

[00:28:09] Que fue como dice al principio. En cada página. Que quisieras proteger. Agregabas. Una especie de guard. Que dijera. Ok. Voy a hacer el render. Si. El user. Tiene. El rol. Y si no. Regreso. Un null. O. Algún redirect. O lo que sea. Pero entonces. Al agregar. Además. De lo que conté antes. Al agregar. Para cada ruta. Este guard. Tenías que hacerlo. En la ruta específica. Donde querías. Guardarlo. Eso implicaba. Que tenías que ir al archivo correcto.

[00:28:38] Dentro de la estructura de archivos. Y. Bueno. Esto. Para mí. No era como. Óptimo. Lo mejor. Pues. Estén. En mi opinión. En el archivo de routes. La especificación. Como dije antes. En una sola. Fuente de verdad. De forma que. Al mantener la aplicación. Pues. Todo lo que tengas que cambiar. Es. Este archivo de routes. Y no ir al sistema de archivos. E ir buscando. En cada ruta. Pues. Lo que necesitas cambiar. En fin. Eso fue.

[00:29:07] Como. Bien rápido. Acerca de las rutas. Y los guards. Para. El acceso por roles. Y finalmente. Digamos en este. Muy muy técnico. Resumen. De lo que. De lo que está sucediendo. Con esta app. Es el testing. Obviamente. Como todo urgía. Para ayer. No hicimos testing. Mientras. Íbamos creando la aplicación. Que. Bueno. Para mí. Pues. Si era importante. Al menos dejar. Algún indicio. De que lo intentamos hacer. Fue. Fue así. Yo sé que Jest. Es muy popular. Y casi casi. Que la opción.

[00:29:37] Por default. Para agregar. Tests. En react. Pero. No hace mucho. O. A lo mejor. Si. Ya la verdad. No. Tengo bien la nación del tiempo. Que salió. Vtest. Vtest. Es una alternativa. Especialmente. Basada en bit. Y que es compatible. Con la API de Jest. Entonces. Dije. Bueno. Por experimentar. Más que otra cosa. Porque no integramos Vtest. Y vemos que anda. ¿No? A la vez. Pues también. Trajimos. React Testing Library. Y. Bueno. De aquí. Decir que la extensión. Para VS Code. Es muy buena.

[00:30:06] Hace que sea muy cómodo. Escribir los tests. Y bueno. También seguirles la pista. ¿No? Porque. Pues. Partes de tu editor. Se convierten en pedacitos. De. Vtest. Y te va a decir. Ah mira. Aquí hay un panelcito. Con todos los tests. Y este test. Lo puedes correr. O este test. Falló dentro de tu suite. Cosas así. Están ahí unos iconitos. Marcados. Creo que lo mismo. Existe para Jest. Y bueno. Hablando de eso. Hay que decir que. La API. De los tests. Que puedes escribir. Con Vtest. Es compatible. Con Jest. Entonces.

[00:30:36] Prácticamente. Estás escribiendo lo mismo. Solamente yo quería ver. Pues. Como era. Esta parte de configurarlo. Y en especial. Ver. Si. En Next. Se podía traer. Se podía traer Vtest. Porque bueno. Vtest. Como ya dije. Que está basado en VIT. VIT no es lo que se utiliza. En Next. Y se utilizan como otra infraestructura. Para poder levantar tu proyecto. Y etc. Ahorita platico de eso un poco. Lo único. Que no me termina de convencer. Es que los tests. Que estoy corriendo. Se están tardando. Pues más o menos.

[00:31:06] Un tiempo. En ejecutar. Más bien. Como en. Como en levantar el entorno. De test. Y luego. Ya cuando ejecuta cada uno. Pues si es rápido. Pero. No sé. No sé si es algo que tengo que configurar. Es algo normal. O así es. Siempre. Pero. Bueno. Ahí está. También contarte que. Por ahora estoy. En los primeros pasos. De la implementación de MSW. Mock Service Worker. Si no me equivoco. Y bueno. Esto sirve para interceptar. Las llamadas a los endpoints. En nuestro caso. De la RESTful API. Pero. En general.

[00:31:35] También puede atrapar. Llamadas a GraphQL. Cosas así. Como dije. Estoy empezando. Aunque por un momento. Parecía como que no se iba a poder. Que no había. Como compatibilidad con Next. Logré hacer que. Si funcionara con VTest. En Next. Y bueno. Pues ahora estoy en eso. Tratando de. Hacer que las llamadas. Que llegan. Se contesten de cierta forma. Para que bueno. Puedas tener tus test confiables. Que siempre sea. Sea la misma respuesta. Si llegáramos a tener la oportunidad. Todavía de agregar. Agregar algo como Playwright. Sería buenísimo. Es algo que me interesa aprender también. Y bueno. Que no he utilizado antes.

[00:32:05] Así que. Meterlo por ahí. En la parte del testing. Sería. Sería interesante. Y sería padre para mí. Te voy a contar algunas. Cuantas cositas. Acerca de la experiencia en general. Y. Bueno. Podemos. Podemos ir. Terminando. Entonces. Específicamente con Next. Si te digo la verdad. No me encantó. La parte de tener que esperar. A que se compilara la ruta. Sobre la que estás trabajando. En modo dev. Obviamente. Cuando menos incómodo. Y además. Puede pasar algo frustrante.

[00:32:35] No sé si hay algo que se pueda hacer aquí. O si esta es la experiencia normal. Pero. Algo que. Si noté. Es que. No genera mucha confianza. Si estás mostrando a alguien tu pantalla. Y por cualquier razón. Acabas de reiniciar tu. Tu ambiente de desarrollo. Y bueno. Quieres mostrarle la ruta. En la que estás trabajando. Lo que sea. Y no sucede nada. Entre comillas. Por un rato. Necesitas explicarles. ¿No? Como. Es que. Está compilando. Y. Como estoy en modo dev. Y acabo de reiniciar mi. O sea. Es un rollo. No debería.

[00:33:05] En mi opinión. Ser un tema del que hablemos. En estos tiempos. Que corren. Hoy en día. ¿No? Pero bueno. Eso. Eso como. Como un punto por ahí. La documentación en general. Si me sacó de. Varios apuros. Como dije antes. Pues fue de lo primero que fui a buscar. He podido entender. Más o menos. De lo que se tratan las cosas. Los conceptos. Y así. Algo que. Si me gustó también. Es que. Puedes cambiar. Entre versiones. También. O sea. De la documentación. Pues decir. Ah bueno. No estoy usando la 15. Que es la última. Estoy usando 14.

[00:33:35] Y además. Por ahora. Tienen estos dos conceptos. Del pages router. Y el app router. Entonces. Bueno. Bien bien. No sé qué significa. Solo sé que pages. Puedes crear una carpetita. Pages. Y de ahí va. Tomando un. Una estructura de archivos. Para generar las rutas. O puedes utilizar toda la. Toda la carpeta. Como app. Para que él solito. Determine. Dependiendo del nombre de tus archivos. Y de tus carpetas. Etcétera. Cuáles son.

[00:34:05] Cuáles son las rutas. Entonces. Bueno. Lo que decías. De la documentación. Puedes escoger. Si estás utilizando. La versión 14. 15. Y si de esas versiones. Estás utilizando. Pages router. O app router. Etcétera. Y la documentación. Pues en teoría. O al menos. En mi experiencia. Pues si. Te va diciendo. Los detalles específicos. Para cada versión. Y para cada. Tipo de. De routing. Que estás haciendo. Entonces bueno. Eso. Eso me pareció muy bien. Hubo un par de circunstancias. En las que. La integración con Next. Así lo digo. Entre comillas. O sea.

[00:34:35] Como meter. Algo a Next. Otra librería externa. Me costó más. Trabajo del que yo esperaba. Porque. Parecía como que Next. No se llevaba bien. Con la librería. Como dije antes. Lo de MSW. Por ejemplo. Y otras cosas. Por ahí. A lo mejor. Es una impresión. Errónea que yo tengo. Pero. El sentimiento. De que había que. Como buscar la forma. Y tratar de hacer algo. No sé. Distinto. Para que algo muy específico. Funcionara con el framework. Yo sentía como que estaba perdiendo.

[00:35:05] Más tiempo del que. Me hubiera gustado. A lo mejor. Esto es normal. Y es común. Para. Pues diferentes frameworks. Con diferentes librerías. Porque. Obviamente. Pues el ecosistema. Es gigantesco. Pero bueno. Volviendo a mi experiencia. Pues no. No fue muy. Muy agradable. Que digamos. Algo que confirmé. Respecto a lo del ecosistema. Pues es. Eso no. Esta moneda de dos caras. Del ecosistema de React. Tienes. Por un lado. Muchas librerías. Componentes. Tutoriales. Blog posts. Videos.

[00:35:35] De cómo implementar algo. Y pues eso es muy útil. Cuando te estás haciendo. A la idea. ¿No? Del concepto en general. Que quieres implementar. Pero al haber tantas formas. De hacer una sola cosa. Siempre me quedaba. Como la desconfianza. De que mi solución. Fuera la adecuada. Entonces. No sé. Esa parte. Me dejó un poquito. Intranquilo. Para decirlo de alguna forma. Aunque bueno. Como dije. Son diferentes formas. De solucionarlo. Y. Esta idea. De que al final. Es javascript. A lo mejor. También da un poco. De confianza. ¿No?

[00:36:05] Al final. Porque es bueno. Si es solo javascript. En este caso. Era un proyecto de typescript. Pero. Para el caso. Es lo mismo. Para este punto. En saber. Que iba a funcionar. De esta forma. Pues. Era suficiente. Y como dije antes. Había que seguirse moviendo. Entonces bueno. Ya como otro dato curioso. Si quieres. Usé mucho. Más copilot. En este proyecto. Y. Te he de contar. Que ha mejorado bastante. Desde las primeras veces. Que interactué. Y que de hecho. Desinstalé. Por completo. Cada vez es mejor. Entendiendo el contexto. De las conversaciones. Porque bueno. Ahora hay un chat. También.

[00:36:34] Que toma el código existente. Como referencia. Para tener resultados. Más precisos. Eso me agrada. O sea. Le puedes. Directamente pasar. El código. Yo uso sobre todo el chat. Creo que la. La integración en línea. O sea. Inline. Del código. Del editor. No me encanta. Pero la parte. De poder conversar. Con la AI. Y decirle. Estoy haciendo esto. Quiero que funcione. Quiero que esta parte funcione. Y así. En general. Me daba. Buenas. Indicaciones.

[00:37:04] Había otras veces. En las que. Pues de plano. Me daba. Una respuesta. Con una API. Que ni siquiera. Tenía nada que ver. Con la librería. Que yo estaba usando. O a lo mejor era. Pero otra versión distinta. Entonces. Los métodos. No se llaman igual. O ya no tienen. Los mismos argumentos. Etcétera. Y bueno. Eso. Pues me. Sacaba un poco. Del camino. Porque no podía seguir avanzando. Tenía que averiguar primero. Si me estaba. Como diciendo la verdad. Este chat. Y después. Por no implementar mi solución. Pero en general. En general. Fue una experiencia. Ya agradable.

[00:37:34] Yo creo que podemos platicar más. De Copilot. Y etcétera. Otras. Otros. Entornos. En alguna otra instancia. Pero bueno. En este punto. Pues. No me quejo. Porque. Es algo que está pagando la empresa. Y yo no tengo que. Poner de mi. De mi bolsa. ¿No? Para aprovecharlo. En este caso. Y para experimentarlo. La verdad es que después de este proyecto. Ya para ir cerrando. Me he sentido muy bien. Conmigo mismo. Y la capacidad que tengo. Para tomar. Ciertas decisiones. Para priorizar. E incluso un poquito de esto. De delegar el trabajo.

[00:38:04] Ya te decía. Llegaron dos compañeros. Y bueno. Y ahora que vamos a hacer. Bueno. Pues a lo mejor esta parte. Y ahora a ti te toca esta otra. En lo que yo hago tal y tal. ¿No? Entonces. Esa parte. Fue interesante. Algo que debo decir. Es que ha sido extremadamente crucial. Que tengo compañeros muy capaces. Y que son muy listos. Son muy inteligentes. Puedo trabajar con ellos en equipo. Sin ningún problema. Ya llevamos varios meses. Pues prácticamente. Desde que llegué a la empresa. Hemos sido compañeros. Y ha sido. Ha sido muy muy bueno. Trabajar con ellos. Entonces. Sí. Cuéntame. Cuéntame. Si algo de lo que platiqué.

[00:38:34] Te resultó interesante. Y en particular. No sé. Quieres saber un poco más. Acerca de alguna de las tecnologías. Que mencioné. No solo de cómo la utilizamos. Sino. En general. De cómo se usa. Con qué se come. Y etc. Ya sabes que para eso. Tenemos nuestras instancias. De qué es. Y. Algo que me encantaría. Es traer pues. Invitados expertos. ¿No? En maintainers por ejemplo. De las diferentes tecnologías. Gente que. Este trabajando en estos proyectos. Para que pues nos cuenten más detalles. ¿No? De estas librerías.

[00:39:03] De estos proyectos. Si conoces a alguien. Pues avísale. Oye. Hay alguien por allá. Que te podría. Dar un poquito de plataforma. Para contar un poco más. Del proyecto. ¿No? Entonces voy a procurar. Yo voy a procurar hacerlo. Por mi cuenta. He estado yendo por algunas librerías. De open source. Y buscando. Indicios. De que las personas. Hablan español. Y me los estoy tratando de contactar. ¿No? Entonces bueno. Eso como invitación también. Para que si me estás escuchando. Y. Eres parte de alguna de estas librerías. O tienes un proyecto.

[00:39:32] Que nos quieres compartir. Aquí está. Los micrófonos abiertos. Para venir y contarnos. Va que va. Entonces pues ahí está. Mi primer proyecto con Next. Cuéntame. Qué es lo que te parece. Entre las decisiones. Medio rápidas. Que te conté. Qué tomé. En con cuál estás de acuerdo. Con cuál. A lo mejor no. Y si tienes por ahí algún consejo. Para seguir. Mejorando. Sería buenísimo poder escucharte. Creo que eso es todo. Ahora sí. Muchísimas gracias por acompañarme. Y nos escuchamos. Nos vemos. En la próxima instancia.

[00:40:04] Bye.