Abracadabra: La Red Desaparecida

Estoy muy emocionado de estar aquí, y tengo mucho que compartir con ustedes, así que estoy encantado de que no tengamos que hacer esto. Acabamos de hacer eso. Así que vamos a entrar directamente en la hora del cuento.

Cuando recién comenzaba en el desarrollo de software, tuve una pasantía en una empresa llamada Domo, y construimos una aplicación que era una aplicación de inteligencia empresarial. Esto era BI antes de que la IA fuera demasiado popular. Y cuiden sus ojos. Esta es la única diapositiva brillante que tengo para ustedes, pero los va a cegar. Y ahora puedo verlos.

Así que esta es la aplicación, y me pidieron como pasante que agregara una casilla de verificación. En realidad no era esta casilla de verificación porque la interfaz de usuario se ve completamente diferente ahora de lo que se veía entonces, pero vamos a imaginar. Me pidieron que agregara esa casilla de verificación. Aquí está el código para eso. Era un modelo y vista de backbone. Vamos a ver esto en detalle. Así que ese es nuestro modelo. Y luego aquí hay un poco de nuestra vista. No, es broma. No vamos a ver eso. Y en realidad tampoco es el código. Eso fue ChatGBT. Pero era material de backbone. Era un modelo de 1,000 líneas, una vista base de 2,000 líneas, y una vista de 1,000 líneas que extendía la vista base. Con eso tuve que trabajar para agregar esta casilla de verificación. Me tomó como cinco minutos agregar la interfaz de usuario para eso.

Pero quiero saber, solo grítenlo porque no puedo ver si levantan las manos. ¿Cuánto tiempo creen que me tomó agregar esta función? ¿Dos sprints? ¿Un día? ¿Dos horas? Cinco meses, OK. Me tomó dos semanas. Y soy como el pasante tratando de demostrarme a mí mismo, y lo hice. Sí, demostré que soy incompetente, supongo. Fue tan triste. ¿Por qué creen que tomó tanto tiempo? Griten esto. Complejidad. OK, así que en general, complejidad. Sí, había mucho código. ¿Qué específicamente hace que este trabajo sea tan complejo? JavaScript. Sí, no estás equivocado. Es la gestión de la red. La carga de los datos y hacer la mutación. Agregar la interfaz de usuario fue súper rápido. Eso no fue difícil. Es solo una plantilla HTML en mi vista de backbone, pero gestionar esa red, hombre, eso fue difícil. Y eso es lo que hizo que tomara dos semanas. Así que quiero hacer que la red desaparezca por completo, desaparezca completamente. Y por eso vamos a ver qué está pasando con nuestro código de red en nuestras aplicaciones.

El resto de mi charla está basada en una masterclass que es completamente gratuita. Puedes pasar por todo esto tú mismo. Y eso es lo que vamos a repasar aquí. Es el React and the Vanishing Network. Puedes revisar esto más tarde. Vamos a avanzar bastante rápido a través de esto.

Así que lo revisé antes, y deberías poder ver eso. Si no, lo siento mucho. Hice lo mejor que pude. Pero sí, vamos a comenzar con el paradigma de aplicaciones multi-página donde todos comenzamos. Así que tenemos esta aplicación simple sirviendo desde la barra.

Vamos a generar algo de HTML. Así que obtengamos un conteo de nuestra base de datos. Vamos a renderizar ese conteo aquí. Y aquí, guardemos eso y aseguremos que estamos en un buen lugar. Boom. Conteo cero. Magia. La web todavía funciona. Siempre apuesta por la web.

