React Remixed

Hola a todos. Bienvenidos a mi charla llamada React Remix. Permítanme comenzar presentándome. Mi nombre es Daniel Alfonso. Soy un defensor del desarrollo en OLX Group. Soy un embajador de IoT, instructor de GetIO, y pueden encontrarme en Twitter e Instagram. También soy una red social con el nombre de usuario DanielJCAlfonso.

¿De qué trata esta charla? Bueno, esta charla trata sobre páginas web, APIs, formularios HTML, objetos de datos de formulario, y añadidores de URL. Ahora, podrían preguntarse, ¿no es el título de la charla React Remix? Sí, porque estas son todas cosas que Remix te permite utilizar. Sé que todos podríamos estar un poco cansados de los nuevos frameworks de JavaScript que siempre aparecen. Pero aguántenme porque Remix hace algo realmente bueno para ustedes, que es que cuando aprenden Remix, aprenden accidentalmente la web. Porque al usar Remix, obtendrán acceso a todas las cosas que han estado presentes durante los últimos 20 años, algo así, que funcionan muy, muy bien y que seguiremos utilizando.

Ahora, podrían preguntarse, ¿de dónde viene Remix? Remix fue creado por Michael Jackson y Ryan Florence. Remix es un framework web de pila completa que te permite enfocarte en la interfaz de usuario mientras trabajas con los estándares web para ofrecer una experiencia de usuario rápida, elegante y resistente. Ahora, con Remix viene su filosofía principal, que son en realidad tres o cuatro cosas. Comencemos con la primera, que es adoptar el modelo cliente-servidor. No puedes hacer que una red de usuarios sea rápida, pero lo que sí puedes hacer es hacer que tu servidor sea rápido. Debido a esto, puedes reducir y disminuir la cantidad de cosas que envías a través de la red, y esto es por qué Remix es genial, porque no necesita enviar la interfaz de usuario completa, porque Remix la obtendrá y puedes incluso precargar en ciertos escenarios, esta cantidad de datos antes de que tu página se renderice completamente en el lado del servidor. Remix también trabaja con los fundamentos de la web utilizando navegadores, HTTP y HTML. Estas son tecnologías que han estado presentes durante mucho tiempo, como dije, 20 años. Así que son bastante sólidas. Remix las adoptará por completo. Y al combinar cosas como el almacenamiento en caché de HTTP, Remix se enfoca en las URL para los activos, el renderizado dinámico en el servidor y las características de HTML como, por ejemplo, la precarga en el enlace, que puede enviar la URL del enlace para precargarla. Tienes todas las herramientas que necesitas para hacer que tu aplicación sea genial. La navegación en HTML ha mejorado mucho en los últimos 20 años. Así que Remix lo aprovecha al máximo. Utilizando JavaScript para mejorar la experiencia de usuario al emular el comportamiento del navegador. La mayoría de los frameworks más recientes solo tienen APIs de lectura para los datos. Remix tiene tanto lectura como escritura. Al aprovechar una pequeña cosa llamada formularios HTML.

Básicamente, utiliza lo que ha sido la base para la mutación de datos desde los años 90. Remix utiliza los formularios y adopta y mejora esa API. Esto te permitirá tener una capa de datos en tu aplicación Remix. Con o sin JavaScript en tu página. Y esta es la parte increíble, increíble de Remix. Probablemente no necesites JavaScript en tu navegador. Al agregar JavaScript, esto permitirá que Remix haga algunas cosas. Por ejemplo, no descargar y evaluar activos de JavaScript y CSS. Y solo obtener datos para las partes del diseño que cambian. Por lo tanto, JavaScript en Remix es lo que se llama mejora progresiva. Finalmente, parte de la filosofía de Remix es que no abstrae demasiado las tecnologías subyacentes. Y es por eso que se dice que si te vuelves bueno en Remix, te vuelves bueno en la web. Porque las APIs de Remix hacen conveniente utilizar los fundamentos de los navegadores, HTTP y JavaScript en general. Estas tecnologías no están ocultas para el desarrollador, puedes usarlas.

Entonces, vamos a las tres cosas básicas que necesitas para comenzar a escribir código con Remix. Lo primero y muy importante es el enrutamiento anidado. El enrutamiento anidado es básicamente la idea general de que puedes acoplar segmentos de la URL para describir la jerarquía de componentes en la interfaz de usuario. Veamos este ejemplo. Aquí tenemos dos rutas, un perfil de usuario y una cuenta de usuario. Ambas interfaces de usuario son muy similares. En ambas tenemos al usuario, descrito con el nombre del usuario, y dos pestañas, una para el perfil y otra para la cuenta. La forma en que funciona el enrutamiento anidado es que cuando activas la ruta del perfil o la cuenta, solo se renderizará la parte específica dentro de ella. Entonces, cuando haces clic en el perfil, la ruta anidada responsable del perfil se renderizará dentro de esta parte de la interfaz de usuario. Y lo mismo para la cuenta. Cuando activas la cuenta, la parte anidada de la cuenta se renderizará dentro de esta. Y esto es por qué el enrutamiento anidado es muy poderoso, porque al agregar nuevas secciones de la URL, puedes seguir agregando más y más partes anidadas a tu aplicación. Entonces, este es uno de los fundamentos principales de Remix. El segundo es la obtención y mutación de data. Bueno, tal vez hayamos estado usando UseEffect, ReactQuery y SWR durante un par de años. Pero lo que sucede es que Remix hace esto mucho, mucho más fácil. Así que comencemos con el primer pilar para la carga de data. Aquí tenemos un componente llamado Heroes. Lo que este componente debe hacer es obtener la lista de Héroes y renderizarlos dentro de un div con el nombre del Héroe y el ID del Héroe. Ahora, probablemente lo que haríamos aquí es usar UseEffect o ReactQuery para obtener los datos. Pero no lo necesitamos. Al usar un cargador, que es uno de los pilares de Remix, esta es una función que se llamará en el servidor. Puedes usarla para obtener tus data, y luego, al devolver JSON, que es básicamente un envoltorio sobre la respuesta HTTP, puedes devolver tus data. Y lo mismo para las mutaciones. Como dije, Remix aprovecha los forms. Entonces, al usar un formulario con el método post, cuando lo envías, esto activará una acción en lugar de un cargador, y esta acción se ejecutará en el servidor. Puedes acceder a los datos del formulario que llegan en la solicitud HTTP, y realizar tu mutación. Y sí, estos son los pilares de Remix. Ahora, solo para concluir en estos minutos rápidos, segundos, Remix versus Next.js es una pregunta que he visto muchas veces. Bueno, en un estudio realizado por el equipo de Remix y Next.js en Vercel, descubrieron que Remix es tan rápido e incluso más rápido al servir contenido estático y dinámico. Ofrece una experiencia de usuario más rápida, maneja automáticamente los errores y las condiciones de carrera, y los tiempos de compilación son casi instantáneos. ¿Significa esto que debes dejar de usar Next? No, no lo significa, pero realmente te sugiero que pruebes Remix. Así que muchas gracias por ver mi charla. Soy Daniel Alfonso, y nos vemos la próxima vez. Adiós.