JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
“La programación reactiva es programación con flujos de datos asíncronos”
La Programación reactiva o Rx, es un estilo de microarquitectura y paradigma que implica el enrutamiento inteligente y el consumo de eventos, todos combinados, para cambiar el comportamiento de una aplicación bit.es
Los Sistemas Reactivos son:
- Responsivos: El sistema responde a tiempo en la medida de lo posible.
- Resilientes: El sistema permanece responsivo frente a fallos.
- Elásticos: El sistema se mantiene responsivo bajo variaciones en la carga de trabajo.
- Orientados a Mensajes: Los Sistemas Reactivos confían en el intercambio de mensajes asíncrono para establecer fronteras entre componentes, lo que asegura bajo acoplamiento, aislamiento y transparencia de ubicación.
Recursos Destacados
- The introduction to Reactive Programming you've been missing
- Slides | REACTIVE PROGRAMMING by jonalvarezz
- FCC | A quick introduction to Functional Reactive Programming (FRP)
Recursos
- El paradigma de la programación reactiva: claves para entenderla
- La programación reactiva
- ¿Qué es la Programación Reactiva? Una introducción
Demo online
Una API para la programación asíncrona con flujos observables (RxJS es como Lodash para eventos)
RxJS es una librería para crear programas asincrónicos y basados en eventos mediante el uso de secuencias observables. Proporciona un tipo de núcleo (core type), el “Observable”, tipos de satélites (satellite types) “Observer, Schedulers, Subjects” y operadores inspirados en Array#extras “map, filter, reduce, every, etc” para permitir el manejo de eventos asíncronos como colecciones. Jorge Cano
Recursos Destacados
- reactivex | Web oficial
- ReactiveX/rxjs
- rxjs | Web Oficial
- En mi local funciona | Programación Reactiva con RxJs
- 30 días con RxJS
Recursos
- RxJS in Action
- RxJS: Reactive Extensions For JavaScript
- RxJS - What and Why?
- reactivex.io
- Introducción a la Programación Reactiva: Rx
- Programación Reactiva, uso de la librería RxJs
- Programación Reactiva con RxJs
- RxJS y la programación reactiva
- Programación Reactiva (RX)
- Ejemplo AJAX RXJS
- Learn RXJS. Tutorial con ejemplos
Observable
Los Observables son las secuencias de datos. Observable empaqueta los datos que se pueden pasar de un hilo a otro. Básicamente emiten los datos periódicamente o solo una vez en su ciclo de vida en función de sus configuraciones. Bit.es
Observador (Observer)
Los observadores consumen la secuencia de datos emitida por el observable. Bit.es
Subscription
Representa la ejecución de un Observable, es principalmente útil para cancelar la ejecución. Jorge Cano
Operators
Son funciones puras que permiten un estilo de “programación funcional” de tratar con colecciones con operaciones como mapa, filtro, concat, flatMap, etc. Jorge Cano
Subjects
Es el equivalente a un
EventEmitter, y la única forma de multi-difundir un valor o evento a varios observers. Jorge Cano
Schedulers
Son el componente que le indican a los observables y observadores, en qué hilo deben ejecutarse. Bit.es
Sin Reactividad
// @see: https://rxjs-dev.firebaseapp.com/guide/overview
const button = document.querySelector('button');
button.addEventListener('click', () => console.log('Clicked!'));Con Rxjs
// @see: https://rxjs-dev.firebaseapp.com/guide/overview
const { fromEvent } = rxjs;
const button = document.querySelector('button');
fromEvent(button, 'click')
.subscribe(() => console.log('Clicked!'));Funciones Puras (Purity)
// @see: https://rxjs-dev.firebaseapp.com/guide/overview
// --- Sin RxJS
var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));
// --- Con RxJS
const { fromEvent } = rxjs;
const { scan } = rxjs.operators;
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));Control de Flujos (Flow)
// @see: https://rxjs-dev.firebaseapp.com/guide/overview
// --- Sin RxJS
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
if (Date.now() - lastClick >= rate) {
console.log(`Clicked ${++count} times`);
lastClick = Date.now();
}
});
// --- Con RxJS
const { fromEvent } = rxjs;
const { throttleTime, scan } = rxjs.operators;
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
throttleTime(1000),
scan(count => count + 1, 0)
)
.subscribe(count => console.log(`Clicked ${count} times`));Transformación de Valores (Values)
// @see: https://rxjs-dev.firebaseapp.com/guide/overview
// --- Sin RxJS
let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
if (Date.now() - lastClick >= rate) {
count += event.clientX;
console.log(count)
lastClick = Date.now();
}
});
// --- Con RxJS
const { fromEvent } = rxjs;
const { throttleTime, map, scan } = rxjs.operators;
const button = document.querySelector('button');
fromEvent(button, 'click').pipe(
throttleTime(1000),
map(event => event.clientX),
scan((count, clientX) => count + clientX, 0)
)
.subscribe(count => console.log(count));
¡Recuerda!
- Nunca vayas en contra de al naturaleza de JavaScript
- Abraza que JS es un lenguaje multiparadigma
- Crea scripts híbridos donde podamos mezclar lo mejor de cada paradigma