Ahora vamos a hacer un formulario para que podamos actualizar esto. Y así estamos publicando para actualizar el conteo. Y luego tenemos estos botones que pueden tener un nombre y un valor. ¿Sabías eso? Eso es algo genial. Así que cualquiera que hagamos clic es lo que se enviará al back end. Así que eso es genial. Ahora, si intento hacer clic en uno de esos, no va a funcionar porque estamos yendo a esa ruta y no estamos manejando esa ruta. Así que manejemos esa ruta ahora. Vamos a manejar un post para actualizar el conteo. Tenemos nuestros datos del formulario. Vamos a convertir eso en un número porque eso pasa como una cadena. Vamos a actualizar el conteo, cambiarlo, comprar ese cambio, y luego redirigir porque estamos haciendo post redirect get. Si no sabes lo que eso significa, entonces pregunta a tus mayores. Y vamos a decrementar e incrementar. Ahí estamos. Genial. Funciona. OK, así que echemos un vistazo al código de red. ¿Dónde está el código de red aquí? Bueno, en realidad no hay mucho. Pero hay algo. Algo de código relacionado con la red. Tenemos esta barra aquí. Esa es la URL. Está muy relacionada con la red. Nuestra acción se está definiendo aquí. Así que eso es un poco de código de red también. Incluso nuestro método está relacionado con la red. Y luego, por supuesto, manejar eso y hacer la redirección. Todo eso está algo relacionado con la red. O bastante cerca. Pero realmente no hay mucho código de red aquí. Y esta es la razón por la que muchas personas que construyeron aplicaciones usando la arquitectura de aplicaciones multi-página realmente lamentan la forma en que hacemos las cosas ahora porque realmente es así de simple. Pero hay una razón por la que avanzamos desde esto. Y la razón es la experiencia del usuario. Así que queremos tener una experiencia de usuario mucho mejor porque ahora mismo lo que estamos obteniendo es una actualización completa de la página cada vez que hacemos clic en esto. Y así, si quisiera incrementar muy rápidamente y fuera un usuario de teclado, voy a tocar, tocar, incrementar, tocar, tocar, incrementar, tocar, tocar, incrementar.

Así que necesito preservar eso. Y podrías hacer algún tipo de autofocus y usar tal vez una cookie o algo, lo cual estaría, supongo, bien. Pero creo que sería mejor tener algo de JavaScript en el cliente que haga esto. Pero queremos preservar la funcionalidad actual porque estamos imaginando que estamos en la era de 2006 donde algunos clientes tal vez no tenían JavaScript en el cliente.

Así que comencemos añadiendo algo de JavaScript en el cliente. Primero, voy a decir script module y traer nuestro archivo de índice de la UI. Así que ven aquí, UI index, aquí estamos. Hagamos una alerta, you done been hacked. De hecho, hice esto una vez y lo envié. Y estaba muy avergonzado. Así que sí, asegurémonos de que eso funcione. No lo está. Y la razón por la que no está funcionando es porque tenemos más código de red que necesitamos manejar. Justo aquí, estamos obteniendo un 404. Así que necesitamos manejar eso. Ahora, típicamente vas a tener un CDN para estas cosas ahora. Pero en aquel entonces, bueno, tal vez no necesariamente. Ahí vamos. You done been hacked. Muy bien, muy bien. Así que ahora tenemos JavaScript cargando en el navegador. Vamos a añadir un event listener para el evento DOM content loaded. Así que una vez que hemos cargado, ahora sabemos que podemos obtener nuestro formulario. Y dentro de aquí, vamos a añadir un event handler, form.addEventListener para el evento submit. Prevendremos el comportamiento por defecto, porque el por defecto es hacer esa actualización completa de la página. Y ya no queremos eso. Vamos a convertir el formulario en algunos datos del formulario.

Pero una cosa que estamos previniendo con este por defecto es esta pieza aquí que toma cualquier botón que hayas clicado y lo añade a los datos del formulario. Así que necesitamos hacer eso nosotros mismos. Así que vamos a decir si event.submitter, entonces vamos a añadir el event submitter. Este es el botón que fue enviado. Submitter.name y enviar su valor. Ahí vamos. Así que esto es nosotros haciendo el trabajo del navegador. Pero hay una razón. Tenemos que justificar esto para nosotros mismos. Y ahora no necesitamos preocuparnos por el cambio de número aquí. Vamos a decir obtener la acción del formulario, cualquiera que esté configurada, y el método del formulario. Porque de nuevo, el formulario todavía importa. Nos importa la mejora progresiva. Así que tiene toda esa información.

Y luego si la respuesta es OK, entonces vamos a obtener el JSON de la respuesta. Tendremos nuestra API devolviéndonos un objeto que tiene el conteo. Y luego podemos actualizar la información del conteo para eso. Y luego podemos tener un error o algo. Y nos encargaremos de esta pieza en un segundo. Volvamos aquí y añadamos todos nuestros IDs para manejar esta indirecta. Así que tenemos nuestro ID para el conteo. Tenemos el formulario del contador. Así que deberíamos estar bien, excepto que todavía nos faltan algunas de las piezas de mejora progresiva aquí. Así que cuando estamos llamando a esta actualización, lo estamos haciendo con la solicitud fetch. Todavía son datos del formulario, así que todo está bien. Pero estamos esperando que devuelva JSON en este caso. Pero el navegador, por defecto, no va a hacer las cosas de JSON. Y necesitamos preservar ambos comportamientos. Así que vamos a tener que tener algún tipo de condición aquí. Primero, vamos a necesitar obtener el conteo actualizado. Y luego si el encabezado accept de la solicitud incluye text HTML, eso significa que está haciendo una actualización completa de la página. Mantendremos el comportamiento antiguo. De lo contrario, vamos a devolver el JSON. Genial. Mejora progresiva para ganar. Las cosas antiguas todavía deberían funcionar. Y las cosas nuevas de hecho están funcionando. Y ahora, tengo gestión de enfoque. Eso es agradable. Y para llevarlo aún más lejos, ahora que tenemos esto, podemos realmente dar un estado pendiente a estas cosas. Así que vamos a venir aquí a nuestro formulario. Envolveremos estos botones en un div. Y luego venimos aquí y agarramos esos botones. Botones del contador justo ahí. Y estableceremos la opacidad a 0.6, porque no soy un diseñador. Y luego lo estableceremos de nuevo a 1. Pero, ¿alguna vez has visto una UI pendiente que nunca desapareció? No en mi código, no lo has hecho. Así que vamos a añadir un try catch justo aquí. En realidad no nos importa el error ahora mismo, porque vamos a pretender que esto no es real, porque no lo es. Y luego moveremos esto al final.

Así que incluso si hay un error de algún tipo, al menos vamos a establecer la opacidad de nuevo a 1. Genial. Así que vamos a ir aquí a nuestra red. Simularemos una conexión 4G lenta y veremos, hey, mira. Ahora tengo una UI pendiente que está más localizada en la parte de la UI que es relevante para el usuario. No solo estamos mirando el spinner del favicon. Así que realmente hemos mejorado la experiencia del usuario, no solo la hemos empeorado. Pero de nuevo, esta charla no trata sobre eso.

Vamos a tomar una buena experiencia de usuario como un hecho. ¿Qué hizo esto a nuestro código? Bueno, lo arruinó. Lo arruinó un poco. Así que ahora tenemos algo de complejidad adicional aquí para manejar la respuesta JSON. Tenemos mucha indirecta aquí entre nuestra plantilla y el JavaScript que se conecta a nuestra plantilla. Tenemos este event prevent default justo aquí, que honestamente no estamos haciendo tan bien como lo hace el navegador para manejar condiciones de carrera y errores y cosas diferentes como esa. Pero sí, eso es como, necesitamos hacer esto. No es como si estuviéramos haciendo esto sin razón. Y luego, por supuesto, tenemos que mantener toda esta tontería, todo este código.

Y luego aquí está el verdadero problema. Un usuario viene y dice, hey, gerente de proyecto, necesito que esto no sea un dos puntos. Quiero que sea un signo de exclamación. Y entonces te dicen que hagas eso. Y lo haces. Y dices, sí, mira. Ahora es un signo de exclamación. Eso es genial. Y entonces envías esto a producción. Y el usuario viene y lo usa. Dicen, hey, voy a incrementar mi conteo. Espera. Cambió a un dos puntos. ¿Qué? ¿Qué pasó? Bueno, oh, cierto. Estoy actualizando el conteo justo aquí. Así que tengo que actualizar eso en dos lugares. Y todavía veo aplicaciones que están construidas con esta arquitectura que tienen este problema. Y me vuelve loco. Lo odio. Lo odio tanto.

