¿Te gustaría aprender Angular Avanzado?
Tenemos los cursos que necesitas. ¡Haz clic aquí!
¿Qué es la programación reactiva?
La programación reactiva es un paradigma de programación basado en la gestión de flujos de datos asíncronos (streams) y en la propagación del cambio.
RxJS es una librería Javascript de programación reactiva que facilita la composición de código asíncrono basado en secuencias de observables. Esto lo hace gracias a tres patrones de diseño que veremos más adelante. El patrón Observer, el patrón Iterador y la programación funcional.
Angular utiliza de forma nativa la librería RxJS para varias de sus APIs. Por ejemplo, para gestionar las llamadas http con el módulo httpClient. Todos los métodos devuelven un observable y solo son llamados si hay un suscriptor.
No solo Angular utiliza la librería RxJS, otros frameworks como React también lo hacen. Además, hay versiones de la librería para otros muchos lenguajes como Ruby, Java, Python etc.
Patrón Observer
El patrón Observer es muy importante en el concepto de programación reactiva ya que explica perfectamente cómo funciona.
Según este patrón, hay un sujeto que es el productor de la información (stream) y por otro lado hay uno o varios consumidores de esta información. En RxJS el sujeto sería el observable y el consumidor, el observer.
Los observables son los encargados de propagar la información y notificar sus cambios, para ello proporciona métodos a partir de los cuales los observers pueden suscribirse o cancelar la suscripción de sus flujos de datos.
Los observers, por su parte, deciden cuándo quiere suscribirse o cancelar la suscripción a un observable, además, ellos mismos son los encargados de actualizar su propio estado cuando el observable les notifica de un cambio en el stream de datos.
Patrón Iterador
El patrón iterador nos permite recorrer contenedores de información, por ejemplo, un array sin necesidad de conocer su contenido.
Pongamos un ejemplo sencillo. Para recorrer un array con un simple “for”, debemos conocer la longitud de este y su contenido. ¿Qué pasa si tenemos un contenedor el que puede variar su longitud mientras lo recorremos y su contenido es complejo? El patrón iterador soluciona esto.
Cuando queremos recorrer un observable, RxJS nos proporciona dos métodos. hasNext para saber si hay mas datos dentro del iterador. Y next para poder acceder a la siguiente posición del iterador.
Programación Funcional.
El otro patrón en el que se cimienta RxJS es la programación funcional. Un paradigma de programación bastante antiguo pero que vuelve a estar de moda gracias a la programación reactiva.
En la programación funcional el factor mas importante son las funciones, todo está orientado al uso de funciones y estas permiten el paso de otras funciones como argumento.
Las funciones deben ser funciones puras. Esto quiere decir que una función con un mismo argumento de entrada debe devolver siempre el mismo resultado. A priori, podemos pensar que esto es una característica de cualquier función, pero no es así. Si por ejemplo, una función hace uso de una variable global deja de ser pura ya que depende de elemento externo que puede variar.
Otra característica de las funciones puras es que no tienen efectos colaterales y no mutan datos. Es decir, en ningún caso modifican el valor de entrada o cualquier otra variable global.
RxJS proporciona varios operadores muy utilizados para tratar flujos de datos. Estos operadores son funciones puras que a su vez llaman a otras funciones puras. Los operadores más usados son
filter, map y reduce.
- Filter se utiliza para filtrar una colección de datos en base a un parámetro.
- Map se utiliza sobre una colección de datos para devolverlo de forma modificada.
- Reduce se usa para obtener un valor relacionado con la colección de datos.
En RxJS se trabaja con stream de datos a los que se le encadenan varias funciones (operadores) que siempre devuelven un observable pero que nunca mutan el original. Esto se conoce como pipeline.
Conclusión.
Con el auge de las aplicaciones web que tratan gran cantidad de datos, estas son cada vez más complejas. En muchas ocasiones demandan la visualización de datos de muchos orígenes distintos. Se requiere que estos datos se actualicen de forma recurrente o en tiempo real. Es por esto que la programación reactiva ha tomado un papel relevante en los últimos años. Ya que facilita y optimiza la gestión de todos estos flujos de datos.
Contar con un equipo de front-end que conozca bien el funcionamiento tanto de la programación reactiva como de la librería RxJS es fundamental para cualquier empresa de desarrollo de software.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
¿Te gustaría aprender Angular Avanzado?
Tenemos los cursos que necesitas. ¡Haz clic aquí!
