Text
Reactive Programming
Mas porque?
C10K Problem
C10K Problem
É otimizar os soquetes de rede para lidar com um grande número de clientes ao mesmo tempo.
Arquiteturas/Padrões
Reactor Pattern
Reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change
Reactive Programming is programming with asynchronous data streams
André Staltz
Data Streams?
síncrono
assíncrono
único
múltiplo
Objeto
Promise
Observable
Array
Reactive Programming
O que mais é reativo?
Ações do usuário
Estado da aplicação
Validações de regras do sistema
Qualquer fonte de dados, assíncrona ou não!
Eventos do sistema
RxJS
Reactive Extensions Library for JavaScript
Quem está usando esse paradigma?
Observers do jeito certo!
ReactiveX é uma combinação das melhores ideas como
padrão Observer, Iterator e programação funcional
Observers do jeito certo!
Subject/Observables
Observables
São coleções preguiçosas de múltiplos valores assíncronos
Observable
const { Observable } = rxjs
const observable = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
// Não vamos esquecer do subscriber!
observable
.subscribe(x => console.log(`value of x is ${x}`))Subject
É um tipo especial de Observable que permite valores a serem "multitransmitidos" para vários Observers
Subject
const { Subject } = 'rxjs';
const subject = new Subject();
subject.subscribe({
next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
next: (v) => console.log(`observerB: ${v}`)
});
subject.next(1);
subject.next(2);Operadores
Anatomia dos Operadores
Map
Map
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(map(ev => ev.clientX));
positions.subscribe(x => console.log(x));Filter
Filter
import { fromEvent } from 'rxjs';
import { filter } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const clicksOnDivs = clicks
.pipe(filter(ev => ev.target.tagName === 'DIV'));
clicksOnDivs.subscribe(x => console.log(x));E como fica na vida real?
Me mostre no código!
Quem pode me ajudar com RxJs?
Obrigado!
