Cuando aprendemos a programar por primera vez, nos enseñan la programación estructurada dicta las variables: declarar variables, ciclos y condicionales. Esto es muy fácil. Es tan fácil, que hicimos un video llamado Aprende a programar en 20 minutos que tiene millones de vistas en Youtube y que le arde a varios programadores porque dicen que no se puede aprender los patrones de diseño, la arquitectura de software, los frameworks o librerías, los entornos de desarrollo, entre otros, en 20 minutos. ¡Por supuesto que no! Pero ese video te explica simplemente los conceptos básicos para perderle el miedo a la programación y poder entonces comenzar tu carrera en la programación. Por ejemplo, ya podrías tomar nuestro curso Programación desde cero que es 100% gratis. Si nunca has programado en tu vida, este es el curso que estás buscando.
Luego que entiendas la programación estructurada, te enteras que existe algo llamado paradigmas de programación y la cosa deja de ser tan bonita. Y te preguntas ¿habré escogido bien mi carrera? ¿Para qué me metí en esto? No comprendo de qué va todo este asunto de la programación. Y es que los paradigmas son diferentes formas de programar, diferentes maneras de ir al mismo resultado, pero algunos paradigmas funcionan mejor en ciertos escenarios y otros paradigmas mejor en otros.
Por ejemplo, uno de los paradigmas más usados en el mundo, es la programación orientada a objetos, que si no sabes de qué se trata, tenemos la mejor explicación en español aquí en YouTube. Otro de los paradigmas más usados en el mundo es la programación reactiva, que como su nombre lo dice, trata de reaccionar a los cambios. Eso es todo. Sencillo. Claro que tiene varias cositas en el medio que te vamos a explicar en este blog, pero básicamente, se trata de reaccionar al cambio.
Además, la programación reactiva es un concepto que todo programador debe entender porque te vas a enfrentar tarde o temprano con ella. Así que ponte cómodo y lee este blog para comprender más a fondo qué es la programación reactiva.
¿Qué es la programación reactiva?
Ahora, volviendo a la programación reactiva, vamos a definirla. La programación reactiva es un paradigma de programación asíncrona orientado al flujo de datos y a la propagación del cambio. Súper fácil, ¿no es cierto? Sí, ya sé que dicho de esta manera no suena tan sencillo, pero te voy a dar un ejemplo para que lo entiendas de una vez por todas.
En primer lugar, pensemos en el canal de Youtube de EDteam. Cuando llegas al canal, lo primero que haces, es sorprenderte por todos los buenos videos que tenemos en el canal. Entonces te provoca guardar el canal en tus favoritos para poder volver más adelante y seguir viendo videos de ese canal. Más tarde, entras al canal a ver si hay nuevo video. Pero no hay. Entonces, unas horas después, vuelves al canal a ver si hay nuevo video, pero no hay. Al día siguiente, tempranito, entras al canal de Youtube de EDteam a ver si hay nuevo video, pero no hay. En este punto, ya te estás desesperando, pero le das otra oportunidad. Más tarde, entras y ya hay nuevo video, y te pones a verlo.
Sin embargo, este proceso pudo ser más fácil. Te habrías suscrito al canal y habrías activado la campanita, y Youtube te notificaba. Esto es lo que pasa en la programación reactiva. Es decir, en lugar de que un componente vaya a preguntarle a otro:
-Oye, ¿cambiaste?
-No, regresa más tarde.
Al rato:
-Oye, ¿cambiaste?
-No, regresa más tarde.
Y así sucesivamente hasta que encuentre un cambio. Ese proceso es completamente ineficiente porque estás consumiendo recursos haciendo una llamada a una fuente de datos cada cierto tiempo. Es mejor que, cuando la fuente de datos cambie, te notifique a ti. Igual que el canal de Youtube mandándote la notificación.
En nuestro ejemplo, el canal de Youtube se llama Observable, que es el que notifica a todos los que estén suscritos. Se llama suscripción también en la programación reactiva, igual que en YouTube y todos los que están suscritos al Observable, se llaman Observer. Entonces, el canal de YouTube es el Observable. La suscripción, es la función a través de la cual tú dices “quiero recibir notificaciones”, y tú eres el Observer. Esos son los tres elementos básicos de la programación reactiva.
No obstante, ampliaremos la explicación ¿Recuerdas a definición que te mencioné anteriormente? dijimos: “paradigma de programación asíncrono orientado al flujo de datos y a la propagación del cambio”.
¿Qué es ese trabalenguas? en primer lugar, sabes que paradigma es un estilo de programar. Eso ya lo sabemos. Vamos a lo siguiente: asíncrono. Significa que no sabemos cuándo van a haber cambios. Sabemos que EDteam va a subir nuevo video, pero no sabemos qué día ni a qué hora. Eso es asíncrono. Luego, tenemos “flujo de datos”, se trata de un conjunto de datos que va a cambiar en el futuro y hay una función para escuchar esos cambios. Esa función, como ya te dije, se llama suscripción. Y luego, la propagación del cambio, que significa notificar a todos los observadores cuando cambia algo en la fuente de datos.
Te pongo otro ejemplo para que quede mucho más claro: compras el curso de programación reactiva en EDteam para dominar este paradigma, con esa compra, te llegará un correo agradeciéndote por la compra e informándote que ya puedes acceder al curso. También te notificará la misma plataforma de EDteam con un mensaje, e, igualmente, al profesor para que sepa que compraron su curso y esté al tanto de cuanto porcentaje le toca por esa compra. Además, notificará al equipo de EDteam por Slack, para que todos celebremos que se vendió un nuevo curso. Si te fijas, cumple con el concepto de programación reactiva:
Es asíncrono, porque no sabemos en qué momento llegará una nueva venta; hay un flujo de datos porque todos los días hay ventas de cursos y también hay propagación del cambio, porque notificamos a los Observer, que sería el equipo de EDteam, el profesor y la persona que compró el curso.
Otros ejemplos serían las notificaciones de las apps en tu teléfono, los chats como WhatsApp o Telegram, el carrito de Uber que se va moviendo mientras tú esperas que llegue a tu destino o la calidad de video en Netflix, en YouTube o en cualquier plataforma de streaming, que baja cuando la conexión baja y mejora la calidad, cuando la conexión mejora. Todos ellos están reaccionando a los cambios de un flujo de datos. Eso es la programación reactiva.
Manifiesto reactivo
Y todo esto nace a partir de un manifiesto reactivo, que define las cuatro características que debe tener toda aplicación reactiva: responsivos, elásticos, orientados a mensajes y resilientes.
En primer lugar, el sistema debe ser responsivo. Es decir, que debe tener tiempo de respuesta bastante rápidos, que permitan que el usuario tenga una buena experiencia de la aplicación y que también permitan detectar errores y corregirlos bastante rápido. Por otro lado, el sistema debe ser resiliente. Significa que si hay algún error, el sistema no se caiga. Debe poder hacer rápidamente una nueva petición o levantar alguna réplica para volver a intentar y seguir funcionando. Por otro lado, debe ser elástico, es decir, aguantar diferentes tipos de carga. Mucha carga de usuarios, poca carga de usuarios y seguir funcionando sin problemas. También orientado a mensajes. Es decir, que las diferentes partes de la aplicación, se envían mensajes entre ellas, se comuniquen, para poder desacoplarla y que no sea una sola aplicación monolítica.
Conceptos de la programación reactiva
Y ahora que ya sabes que es la programación reactiva y el famoso manifiesto reactivo, te voy a explicar los conceptos básicos que debes comprender en este paradigma. En primer lugar, el stream de datos o el flujo de datos. Es un flujo de datos constante que está cambiando, y cuando cambia, ya sabes, se notifica a los observadores. En nuestro ejemplo, serían los videos que se suben al canal de Youtube.
Luego está el Observable, que es una función que captura ese flujo de datos y que espera que alguien se suscriba a él. Si nadie se suscribe, el Observable no hace nada. En nuestro ejemplo, este Observable sería el botoncito de suscribirse en nuestro canal de EDteam. Luego está el subject, que es un emisor de eventos. Cuando hay un cambio en el flujo de datos, como cuando se sube un nuevo vídeo, el observable se entera de ese cambio y a través del subject, le envía a todos los observers, a todos los que están suscritos. En nuestro ejemplo del canal de YouTube, el subject sería la función interna que tiene YouTube para notificar a todos los suscriptores.
Luego tenemos la suscripción, que es la función para tú conectarte con un observable y recibir notificaciones cuando los datos cambien. En nuestro ejemplo, sería el proceso de hacer clic en el botón de suscribirte y en la campanita.
Y al igual que en Youtube, en la programación reactiva también puedes desuscribirte cuando ya no quieres recibir notificaciones. Luego encontramos el Observers, que es el componente que se suscribe al Observable para recibir notificaciones. En nuestro ejemplo, serían todos ustedes, que se suscriben al canal de Youtube.
Por último, tenemos los Operator, que son funciones puras que modifican el flujo de datos antes de llegar al Observer. Es decir, el Observable envía los datos a cada Observers, pero en el medio podría haber un Operator. Por ejemplo, un temporizador que retrase una notificación unos segundos para no recibir muchas notificaciones de golpe. Y así es como funciona la programación reactiva.
Para llevar todo esto a código, tomas el curso de programación reactiva en EDteam.
Patrón Observador
Y todo esto de la programación reactiva se basa en el patrón observador, que es un patrón de diseño, que hace exactamente lo que te acabo de explicar. Es decir, que se suscriben varios observadores a un sujeto, y cuando los datos cambian, notifica a todos los observadores. Tal cual lo te he explicado de la programación reactiva.
¿Qué es Reactivex (RX)?
Es un conjunto de librerías que implementan la programación reactiva a diferentes lenguajes como Java, con RXJava, JavaScript con ERJS, C# con RX.Net, Scala con EXScala, Kotlin con RXKotlin, Swift con RXSwift, Dart con RXDart, entre otros. Es decir, es un conjunto de proyectos Open Source que se encargan de llevar este paradigma, que es conceptual, llevarlo a una librería que lo implemente en diversos lenguajes.
De hecho, uno de los frameworks que metió con mucha fuerza el paradigma de la programación reactiva, fue Angular, con la versión 2. Pero actualmente, es algo que se usa en practicamente en todas las áreas de la programación.
Ejemplos de programación reactiva con JavaScript
Si tu has estudiado JavaScript, sabes que puedes capturar un click con un event listener. Detectas el elemento, le pasas un addEventListener, el tipo de evento que vas a escuchar y una función, que se va a disparar cuando se recibe ese click.
El problema con esta forma de programar, es que ya tienes un consumo de memoria desde el inicio, porque ya estas escuchando el evento. No es significativo, pero si queremos hacer una aplicación muy compleja, como un videojuego, que tenga muchos clicks y movimientos, el consumo de recursos si será mucho más pesado.
Con la programación reactiva, en cambio, primero creamos el Observable a partir del elemento del DOM y luego suscribimos un Observer a ese Observable y eso es todo. RXJS hace todo por debajo, para que este ahorre mucho consumo de memoria.
Incluso, podemos pasar un Pipe por el Observer, para que cuando reciba un flujo de datos, le haga transformaciones y recién, con esas transformaciones, ejecute una función. En nuestro ejemplo, le estamos diciendo: espérate medio segundo antes de notificar.
Y ese es un ejemplo muy sencillo de un caso muy puntual. Pero te pongo otro ejemplo: imagínate que quieres hacer un programa para pintar con el mouse, que donde se mueva el mouse, vayas dejando una estela. Eso lo puedes hacer con un addEventListener, escuchando la posición del mouse y pintando según donde se pare el mouse, pero el consumo de recursos es brutal.
Ahí te conviene mucho la programación reactiva que notifica al Observer solamente cuando hay cambio, y, de es amanera, dibujas de manera fluida.
Y si no lo sabias, #LoAprendisteEnEDteam.