Programación Reactiva (RX)

Juan Carlos Reyes Fernández

Compartir

Programación Reactiva (RX)

En la publicación de esta semana, he querido dar una breve introducción a la Programación Reactiva, la cual en los últimos años, ha sido un pilar fundamental en la construcción de aplicaciones amigables, robustas y escalables en Internet.

La programación reactiva nos lleva a una nueva forma de construir nuestros programas, los cuales deben ser pensados como un conjunto de flujos de datos (streams), que serán programados para que el sistema “reaccione” ante la presencia de cada uno de éstos datos asíncronos en el tiempo.

Esto nos permite enfocarnos en lo que nuestro código debe hacer, sin tener que codificar cada paso para hacerlo, lo cual resulta en un enfoque más confiable y mantenible para la construcción de software.

RX es un modelo de programación reactiva creado por Microsoft, que nos permite componer fácilmente streams de datos asíncronos.

Provee una interfaz común para combinar y transformar datos desde fuentes muy diferentes (operaciones de filesystem, interacciones de usuarios, etc.)

RX comenzó con una implementación para .NET, pero actualmente tiene una implementación de código abierto para los principales lenguajes de programación.

RX se está convirtiendo en el estándar para programar aplicaciones reactivas. El tipo de datos principal de RX, llamado Observable, está siendo propuesto para su inclusión en ECMAScript 7 como parte del core de JavaScript.

La siguiente URL corresponde al proyecto RX (Reactive Extensions) de Microsoft, y se pueden ver las diferentes implementaciones disponibles:

https://rx.codeplex.com/

Dentro de las implementaciones más utilizadas en la actualidad, se encuentra RxJS, la cual es una implementación de Reactive Extensions para Javascript, y es utilizada como base para la programación reactiva en los frameworks JS más populares.

Cuando hablamos de reactividad, un buen ejemplo son las Hojas de Cálculo.

Las hojas de cálculo como Excel, son reactivas, por ejemplo consideremos que tenemos un valor específico en una celda, y existen otras celdas cuyos valores dependen de la primera. Cada vez que el valor de la primera celda cambie, las demás celdas “Reaccionarán” a éste cambio.

En la hoja de cálculo simplemente declaramos el problema, y no nos preocupamos acerca de cómo el computador calcula el resultado.

Esto es a lo que apunta la programación reactiva. Declaramos relaciones entre los componentes, y el programa evoluciona a medida que las entidades cambian o tienen nuevos valores.

Para entender cómo ver los eventos como un stream de valores, podemos pensar en los clicks del mouse como una secuencia infinita de eventos generados en tiempo real cuando el usuario presiona el botón del mouse. En relación a esta afirmación, podemos profundizar más en este concepto leyendo el paper publicado por Erik Meijer (el creador de RxJS) llamado “Your Mouse Is a Database”, que podemos encontrar en el siguiente link:

http://queue.acm.org/detail.cfm?id=2169076

En la programación reactiva podemos ver los clicks del mouse como un stream continuo de eventos que podemos consultar y manipular.

El hecho de pensar en streams en vez de valores aislados, nos permite pensar en una forma de programar en la cual podemos manipular secuencias enteras de valores que aún no han sido creados.

En la siguiente imagen podemos ver que una secuencia de stream es muy similar a un arreglo, en el cual los elementos están separados por espacios de tiempo en vez de espacios de memoria:

Para poder trabajar con programación reactiva, el punto importante aquí es imaginar el programa completo como un flujo de secuencias de datos

Veamos un código extraído del libro “Reactive Programming With RxJS”, el cual muestra un ejemplo de la forma de manipular eventos en Javascript.

El código imprime en consola las coordenadas de los 10 primeros clicks en el lado derecho de la pantalla:

En el ejemplo anterior vemos que hay código que no es muy relevante desde el punto de vista del requerimiento, ya que se tuvo que crear una variable externa para mantener el estado de los clicks, además de las condiciones que preguntan por la cantidad de clicks realizados.

Volviendo al requerimiento inicial, y viéndolo desde otro punto de vista, lo que se necesita es consultar una especie de base de datos de clicks, y obtener los 10 últimos, para posteriormente validar los que se hicieron en el lado derecho de la pantalla, e imprimirlos en consola.

Esto es lo que podemos realizar precisamente con la programación reactiva, podemos consultar los streams de eventos, filtrarlos, transformarlos, etc.

Lo que necesitamos para poder tratar los streams de eventos como “bases de datos” que pueden ser consultadas, es un objeto que abstraiga el concepto de stream, el cual es llamado Observable:

En el ejemplo realizado en RxJS, podemos ver el tratamiento de los eventos como si fuera un pipeline, al cual finalmente se le suscribe una función que realizará el tratamiento final de los datos del evento previamente “procesados” por la operación filter y take.

Aquí podemos ver que el código es mucho más limpio que en el primer ejemplo, y no es necesario crear variables externas para mantener los estados.

Como podemos ver, la programación reactiva es una manera natural y más fácil de pensar en el código asíncrono. Los flujos de eventos -que llamamos Observables- son una manera elegante de manejar éste tipo de código. Por lo tanto, al trabajar con Observables, enfocándonos en el “pensamiento reactivo” y ayudándonos con frameworks como RxJS, mejoraremos considerablemente la forma de programar actual, e inevitablemente nos iremos convirtiendo en programadores mucho más productivos.

El mundo de la programación reactiva obviamente es mucho más grande que lo expresado en esta publicación, pero lo que se pretende es dar una pincelada inicial para animarlos a adentrarse en este interesante paradigma ampliamente utilizado en la actualidad, y también por empresas de la talla de Netflix (https://medium.com/netflix-techblog/reactive-programming-in-the-netflix-api-with-rxjava-7811c3a1496a).

¡Así que desde ahora no lo olvidemos!: