Programación reactiva con RxJS

Hoy en día el tiempo de carga y la respuesta constante a una interacción del usuario en nuestras aplicaciones móviles o web lo es todo, los paradigmas de non-blocking y la programación reactiva han sido el salvavidas que nos sostiene e impulsa un paso más adelante en este mar de herramientas disponibles para desarrollar, y es precisamente de esta última de la que hablaremos en esta entrada.

Las aplicaciones actuales se caracterizan por no bloquear al usuario, éste puede seguir interactuando con nuestra interfaz mientras se ejecuta una petición o un proceso disparado por una interacción anterior sin sentarse a mirar un loader infinito si nuestro cliente presenta una mala calidad de conexión. Esta asincronía entre la petición y su respuesta se ha vuelto el canon de trabajo para agilizar los procesos en los servicios que se conectan a internet para consumir data, por ejemplo, de una API.

Es al desarrollo de este tipo de aplicaciones al que se le conoce como programación reactiva, es decir, programar con flujos de datos asíncronos donde se dispara un evento y el desarrollo del mismo se observa hasta que retorna un valor, un error o un estatus de completado, reaccionando a la respuesta de este evento cuando sea retornada.

Ahora bien, ¿hay librerías especializadas para trabajar con programación reactiva? La respuesta es sí, y entre las más usadas está RxJS (Reactive Extension for JavaScript) y es la librería que estudiaremos en esta entrada.

Conceptos básicos

Bien, ya sabemos de qué va la programación reactiva y los procesos asíncronos, pero antes de pasar a ver ejemplos de código con RxJS, debemos manejar algunos conceptos que nos serán útiles al momento de entender lo que estamos haciendo a través de esta librería:

Observable

Como mencioné anteriormente, con RxJS podemos observar un flujo de trabajo asíncrono, por lo que un observable representa entonces una serie de valores posibles que llegarán o se retornarán en un futuro.

Observer

Representa una colección de callbacks que estarán atentas a los valores retornados por el observable.

Subscription

Nos permite suscribirnos a la ejecución o la finalización de un observable, obteniendo su respuesta y permitiéndonos ejecutar cualquier cosa que queramos al obtenerla.

Operators

Los operadores son herramientas bastante útiles e interesantes, nos permiten realizar operaciones sobre la data obtenida bajo un esquema de programación funcional, usando operaciones como map, filter, concat, entre otras.

Ejemplo básico

Bien, ahora que tenemos presentes los elementos básicos que usaremos en RxJS, veamos un ejemplo para compararlo con el uso de JavaScript puro, tomemos el evento más sencillo, el evento click, en JavaScript, lo detectamos con algo como esto:

button.addEventListener('click', () => console.log('Haz hecho click!'));

En este caso, registramos un evento click a través del event listener de JavaScript sobre un elemento button almacenado en una variable del mismo nombre, veamos la contraparte de la captura del mismo evento con RxJS:

Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('Haz hecho click!'));

Como vemos, con RxJS creamos un observable y nos suscribimos a él, la diferencia radica en que nos estamos suscribiendo a un evento futuro dentro de una serie de observables, dentro de nuestro subscribe, podemos hacer cualquier cosa que queramos que se dispare en un evento futuro de tipo click de ese elemento button.

Ahora te estarás preguntando, ¿Sólo puedo crear observables y suscribirme a eventos como el click? la respuesta es no, puedes observar eventos, valores, cambios de estado e incluso encadenar observables para ejecutar funciones anidadas a partir de un evento que aún no tiene respuesta, ¿Genial no?

Entremos en acción

Veamos un ejemplo más completo, hagamos un reloj mostrando la hora en tiempo real usando un observable, partamos del hecho que tenemos un div con un id hora en nuestro html:

Algo de css:

#hora {
   font-size: 300px;
}

Ahora si, veamos el uso de la librería en JavaScript:

const time$ = Rx.Observable
     .interval(1000)
     .map(() => {
          const time = new Date();
          return {
               hours: time.getHours(),
               minutes: time.getMinutes(),
          };
      })
      .subscribe(({ hours, minutes}) => {
            document.getElementById("hora").innerHTML = hours+":"+minutes;
      });

Veamos qué está pasando línea por línea:

  1. Declaramos una constante time, el “$” indica que es un hilo o stream de datos
  2. Igualamos la constante a un nuevo observable de RxJS que tendrá un intervalo de actualización de 1 segundo
  3. Antes de suscribirnos, llamamos al operador map para realizar y retornar algunas operaciones, en este caso, retornamos la hora y minutos actuales
  4. Nos suscribimos al observable del cual recibimos las horas y los minutos, dentro del subscribe, asignamos los valores a nuestro html y ¡todo listo!

codepen-card

Puedes ver el ejemplo en ejecución en este codepen.

Observables vs Promises

Ahora bien, seguramente has trabajado antes con asincronía y te estás preguntando ¿Dónde quedaron las promesas? O una pregunta menos romántica, ¿Qué diferencia hay entre un observable y un promise? La diferencia está en que una promesa retorna un único valor, bien sea si es exitosa o no, mientras que el observable puede retornar múltiples valores en distintos tiempos de recepción, además, con los observables tenemos más libertad de manipulación, por ejemplo, podemos cancelarlos en el momento que queramos.

Conclusiones

Hemos visto cómo trabajar con observables, el objeto más común usado en RxJS, sin embargo, la librería es bastante extensa y tiene muchas utilidades interesantes y si te estás preguntando si es compatible con otros lenguajes, Rx también puede usarse en Java, JavaScript, C#,C# (Unity), Scala, Clojure, C++, Python, Swift y PHP.

Puedes acceder a la documentación oficial de la librería a través de este enlace. No olvides suscribirte a nuestro blog y prometo estar atento y observar todos tus comentarios 🙂 hasta la próxima entrada, ¡gracias por leernos y que tengan buen código!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s