Últimamente, he estado leyendo mucho sobre hypermedia systems y el origen del término REST, y tengo mucho que contarte sobre mis aprendizajes, no dejes de suscribirte al blog.

Pero también he reforzado mi pensamiento de que el manejo de estado de una aplicación o State Management, es innecesario, o cuando menos, que no es una responsabilidad de la aplicación web del cliente. 🫨

¿Qué es State Management en React?

El manejo de estado en React, pensando específicamente en los datos que vienen del servidor, si se ejecuta bien, requiere de mantener una especie de cache de los datos del servidor, pero en el cliente.

También se requiere mucho código para mantener esta sincronización del estado local del cliente con los datos que vienen del servidor. Trabajo duro con Redux o Apollo. 😮‍💨

Existen una inmensidad de herramientas que seguramente ya conoces, como React Query, Redux o Apollo. Estas herramientas a veces agregan otras más, a las que hay que destinarle tiempo tanto de aprendizaje como de mantenimiento, por ejemplo si usas thunks, Observables o haces uso de graphQL.

Pero es importante entender que esto solo se requiere si se decide crear una Single Page Application (SPA), este tipo de apps han dominado el mundo en la última década, pero que hoy en día se están sustituyendo por las Multi Page Applications (MPA) y por términos como Server Side Rendering (SSR).

👽 Si todos estos términos te parecen alienígenas, no dejes echarte un clavado a mi canal de Youtube para ponerte al día.

🚚 Nos mudamos al servidor

También se dice que estamos volviendo a atrás cuando abandonamos las SPA. Pero no es así, no estamos abandonando ninguno de los beneficios de las SPA, lo que estamos haciendo es tomar todo lo que demostró ser muy bueno de las SPA y traernos lo mejor de los dos mundos al desarrollo web actual, consiguiendo aplicaciones web del servidor con capacidades de SPA. 🤯

Actualmente, existen muchas iniciativas emergentes que buscan crear la mejor herramienta Fullstack: Svelkit, Qwik, Next, Astro o mi favorita personal: Remix. 💿

La forma de crear sitios web modernos está cambiando ahora mismo y cada vez es más accesible para el programador principiante. Todos podemos publicar un sitio web hoy en día, sin necesitar de un título de ingeniería, ni pedirle permiso a nadie, la red es pública.

Pienso que es un buen momento para iniciarte en el mundo del desarrollo web, pues, un junior en 2024 📹 va a disfrutar mucho más su experiencia, que un Jr. del 2015 📽️ (como tu servilleta 😢).

Por eso quiero que desaprendas lo que crees que está escrito en piedra sobre las SPA, y te vengas a vivir conmigo al servidor utilizando Remix, quién sabe, tal vez disfrutes más del desarrollo web de este lado… 👽

💿 Remix lo simplifica todo

Lo que Remix propone es un Fullstack Data Flow. Remix crea un puente entre el backend y el frontend en la misma aplicación, ¡incluso en el mismo archivo! 🔥

Remix logra esto explotando “la colocación de código” con dos funciones tan novedosas, que no tardaron en ser copiadas por la gran mayoría de los frameworks, pero algunos de estos frameworks, las copiaron sin la simplicidad de Remix. 😓

Remix nos invita a explotar las herramientas que ya incluye la plataforma web como son los sistemas de hypermedia. Es decir, con Remix podemos construir una aplicación CRUD explotando la comunicación hypermedia nativa de las etiquetas <form> y <a>.

Incluso podemos no incluir archivos JS en el cliente y nuestra aplicación seguiría funcionando perfectamente.

Pero Remix también nos ofrece herramientas como fetcher, que nos facilita el consumo de datos asíncronos, como lo haríamos en cualquier SPA con fetch. ✅

⏳ React en el servidor y en el cliente

Remix tiene una forma muy elegante de resolver el State Management; eliminándolo por completo. 😵

Sí, con Remix no tenemos que preocuparnos demasiado por las peticiones de red, los submit de los formularios o la navegación y sus estados.

Remix nos ofrece un grupo de Hooks y herramientas para delegarle todo lo anterior.

Algunos de los Hooks que tenemos disponibles en Remix son:

• useNavigation: Nos da acceso al .location(), .state() y .formData() así como a la navegación que podemos detonar navigate(-1).
• useFetcher: Facilita la administración de las peticiones REST a cualquier otra ruta en nuestra aplicación fetcher.submit(formData, {method:”post”,action:”/new”}).
• useLoaderData: Este hook es el encargado de conseguir los datos y los tipos destinados a la ruta const data = useLoaderData().
• useActionData: Esta es una de mis herramientas favoritas, pues simplifica la información de las mutaciones de manera obvia y escalable. const data = useActionData() 😘 love it!

Remix también facilita el trabajo en el backend, trabajo que sería regularmente complejo, como obtener URL Search Params, Cookies, Server Sessions y la manipulación del Server Cache.

Remix nos permite explotar lo mejor de los dos mundos sin tener que re-aprender nada.

Si has trabajado en el frontend durante un tiempo y quieres dar el paso siguiente como Fullstack, Remix es tu mejor opción para darle sentido a las herramientas nativas de la web de una forma amigable y de paso, conseguir la capacidad de publicar aplicaciones completas, con bases de datos, ligeras y listas para producción. Tal vez sea una buena idea que tomes este taller conmigo, además es gratis.

¿Qué aprenderás en este curso?

En este curso, juntos, vamos a intentar darle sentido a una aplicación Fullstack con Remix, trabajando en un proyecto ya inicializado y escribiendo algunas de las rutas faltantes para practicar el uso de las herramientas más importantes de Remix, como son las funciones action y loader.

Vamos a trabajar también con Prisma para consumir nuestra base de datos fácilmente y aprovechar el tipado que nos ofrece y así conseguir que nuestra aplicación tenga tipado seguro de punto a punto (End to end Type Safety). Y finalmente, publicaremos nuestra aplicación en internet utilizando Netlify con un dominio propio.

Con todo esto, planeo darte un panorama general de cómo funciona una aplicación Fullstack con Remix y React, trabajando del lado del servidor, pero sin abandonar la potencia de JS en el cliente.

Creo firmemente que después de ser parte de este taller, no volverás a ver el desarrollo web de la misma forma. Será como cuando la luz blanca pasa por un prisma. 🌈 Ya no esperes, ven conmigo y comencemos, te dejo los enlaces. 😎

Abrazo. Bliss. 🤓

Enlaces relacionados

Inscripción al taller

https://fixtergeek.com/eventos/remix_oct_2023

Fixtergeek Youtube Channel

https://www.youtube.com/@fixtergeek8057

Fullstack Data Flow

https://remix.run/docs/en/main/discussion/data-flow