RxJs es una biblioteca para programación reactiva que permite tratar flujos de datos asíncronos como colecciones mediante el uso de Observables. Los Observables representan valores futuros que pueden ser manipulados mediante operadores funcionales, y son observados por Observers que definen cómo reaccionar a los valores emitidos. RxJs soporta múltiples lenguajes de programación y provee un enfoque funcional para el manejo de eventos asíncronos y colecciones.
2. ¿Qué es ReactiveX?
• Una API para la programación
asíncrona con flujos observables
• Patrón OBSERVER
• Patrón ITERATOR
• Programación funcional con
Colecciones
3. ¿Por qué Observables?
• Tratar flujo de eventos asincrónicos con las mismas operaciones que
tratamos colecciones
• Código mas legible
• Código menos propenso a errores
• Soportar emisión de valores futuros
5. Registro de eventos tradicional
var button = document.querySelector('button’);
button.addEventListener('click', () =>
console.log('Clicked!'))
var button = document.querySelector('button’);
Rx.Observable.fromEvent(button, 'click’)
.subscribe(() => console.log('Clicked!')
Registro de eventos con RxJs
9. Observable
Representa la idea de una colección con valores futuros
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
1 432
10. Pull
• El consumer decide cuando recibe la información del producer
• El producer no sabe cuando entregara los datos al consumer
• Todas las funciones implementan un Pull System
• ES2015 introdujo Generator Function y Iterators
11. Push
• El producer determina cuando le enviar la información al consumer
• El consumer no sabe cuando va a recibir la información
• Promesas es el sistema Push mas usado hoy en día
12. Push Vs Pull
Single Multiple
Pull Function Iterator
Push Promise Observable
Producer Consumer
Pull
Pasivo: produce datos cuando
se solicita
Activo: decide cuándo se solicitan
los datos.
Push
Activo: produce datos a su
propio ritmo.
Pasivo: reacciona a los datos
recibidos.
13. Observer
Sabe como escuchar los valores retornados por el observable
console.log('Antes de suscribirme’);
observable.subscribe({
next: x => console.log('Valor : ' + x),
error: err => console.error('Error: ' + err),
complete: () => console.log('Completo'),
});
console.log('Despues de suscribirme’);
1 432
14. Observable + Observer
1 432
Antes de suscribirme
Valor : 1
Valor : 2
Valor : 3
Despues de suscribirme
Valor : 4
Completo
15. var observable = Rx.Observable.from([10, 20, 30]);
var subscription = observable.subscribe(x =>
console.log(x));
// Mas tarde:
subscription.unsubscribe();
Subscription
Representa la ejecución de un Observable, es principalmente útil para
cancelar la ejecución.
16. Subject
Es el equivalente a un EventEmitter, y la única forma de difundir un
valor o evento entre múltiples observadores.
var subject = new Rx.Subject();
subject.subscribe({
next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
next: (v) => console.log('observerB: ' + v)
});
subject.next(1);
subject.next(2);
17. Operators
• Funciones que permiten un estilo de programación funcional
• Podemos manipular colecciones
• No cambian la instancia observable existente. En su lugar, devuelven
un nuevo Observable
• Son métodos del tipo Observable, como .map (...), .filter (...), .merge
(...), etc.