Programación Reactiva [Frontend]: Introducción y Técnicas #HackYourCareer @geeks_academy

Al hablar de Programación Reactiva lo primero que hay que saber si esto es algo nuevo o es ya un paradigma con solera. Los orígenes de los sistemas reactivos definitivamente no son nuevos y se remontan a los años 70 y 80 a pesar de que fueran adelantados a su tiempo y hoy en día sigan en "hype". Otro dato interesante es que desde que se publicó el Manifiesto Reactivo, pasó de ser una técnica no reconocida para la construcción de apps, a convertirse en parte de la estrategia general de una plataforma.

Figura 1: Programación Reactiva [Frontend]: Introducción y Técnicas

Sin embargo, el Manifiesto Reactivo hacía referencia a sistemas reactivos y no a programación reactiva, y debes saber que son cosas distintas. Que algo sea reactivo hoy en día se asocia con varias cosas diferentes y normalmente suele ir acompañado de palabras como transmisión, ligereza y en tiempo real. Veamos las diferencias entre un sistema reactivo y la programación reactiva.

Figura 2: The Reactive Manifesto V2 (2014)

Diferencia entre Sistemas reactivos vs Programación reactiva.

• Reactividad a nivel de sistema: la base de un sistema reactivo es la coordinación de mensajes entre las aplicaciones permitiendo la concurrencia y desacople en los sistemas distribuidos. Y esta era la visión en los años 70 y 80 que exponía el Manifiesto Reactivo.

• Reactividad a nivel de aplicación: hace referencia a cuando aplicamos estos principios de software reactivos dentro de una sola aplicación y referente a como sus partes se comunican. La coordinación de los datos en las aplicaciones se basan en eventos, y no en mensajes.

Reactividad a nivel de aplicación

La programación reactiva es un paradigma de programación enfocado en el trabajo con flujos de datos finitos o infinitos de manera asíncrona, permitiendo que estos datos se propaguen generando cambios en la aplicación, es decir, “reaccionen” a los datos ejecutando una serie de eventos.

¿Y qué significa que se produce una propagación del cambio? Pues que cuando esos datos cambien, debemos de ser capaces de streamearlos, que sean retransmitidos en directo, en tiempo real, recibiendo cambios.

¿Es una técnica potente o está en desuso? Para responder a esta cuestión, podemos plantearnos otra pregunta. Antes de pensar en reactividad, ¿cómo comunicábamos dentro de una app una pantalla con la otra? En la programación clásica, todo se basa en acciones que nosotros realizamos activamente, como por ejemplo, si queremos algo de la base de datos, hacemos una QUERY o al ORM, o si necesitamos algo de un servidor, hacemos una petición HTTP.

¿Y si queremos actualizar los resultados de una página? Antes de que llegaran React, Vue o Angular, usábamos AJAX, Reload/Refresh de la página incluso tareas programadas (cron tasks) que realizaban peticiones cada cierto tiempo para ver si algo había cambiado… Lo que se trata de un proceso realmente manual en el que podíamos tener retrasos desde que en realidad se había producido ese cambio. En la actualidad, gracias a React, Vue y Angular, podemos lanzar la petición contra el servidor nuevo y renderizar a partir de los resultados de nuevo nuestros componentes.

Figura 3: Angular de Carlos Ruiz en 0xWord

Como conclusión, en la programación reactiva, le damos la vuelta a la idea. La forma de trabajar sería “estoy interesado en tus datos, cada vez que haya un cambio, infórmame.” Nos encontramos entonces con un software que se actualiza de forma autónoma cuando las fuentes de datos de las que dependen se modifican (al contrario que en la programación clásica).

Esto es especialmente interesante en interfaces de usuario, ya que muchas veces necesitamos actualizaciones en tiempo real de la información que estamos viendo, y cada vez es más difícil descubrir cuando algo se ha modificado.

Tecnologías del mercado que permiten usar reactividad

En el mercado existen muchas tecnologías que nos permiten la implementación de reactividad a más alto o bajo nivel, una de las más conocidas es https://reactivex.io/ que tiene APIS para la un gran número de lenguajes como Javascript, PHP, Python, Java, C#, Ruby, Kotlin, etcétera (¡la lista es larga!). Sin embargo, un acercamiento a estas implementaciones podemos verla de la mano de Redux, que nos abstrae de la complejidad de las profundidades de la Programación Reactiva.  

Redux es una herramienta para la gestión de estado en apps Javascript que nació en 2015 y aunque suele asociarse a React, lo cierto es que es una librería agnóstica, que vale la pena conocer aunque no vayas a trabajar con React…

BootCamp Online de Frontend React  

Redux usa el paradigma reactivo solo un poco: el estado es reactivo. Pero Redux observa las acciones despachadas (eventos) desde la distancia y propaga el cambio para que otros componentes puedan reaccionar. Consiguiendo, por tanto, un único stream (un dato observable para el resto de la aplicación), equivalente a los observables que puedes preparar con RxJS. 

Figura 4: Bootcamp Online Frontend React 20 de Septiembre

Si quieres ampliar tus conocimientos y aprender crear interfaces de usuario con programación reactiva, echa un vistazo a nuestro Bootcamp Online Frontend React que da comienzo el próximo 20 de Septiembre, con un duración de 100 horas donde aprenderás hasta 8 tecnologías para comenzar a trabajar como Front-End Developer especializado en Programación Reactiva.

Figura 5: Programa del Bootcamp Online Frontend React

Figura 6: Programa del Bootcamp Online Frontend React

En este Bootcamp Online Frontend React tendrás apoyo semanal por un tutor especialista, sesiones Live-Coding grupales e incluso tutorías 1:1 para que superes la formación con éxito. Ahí contarás como docentes especializados con David Ochando, Ana del Pino y Manuel S. Lemos.

Figura 7: Equipo docente del  Bootcamp Online Frontend React

Si estás pensando en abrirte camino profesional como desarrollador de tecnología, para esta formación no necesitas experiencia previa, y te ayudaremos a que tu entrada en este mundo sea lo más fácil posible. ¡En nuestra Coding School ya somos más de 1.000 alumnos y alumnas online y presencial cada año!

Autor: GeeksHubs Academy