Así que esto es desafortunado. Y esta fue la razón principal por la que pasamos de lo que llamo la arquitectura Pempa, la aplicación multipágina mejorada progresivamente, a la arquitectura SPA, aplicación de una sola página. Así que vamos a pasar a esta siguiente fase del desarrollo de software que llamo los primeros días de React. Y de hecho, la aplicación backbone en la que trabajé, también era SPA. Estábamos bastante en los primeros días en eso. Así que con el mundo SPA, hacemos las cosas un poco diferente. Ahora decimos, hey, ¿sabes qué? En lugar de generar nuestro documento HTML desde el servidor y tener ese problema de duplicación, no vamos a tener un problema de duplicación. Vamos a eliminar esto. Vamos a hacer de esto un endpoint de conteo. Y ahora es solo una API JSON. Y en su lugar tendremos todo eso en un index HTML en un CDN. Magia.

Súper genial. Y ahora no tenemos que preocuparnos por la duplicación, porque todo va a vivir dentro de nuestros componentes. ¿Echarías un vistazo a eso? Increíble. Esto es tan genial. Es React, excepto que no estoy usando JSX. Todo esto es puro JavaScript vanilla. Y por eso tenemos este create element como h, y por qué vamos a lidiar con eso aquí. Pero no vamos a trabajar mucho en eso, así que no te preocupes por eso.

Así que ahora nos hemos deshecho de toda esa duplicación. También podemos deshacernos de la mejora progresiva. No nos importa la mejora progresiva. Ya no importa, ¿verdad? Así que vamos a cambiar esto a una JSON API. Vamos a llamar a esto nuestro JSON body. Y tomaremos ese cambio. Nos desharemos de todo esto. Mira toda esta complejidad. Estamos eliminando totalmente de nuestra base de código. Eso es genial. Y luego, por supuesto, necesitamos servir el index HTML público, así que serviremos el directorio público. Oh, sí. Y en este mundo, los 404 no existen. Simplemente manejamos todo lo demás y simplemente servimos el index HTML porque tenemos un enrutador del lado del cliente. Así que sí, los 404 no importan. No importan. No nos importan los 404. OK, genial.

Así que ahora estoy en mi hermoso código de React, y puedo cambiar el tipo de acción. El inicio de la búsqueda, también vamos a tener un inicio de actualización porque a veces esos van a ser un poco diferentes. Ups, justo aquí. Y tendremos nuestro, no, vamos. Ahí vamos. Actualización exitosa. No podría hacer esto tan rápido sin IA, por cierto. Hombre, en realidad no podría programar sin IA. Todo este tiempo, no he sido un programador. Es solo hasta que conseguimos IA que finalmente comencé a poder programar. Oh, es increíble.

Así que aquí ahora, vamos a usar nuestro use effect. Tienes que tener mucho cuidado con esos bucles infinitos de use effect. Pero vamos a tener cuidado. Está bien. Así que vamos a despachar un inicio de búsqueda. Probablemente deberíamos agregar este try catch aquí. Ahí vamos. Obtendremos nuestra respuesta, respuesta JSON. Eso va a tener un conteo en ella. Perfecto. Despachamos nuestro error. Tenemos este conteo de búsqueda, y luego un compañero de trabajo viene a nosotros y dice, oye, no estás esperando esto. Así que voy a agregar un await aquí. Oh espera, ¿qué demonios? Y entonces van a estar todos confundidos, ¿verdad? Así que esto es lo que haces. Si no te importa la resolución de la promesa, escribes void. Y ahora las personas que lo miran están como, oh, no se olvidaron del await. Simplemente no les importaba. Consejo profesional.

Bien, genial. Así que luego vamos a bajar aquí, tener una función de actualización de conteo. Así que una función llamada actualización de conteo. Y se va a ver bastante similar a lo que teníamos. Pero esto es lo que vamos a llamar cada vez que el usuario quiera actualizar el conteo. Así que echemos un vistazo. Está justo aquí abajo. Actualización de conteo menos uno y uno. Oh sí, eliminamos el formulario. ¿Por qué tenemos un formulario? Solo tengo que hacer prevent default. No. No quiero hacer eso. No molestar acaba de apagarse. Oh genial. Veremos cómo va esto. Y así luego solo tenemos on clicks en los botones. ¿Por qué necesito algo más?

Así que luego diremos si el estado está cargando, así que como si estuviéramos cargando inicialmente la página. No tengo nada del servidor, así que tenemos que mostrarle algo al usuario. De lo contrario, solo están mirando una pantalla blanca. Así que eso no es bueno. Tal vez pondría eso en mi índice público HTML, y eventualmente descubrimos la generación de sitios estáticos.

Así que es una experiencia un poco mejor, más personalizada aquí. Pero si tienes una aplicación realmente dinámica, entonces no hay mucho que puedas hacer de todos modos. Pero solo vamos a renderizar la carga justo aquí. Y si hay un error, entonces lo renderizaremos. OK, veamos si funciona. Refrescar, 404 no encontrado. Ooh, no guardé este archivo. Ahí vamos. Muy bien. Oh no. Carácter de espacio en blanco. OK, asegurémonos de que nuestra API esté correcta. Estamos devolviendo JSON. Tenemos JSON. Ven aquí. Y deberíamos estar obteniendo JSON en ambos. Uh-oh, eso no es bueno. Bueno, es bueno que pueda hacer trampa y simplemente ir directamente a la solución. Ahí vamos. Ja-ja. Oh disparo, y es una pantalla blanca. Lo siento. Será mejor en la próxima. Genial. OK, está funcionando. Y puedo ir en 3G lento en esto. Tenemos nuestro estado pendiente. Todo está bien. Está funcionando de la manera que el usuario quería que funcionara. Excepto que el usuario, tal vez no lo notó. Tal vez no le importa. A veces le pregunto a mi esposa, ¿no viste todas esas cosas saltando y todo eso? Ella dice, no sé. No me importa. Así que tal vez me importe demasiado esto, pero mira esto. Tenemos esta tontería de carga. ¿Qué? Antes no tenía eso. ¿Ahora tengo que lidiar con eso? Odio eso. Y luego también, mira esta tontería y esta tontería. Antes no tenía que hacer eso. ¿Qué pasa? No soy fan de eso. Pero soy fan de no tener que duplicar mis plantillas, duplicar mi lógica de mi servidor y mi cliente. Oh, eso fue lo que fue. Fueron estos encabezados. Olvidé agregar el JSON de la aplicación. Pero hay cosas que realmente obtuvimos como desarrolladores e indirectamente como usuarios al movernos en esta dirección. Entonces, ¿fue el intercambio correcto? No lo sé. Probablemente fue un buen intercambio. Pero creo que podemos hacerlo mejor. Y ahí es donde estamos actualmente y de donde estamos en transición es lo que llamo la era del framework React. Y en la era del framework React, tenemos lo que literalmente soy la única persona en el mundo que lo llama la arquitectura Pespa.

Es la arquitectura de aplicación de una sola página mejorada progresivamente. Y esto fue encabezado por Remix, el framework React router v7 ahora. Muy pronto va a salir. Y va a tener todas las increíbles características de Remix. No tienes que usarlo si no te gusta el renderizado en servidor. No tienes que hacerlo. Todas esas advertencias. Pero es realmente, realmente increíble.

Así que construí una versión mini de Remix, mi propia versión de Remix aquí. Puedes profundizar en esto más tarde si estás interesado. Pero ahora, déjame apagar esta red lenta aquí. Ahora las cosas son bastante diferentes. Tenemos este loader y esta action. Y aquí está nuestro componente counter. Este counter es relativo a una ruta. Así que ahora todo está vinculado a estas rutas. Y puedo simplemente decir, oye, esta ruta tiene un loader. Y va a cargar. Ups. Const. Ahí vamos. Va a cargar el count. Vamos a poder acceder a la base de datos porque esto solo se ejecuta en el servidor. Así que puedo hablar con terceros. Puedo tener claves privadas. Lo que sea. Porque esto está en el servidor. Eso es agradable. Y luego el framework, no yo.

Oh, y olvidé mencionar también que React Query es increíble. Y si viste ese useEffectSoup y eso está en tu código, tienes que sacarlo. Puedes usar React Query ahora mismo. Y resolverá ese problema por ti. Pero aún no es tan bueno como a lo que estamos llegando. Así que hay más que podemos hacer. Así que tenemos este useLoaderData que va a tomar este loader y nos va a dar nuestros datos. En Remix, en realidad no tienes que proporcionar esto. Pero en mi mini framework, sí. Y luego tenemos nuestra capacidad de realizar solicitudes fetch. Pero asegurémonos de que realmente estamos obteniendo el count en lugar de to do. Así que guardaré esto. Refrescar. Boom. OK, estamos cargando el count. Esa es nuestra carga de datos. Ahora para la mutación, vamos a hacer todos estos pasos. Increíble. Vamos a tomar los datos del formulario. Vamos a tomar el cambio de eso. Vamos a actualizar el count.

Y vamos a devolver una mutación exitosa. Y para llamar a eso, eso realmente va a golpear nuestro contador. En realidad, no hice esto en mi práctica. Pero esto debería realmente funcionar. Incrementar, decrementar, decrementar, incrementar. Y eso es solo un formulario regular. Así que ahora nos importa la mejora progresiva. Pero queremos mejorar progresivamente. Queremos tener esa interfaz de usuario pendiente y todo eso. Así que vamos a cambiar esto a nuestro formulario fetcher, que renderizará solo un formulario regular para que realmente funcione de inmediato por defecto, pero luego lo mejora más para que podamos tener esta interfaz de usuario pendiente. Así que eso es agradable. Podemos hacer eso.

Y ahora obtengo mi fecha de enfoque. Obtenemos nuestra interfaz de usuario pendiente. Todo es realmente genial. Y si estuviéramos mirando el código de red, no hay mucho, pero todavía está aquí. Primero, tenemos que reconocer que todo esto está vinculado a la ruta. Y así tenemos nuestro contador de ruta aquí mismo. Y así es como obtenemos nuestros datos cargados y nuestra acción manejada. También tenemos que especificar la URL para nuestra acción. En Remix o en la web, si no especificas eso, simplemente publicará la acción actual o a la URL actual. Así que técnicamente no está ahí, pero vamos a dejar eso ahí. Está mayormente desaparecido. La mayoría de nuestras cosas relacionadas con la red han desaparecido. Nuestro estado de uso, nuestro reductor de usuario, todo eso ha desaparecido. Las cosas son mucho mejores.

Y pensé que este era el final. Pensé que lo habíamos logrado. Fue como hace un año, hace un año o dos. Yo estaba como, sí, esto es todo. Y luego la gente decía, bueno, ¿qué pasa si tengo un componente que reutilizo en todas partes, como el botón de Me gusta en X? ¿Cómo construiría algo así? Necesita gestionar sus propios datos. Necesita gestionar su propia mutación. ¿Qué hago con eso? Y dije, oh, bueno, haces este componente de pila completa y Remix tiene estas rutas de recursos. Es increíble. Pero simplemente no era lo suficientemente bueno. ¿Cómo cargo esos datos? Tienes que encontrar el cargador más cercano, la ruta más cercana. No es una experiencia súper buena, y es por eso que estamos avanzando. Estamos moviéndonos de la arquitectura Pespa a lo que llamo Modern React, Modern React con componentes de servidor de React. Así que echemos un vistazo a esto. Primero, para obtener el contador de la base de datos, tengo que reiniciar la aplicación ahora. Esto va a tener 404 no encontrado. Estamos un poco desordenados ahora mismo. Llegaremos allí. Así que primero vamos a obtener el contador de la base de datos. Ahora, todo en este archivo es solo para el servidor. Esto genera cosas que van al cliente, pero el código en sí no lo hace. Y eso significa que puedo usar componentes async. Tal vez algún día obtengamos componentes async en el navegador, y ese será un día hermoso. Pero ahora mismo, es solo en el servidor, y solo lo quiero en el servidor para esto de todos modos.

Así que puedo obtener el conteo. Y luego mira esto. Tengo esta función de actualización de conteo también solo en el servidor, y mira a dónde va eso. Solo lo estoy poniendo en la acción. Pero ¿no está generando algo que va al cliente? ¿Cómo puedo enviar la acción al cliente si todo esto está generando algún código y yendo? Mi actualización de conteo es algo solo del servidor. Necesito acceder a la base de datos para cambiar el conteo. No puedo enviar esto al cliente. Esto tiene claves privadas y cosas. Bueno, por eso añadimos este use server.

