La librería RxJS: Reactive Extensions for JavaScript
El Problema
En el desarrollo de aplicaciones web modernas, uno de los mayores retos es manejar flujos de datos en tiempo real, como puede ser una aplicación de mensajería instantánea, eventos de usuario, actualizaciones de una API… Con el uso tradicional de promesas anidadas, callbacks, estados múltiples, la complejidad del código aumenta de forma no sostenible. Es por esto que se utiliza la librería RxJS (Reactive Extensions for JavaScript).
Puntos Importantes
- ¿Qué es RxJS?: RxJS es una librería que implementa el paradigma de programación reactiva en JavaScript. Permite trabajar con observables, que son flujos de datos que pueden ser manejados de forma reactiva.
- ¿Qué ofrece RxJS?: RxJS facilita la legibilidad, escalabilidad, y un manejo eficiente de la asincronía, evitando escenarios indeseables como tener bloques .then anidados entre sí. Para ello, se usan los Observables, y operadores para manejar los flujos de datos reactivos de forma más llevable..
Ejemplo Para Implementar RxJS en un Proyecto de Front
Supongamos que en nuestro proyecto front, debemos utilizar una API y como requisito nos dicen que debemos de mostrar los cambios de la API a tiempo real.
Usando un enfoque más tradicional, como las promesas, requeriría hacer constantes peticiones a la API dentro de un bucle o intervalo, lo que no es eficiente y genera complejidad en el manejo del código.
Por el contrario, usando RxJS, crearíamos un Observable a partir de un enlace a una API, y nos suscribiríamos a éste para ser notificados cada vez que se emita un nuevo valor.
Paso a Paso
- Requisitos:
Instalación de RxJS
Angular ya viene con RxJS integrado, pero si tuviésemos otro Framework como React o Vue, usando Node.js, habría que escribir el siguiente comando en la terminal de nuestro proyecto:
– npm install rxjs - Observable a Partir de una API:
En el caso de la mayoría de frameworks, utilizaríamos un constructor de Observable para transformar la promesa que devuelve la petición (como con fetch o axios) a un Observable.
En Angular, al traer RxJS de forma nativa, HttpClient devuelve un Observable cuando realizamos una petición - Suscripción al Observable:
Para poder reaccionar a los cambios en los valores del Observable, necesitamos suscribirnos a éste con el método suscribe() . Cada vez que el Observable emita un nuevo valor, se ejecutará el código dentro del método subscribe(). - Transformación y manejo de datos:
Se usan los operadores para el manejo de datos de un observable . Similar a una tubería, los datos pasan por cada operador en secuencia y se transforman paso a paso. Para esto usamos el método pipe(), y dentro de éste se colocaría cada operador. - Eliminar la Suscripción:
Una vez se hayan utilizado los datos adquiridos por el observable, si no se necesita ninguna actualización más, se debe cerrar éste para no consumir recursos innecesarios. Esto se hace con el método unsubscribe().
En la imagen, se puede ver cómo se crea un Observable a partir de un array de usuarios, y cómo se utilizan los operadores para filtrar y manejar los datos.
Problemas Encontrados
Manejo de Operadores:
Al inicio, puede ser complicado entender qué operadores usar y cómo combinarlos. La práctica es clave para dominar los operadores de transformación y filtrado.
Depuración de RxJS:
Si el flujo no funciona como se esperaba, depurarlo puede ser un reto. Herramientas como console.log o extensiones como RxJS DevTools pueden ser de gran ayuda.
Al final del día, hay bastantes formas de atacar el mismo problema. RxJS es una librería más de las muchas que hay para hacer el trabajo del programador más llevadero. Las promesas siguen y seguirán siendo usadas ampliamente en el entorno Front, pero para empezar a subir de nivel y mejorar nuestro código, esta es una librería que vale la pena.
Autora: Ariadna López Abalo
Máster: Desarrollo Web Full Stack + MultiCloud
Centro: Tajamar Tech
Año académico: 2024-2025
Otros datos de interés:
https://github.com/Misseri68
https://www.linkedin.com/in/ariadna-lopez-abalo/