RxJS es una herramienta muy interesante para gestionar eventos en Javascript.
Hay quien afirma, incluso, que teniendo RxJS, no se necesitan librerías de gestión de estado como Redux. Quizá es una afirmación demasiado contundente, pero sin lugar a dudas, RxJS es un soplo de aire fresco para el ecosistema Javascript.
En realidad RxJS no es nada nuevo, es la versión Javascript de Reactive Extensions (también conocido como ReactiveX). ReactiveX es una librería para gestionar flujos de datos asíncronos que es muy popular en varios lenguajes de programación, como por ejemplo:
ReactiveX se ha vuelto muy popular porque te permite gestionar cualquier tipo de eventos asíncronos de forma fácil y predecible.
¿Para qué sirve RxJS?
En programación hay cantidad de información que llega con un cierto retraso con respecto al momento en que se solicita (como las peticiones a un servidor o el acceso al disco duro), o bien que no sabes cuando va a llegar (como los clicks de un ratón, o los mensajes que recibes de un websocket).
Todos estos casos se pueden modelar como flujos de datos asíncronos. Un flujo de datos asíncrono, por ejemplo, podrían ser todos los clicks de ratón que ejecuta el usuario en cualquier momento, desde que empieza a mirar una web hasta que la cierra.
De hecho, ReactiveX es especialmente interesante en el mundo web, porque la interacción web se basa principalmente en eventos, y un conjunto de eventos a lo largo del tiempo es un flujo de datos asíncronos.
Los navegadores utilizan eventos para indicar que ha sucedido algo, como por ejemplo:
- Que se ha acabado de cargar el HTML de la web
- Que un botón ha recibido un click
- Que ha habido un cambio del valor de scroll
- Que ha habido un cambio sobre un input de un formulario
Por eso RxJS está ganando tanta tracción: es una librería Javascript que te ayuda a gestionar flujos de eventos con facilidad, en un ecosistema (la web) que está fuertemente basado en eventos.
Cuando usar RxJS
Como norma general, te interesa usar RxJS para todo código que tiene que gestionar más de un evento o requiere encadenar varias operaciones asíncronas. También te ayuda especialmente cuando necesitas gestionar de forma individual el éxito o error en la ejecución de varias operaciones asíncronas.
Ejemplos claros que se benefician de RxJS:
- Un indicador de scroll: Gestionas eventos de scroll y manipulas el valor actual de scroll para obtener la posición del indicador.
- Un sticky header: De nuevo gestionas eventos de scroll, y decides qué clase asignar al header en función de la posición.
- Un mecanismo de drag&drop: Gestionas y combinas varias secuencias de eventos (mousedown, mousemove, mouseup).
- Una caja de búsqueda: Gestionas eventos de tecla, estrategias de debounce, llamadas a servidor (con cancelación si es necesario)…
- Validación de formularios: Puedes modelar cada input como un flujo de eventos, filtrarlos, validarlos y combinarlos entre sí.
- Un chat a tiempo real: Cada usuario representa un flujo de eventos y conforme van llegado mensajes (eventos) actualizas la interfaz. Si se trata del propio usuario, además, envías los datos por la conexión.
- Gestionar la lógica de un juego: Recibes eventos (clicks, movimientos, etc) y aplicas la lógica del juego en función de estos.
Como ves, he ido de ejemplos simples y concretos, a situaciones más complejas y abiertas. Lo que es importante es que veas que RxJS es una herramienta de ayuda para todas ellas.
¿Cómo aprender?
El único inconveniente de RxJS, es que su curva de aprendizaje puede parecer complicada para alguien con poca experiencia.
En los próximos artículos voy a ir detallando los conceptos principales de RxJS, así como los operadores más habituales. Aunque si no puedes esperar y quieres ir al grano, te recomiendo darle un vistazo a mi curso de RxJS.
RxJS Nivel PRO
Y mientras trabajo en mi próximo artículo, dime: ¿Ya conocías RxJS? Y en ese caso… ¿puedes ponerme ejemplos concretos donde te sea útil? Cuantos más ejemplos tenga para compartir, más fácil me será mostrar los beneficios de RxJS en los próximos posts.
¿Te ha gustado este artículo? No te cortes, déjame un comentario y ayúdame a compartirlo 😉
Interesante, gracias.
Nos pones los dientes largos, esperamos los siguientes artículos.
🙂
Enrique gracias por compartir tus conocimientos…tus cursos son muy buenos….!!!
Muy buenas! A mi me encanta la integración que tiene en Angular con formularios reactivos. Tienes una caja de búsqueda y cada cambio pasa a traves de un filtrado de operadores.
Estoy en tu curso de Angular en udemy y la verdad que explicas muy bien, claro, conciso y con un excelente timbre de voz. Me encantaría que hicieras un curso de Javascript. Saludos.
Gran trabajo, pero no se ven las imágenes podrías colocarlas
Excelente!!