Y lo que esto nos permite hacer es que creará una referencia para la actualización de conteo. Y luego esa referencia irá al cliente. Y luego el JavaScript del lado del cliente puede decir, oye, el usuario está tratando de llamar a esta función. ¿Podrías llamar a eso en el servidor? Y el servidor dice, sí, puedes llamar a eso en el servidor. Podemos hacer eso. Así que sí, eso es genial. Traigamos la base de datos, actualicemos, y tal vez necesites reiniciar. Creo que probablemente hice algo mal, así que solo intentemos eso de nuevo. No, eso no es bueno. Oh, espera un segundo. Estamos un poco demasiado rápidos con el div pendiente. Oh, ¿sabes qué? Estoy en la ruta equivocada. Ahí vamos. OK, súper. Así que puedo incrementar, decrementar. Todo va genial, y no hay mucho de mi código que llegó al navegador. De hecho, ninguno de mi código. Es todo código del framework que llegó al navegador. Así que eso es genial. ¿Y dónde está mi código de red? Aquí está mi carga de datos. Eso no es código de red. Solo estoy llamando a una función. Aquí está mi mutación. Tampoco es código de red. Solo estoy llamando a una función. Desapareció. Pero espera, dices. Espera un segundo. No tenemos la UI pendiente. Así que si estoy en una conexión de red lenta, no estoy obteniendo una buena UI pendiente aquí. No, necesitamos mejorar eso. Así que el problema con eso es que requiere algo de código en el cliente. Y así voy a tener este archivo, use client. Y está diciendo, oye, quiero tomar este código y enviarlo al navegador. Y cuando hicimos eso antes, tuvimos que añadir una etiqueta de script a nuestra arquitectura Pempa para que pudiéramos obtener este código en el navegador. Y así mantengamos un ojo atento. Mira dónde añado la etiqueta de script. Y vamos a decir use form status. Obtendremos el estado pendiente. Sí, exactamente. Y regresa aquí.

Tomaremos ese div pendiente porque ese código allí necesita ir al cliente, así que está en un archivo separado. Vamos a decir div pendiente allí. Y luego actualizaremos e incrementaremos. Hey, genial. Espera un segundo. No puse una etiqueta de script en ningún lugar. Así que no tengo ese código de red. Este use client es mi etiqueta de script. Así es como ese código llegó al cliente. Así que espera, ¿dónde está el código de red? Se ha ido.

Tal vez este use server y use client puedan ser nuestro código de red. Tal vez. Supongo que a algunas personas realmente no les gustan estas directivas. He llegado a amarlas. Pero eso es todo. Ahora puedo escribir una aplicación completa. Por supuesto, hay código de red. Como hay algo en el navegador que está haciendo estas solicitudes fetch. Por supuesto. Pero como ingeniero de producto e incluso desarrollador de bibliotecas, tal vez estoy construyendo alguna plataforma de autenticación o estoy construyendo una plataforma de pagos, lo que sea. Y puedo crear un componente que haga todo el trabajo de front-end, back-end, todo, distribuido en NPM. Y la gente puede usarlo sin tener que integrarlo de ninguna manera extraña. Eso es enorme. Eso es masivo. Soy un gran fan de esto. Aleluya.

Sí, muy genial. Muy genial. Bien. Así que, ups. No quise hacer clic en eso. Lo siento. Modo oscuro. Eso es mejor. Pero sí, ven a echar un vistazo a Epic React. Acabo de lanzar la versión dos. Es fenomenal, una experiencia realmente, realmente increíble. Y puedes profundizar más en esta demo y cómo construí todo esto con JavaScript puro. Incluso RSCs, JavaScript puro. Échale un vistazo. Los web workers son geniales. Con eso, solo tengo una última cosa que decir. Eres increíble. Muchas gracias. ¡Woo!

OK. La pregunta más votada es, ¿qué plugins de IA estás usando? ¿O es cursor? Eso es cursor. Sí. Sí, es increíble. También soy muy optimista con Windsurf. Creo que tienen cosas geniales en marcha. Y por supuesto, Copilot. Están como, están un paso adelante. Cualquier cosa de IA que estés usando ahora mismo, probablemente deberías seguir con eso. Porque eventualmente, va a ser tan bueno como el resto. Pero me encanta cursor. Es fabuloso. Genial.

