RxJS:
Everything is a Stream

Tomasz Ducin

@tomasz_ducin

Tomasz Ducin

5.11.2019, Wrocław

RxJS:

Everything is a Stream

RxJS:

Everything is a Stream

Tomasz Ducin

5.11.2019, Wrocław

Everything is a Stream

Tomasz Ducin

22nd October 2019, Gliwice

Everything is a Stream

Tomasz Ducin

22nd October 2019, Gliwice

Tomasz Ducin

1.10.2019, Kraków

RxJS:

Everything is a Stream

RxJS:

Everything is a Stream

Tomasz Ducin

1.10.2019, Kraków

Everything is a Stream

Tomasz Ducin

12th July 2019, Łódź

Everything is a Stream

Tomasz Ducin

12th July 2019, Łódź

FUNctional Reactive Programming:

Everything is a Stream

Tomasz Ducin

8th May 2019, Gdańsk

FUNctional Reactive Programming:

Everything is a Stream

Tomasz Ducin

8th May 2019, Gdańsk

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

21st November 2017, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Everything is a Stream

Tomasz Ducin

9th April 2018, Warsaw

Hi, I'm Tomasz

Independent Consultant & Software Architect

Trainer, Speaker, JS/TS Expert

ArchitekturaNaFroncie.pl (ANF)

Warsaw, PL

tomasz (at) ducin.dev

@tomasz_ducin

  • streams
  • IoC & reactivity
  • subscriptions
  • hot and cold
  • subjects

agenda

STREAMS

source$.pipe(
  operator1(someDetails),
  operator2(), // no details
).subscribe(consumer);

currencyRates$
  .map( curr => curr.EUR )
  .sample(5000)
  .subscribe(display);

- data & time

Stream

[   ,   ,   ,   ,   ]

A

B

C

D

E

,

A

B

C

D

E

,

,

,

completed

Array

- data

- data & time

Stream

A

,

,

,

never
completed

Variable

- data

A'

A''

A'''

A

A'

A''

A'''

,

RX

REDEFINES

WHAT A VARIABLE IS

STREAMS

TO PULL OR
TO PUSH?

Reactive Streams

ES6 Generators

lazy

stream$
  .subscribe(consumer)
iterator.next()

push-based

pull-based

iterators

backpressure

-

OBSERVER

OBSERVABLE
STREAM

ITERATOR +

OBSERVER +

FP

LET'S PLAY THE

OBSERVER

INVERSION
OF CONTROL

INVERSION

OF CONTROL

OF CONTROL

INVERSION

OF

ANY OTHER IoC?

pull vs push

Redux store API:

  • store.dispatch(action)
  • store.getState() - pull-based
  • store.subscribe(listener) - push-based

IoC, the Rx way 

action$
  .scan(reducer)
  .subscribe(renderer)
action$.scan(reducer).subscribe(renderer)

DECLARATIVE

let rate = 3.94;
let amount = 1000;
let exchange = amount / rate; // 253.80

rate = 3.97;
exchange // DESYNC, sync manually!

IMPERATIVE 

let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$ / rate$; // 253.80

rate$ = 3.97;
exchange$ // 251.89
let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$.combineLatest(rate$,
  (amount, rate) => amount / rate);

DECLARATIVE 

let rate$ = 3.94;
let amount$ = 1000;
let exchange$ = amount$.combineLatest(rate$,
  (amount, rate) => amount / rate);

// rate$ == 3.97 ---> exchange$ == 251.89

what it should do

what it is

SUBSCRIPTIONS

subscription

1

subscriptions

many

HOT AND COLD

unicast

multicast

RxJS subjects

RxJS observables

S

separate producer

shared producer

COLD

HOT

unicast

multicast

sources

consumers

subject

sourceA$.subscribe(subject$);
sourceB$.subscribe(subject$);
sourceC$.subscribe(subject$);
subject$.subscribe(consumerA);
subject$.subscribe(consumerB);
subject$.subscribe(consumerC);
let subject$ = Rx.Subject();

phone call

sharing

.publish()
.refCount()

.publish()
.connect()

==
.share()

multicast +

publish

publishLast

publishBehavior

publishReplay

+ Subject

+ AsyncSubject

+ BehaviorSubject

+ ReplaySubject

=

=

=

=

SUBJECTS

= Observables + Observers

the actor subscribes to the prompter

the audience subscribes to the actor

LATE SUBSCRIPTION

the family subscribes to the soccer game late

ASYNC SUBJECT

the auctioneer subscribes to all participants

HOT AND COLD

MULTICAST
& UNICAST

HOT AND COLD

REACTIVE STATEMENTS

<script>
  const price = 9.99
  let quantity = 0;
  $: totalPrice = quantity * price;
  $: console.log("total:", totalPrice);

  function handleClick() {
    quantity += 1;
  }
</script>

functions

sync vs async

promises

async await

coroutines

CSP

generators

callbacks

events

reactive streams

run to completion

event loop

THANK YOU!

@tomasz_ducin

tomasz@ducin.it

ducin.it

BACKPRESSURE