Siguiente pregunta. Mencionaste Remix mucho. ¿Cuáles son tus opiniones sobre Next.js? Oh hombre, quien hizo esta pregunta probablemente leyó un post de blog que escribí hace un tiempo. De hecho, eliminé ese post de blog. Demasiado picante. Pero no soy un gran fan de Next.js, aunque creo que están llevando las cosas en una mejor dirección recientemente. De hecho, estuve en la conferencia de Next.js, y tengo muchos amigos en esa comunidad. Pero sí, es una forma diferente de construir aplicaciones. Prefiero la forma de Remix. Genial.

Siguiente pregunta. He llegado a creer que siempre hay una compensación. ¿Cuál crees que es con los métodos useClient y useServer, cuál es la compensación? No hay compensaciones. Todo es positivo. No, solo bromeo. Quiero decir, el hecho de que podría construir o implementar RSCs con JavaScript puro es muy alentador para mí. Me preocupa mucho la magia del compilador. Esa no es la forma en que me gusta construir software. Prefiero tener algo que pueda construirse solo en bruto, y luego mejorarlo con herramientas de construcción y cosas después. Pero sí, lo es. Definitivamente hay algo de complejidad allí que creo que vamos a, realmente no puedes saber cómo va a impactar las cosas hasta que ya lo haya hecho. Así que creo que el jugo vale la pena, pero hay un esfuerzo. Lo siento, esto está saltando aquí. Un segundo.

Bien. ¿Cómo pruebas esto sin separación entre la capa de datos de negocio y la capa de UI? Esa es una buena pregunta. Primero, hablando sobre la separación entre la capa de datos de negocio y la capa de UI, esto puede ser una opinión controvertida, pero siento que es una línea arbitraria. Sé que a algunas personas no les va a gustar eso, pero creo que cuando hablamos de separación de preocupaciones, la preocupación es esa experiencia de usuario. Estamos hablando del botón de Me gusta en X, o la cosa de reacción en GitHub, o lo que sea. Esa preocupación es toda la experiencia de usuario. Y así aprendimos que dividir HTML y JavaScript no era tan útil como solíamos pensar que era, y juntarlos fue realmente útil con JSX. Y siento lo mismo sobre la lógica de negocio. Ahora, en cuanto a, y por supuesto, con el tiempo vas a necesitar compartir esa lógica central a través de muchas piezas de UI diferentes, y así sí, lo mueves. Simplemente mueves las cosas. Ese es nuestro trabajo como movedores de código. Eventualmente, la IA también tomará ese trabajo.

Eventualmente la IA también tomará ese trabajo. Pero creo que en cuanto a probar esto, he estado usando mucho más Playwright para pruebas de extremo a extremo recientemente. Y tengo el trofeo de pruebas donde digo que las pruebas de integración son donde quieres pasar la mayor parte de tu tiempo, y mucho de mi tiempo todavía está allí. Pero las pruebas de extremo a extremo han estado tomando mucho más de mi trofeo de pruebas. Genial.

¿Estamos volviendo a los días cuando mezclábamos consultas SQL y estilos HTML? Pensé que la idea era la separación de preocupaciones. Hablamos de esto. No creo que ponga consultas SQL directamente en mi marcado. Siento que eso es quizás un poco demasiado. Pero quiero decir, tal vez. Honestamente, los problemas que estaban allí son diferentes con las herramientas que tenemos ahora. Y por eso estoy un poco menos preocupado por eso. Lo que quieres optimizar es el cambio. Y hacerlo fácil para ti para hacer cambios con el tiempo. Este es en realidad uno de mis principios de programación. Ahora mismo estoy trabajando en los principios de programación épicos que saldrán en un par de semanas. Y uno de los principios de programación es simplemente optimizar para el cambio. Y es muy fácil para ti simplemente hacer un archivo, aquí están todas mis consultas SQL, o aquí está toda mi lógica de negocio por aquí, y luego eso se convierte en una sobreabstracción. Y estás agregando características a esto que nadie por aquí necesita. Simplemente puede volverse demasiado fácil. Así que estoy emocionado de ver cómo van las cosas cuando React hace que sea tan fácil mezclar estas cosas. Genial.

Genial. Bueno, muchas gracias, Kent. Esto ha sido increíble. Aprecio eso. Gracias a todos. Gracias.