1 of 91

The Ease Of Using�Higher Order Operators

Created by Michael Hladky

@Michael_Hladky

ng-India

2 of 91

Agenda

  • Terminology
  • Overview Of Explained Operators
  • Categorisation
  • Algebraic Approach
  • Primitive Operator Parts
  • Merging And Flattening Operators
  • Combining Operators
  • “All” Operators

@Michael_Hladky

ng-India

3 of 91

combine�Latest

expand

combineAll

withLatest�From

forkJoin

zip

zipAll

merge�(deprecated)

concat�(deprecated)

mergeMap�(alias flatMap)

mergeAll

mergeScan

merge

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

exhaustMap

switchAll

scan

exhaust

startsWith

endsWith

groupBy

onError�ResumeNext

audit

buffer

bufferToggle

skipUntil

debounce

takeUntil

windowCount

window

windowTime

windowWhen

windowToggle

catchError

38�Operators

mapTo

map

4 of 91

Angular by heart and code

Development, Workshops, Community

Michael@Hladky.at

5 of 91

VIENNA

DELHI

6 of 91

Terminology

@Michael_Hladky

ng-India

7 of 91

Observable Order

First-Order Observable

2

Second-Order Observable

1

Third-Order Observable

@Michael_Hladky

ng-India

8 of 91

Higher Order Observable

First-Order Observable

Higher-Order Observable

2

1

@Michael_Hladky

ng-India

9 of 91

Operator Order

firstOrder( => )

secondOrder( => )

secondOrder( => )

secondOrder( => )

thirdOrder( => )

@Michael_Hladky

ng-India

10 of 91

Higher Order Operator

firstOrder( => )

higherOrder( => )

@Michael_Hladky

ng-India

11 of 91

Static Function

output$

static function

@Michael_Hladky

ng-India

12 of 91

Operator Function

output$

operator function

input$

@Michael_Hladky

ng-India

13 of 91

Categorisation

@Michael_Hladky

ng-India

14 of 91

Higher Order

First Order

1

2

3

4

15 of 91

STATIC FUNCTION

OPERATOR FUNCTION

output$

static function

output$

operator function

input$

16 of 91

Algebraic Approach

@Michael_Hladky

ng-India

17 of 91

Algebra:� from Arabic "al-jabr", �literally meaning �"reunion of broken parts"

Wikipedia

“

”

@Michael_Hladky

18 of 91

Algebra: Reunion Of Broken Parts

switch

concat

All

exhaust

merge

Map

To

Map

switchMapTo

switch

To

@Michael_Hladky

19 of 91

Overview Of�Explained Operators

@Michael_Hladky

ng-India

20 of 91

combine�Latest

expand

combineAll

withLatest�From

forkJoin

zip

zipAll

merge�(deprecated)

concat�(deprecated)

mergeMap�(alias flatMap)

mergeAll

mergeScan

merge

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

exhaustMap

switchAll

exhaust

startsWith

endsWith

groupBy

onError�ResumeNext

audit

buffer

bufferToggle

skipUntil

debounce

takeUntil

windowCount

window

windowTime

windowWhen

windowToggle

catchError

Operators�Explained

21 of 91

Primitive Operator Parts

@Michael_Hladky

ng-India

22 of 91

Operator Parts For Transformations

to

map

@Michael_Hladky

ng-India

23 of 91

merge�(deprecated)

concat�(deprecated)

mergeAll

mergeScan

merge

concat

concatAll

exhaust

expand

combine�Latest

switchAll

zip

withLatest�From

zipAll

combineAll

startsWith

endsWith

forkJoin

combine�Latest

map

mergeMap�(alias flatMap)

concatMap

concatMapTo

switchMap

switchMapTo

mapTo

exhaustMap

map

mergeMap�(alias flatMap)

concatMap

concatMapTo

switchMap

switchMapTo

mapTo

exhaustMap

24 of 91

map

1

2

input$:

output$:

2

4

3

6

4

8

map(v => v * 2)

@Michael_Hladky

ng-India

25 of 91

map

1

?

input$:

output$:

2

?

3

?

4

?

map(v => )

?

@Michael_Hladky

ng-India

26 of 91

map

1

input$:

output$:

2

3

4

map(v => of(v) )

@Michael_Hladky

ng-India

27 of 91

When to use map?

  • Transformation of values�(trans = from A to B, formatio related to a shape)

@Michael_Hladky

ng-India

28 of 91

concatMapTo

switchMapTo

mapTo

map

merge�(deprecated)

concat�(deprecated)

mergeMap�(alias flatMap)

mergeAll

mergeScan

merge

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

mapTo

exhaust

exhaustMap

expand

combine�Latest

switchAll

zip

scan

withLatest�From

zipAll

race

combineAll

race

(deprecated)

startsWith

endsWith

reduce

forkJoin

combine�Latest

29 of 91

mapTo

1

42

input$:

output$:

2

42

3

42

4

42

mapTo(42)

@Michael_Hladky

ng-India

30 of 91

When to use to?

  • Transformation to the same value always �(this is a static value only)

@Michael_Hladky

ng-India

31 of 91

Flattening And Merging�Operators

@Michael_Hladky

ng-India

32 of 91

Sorting Of Values Related To Time

switch

concat

exhaust

merge

@Michael_Hladky

ng-India

33 of 91

Sorting Of Values Related To Time

1

2

b

a

merge

concat

switch

exhaust

input1$

input2$

1

2

b

a

1

2

1

b

a

1

b

b

a

2

8 Parts�20 Operators

@Michael_Hladky

ng-India

34 of 91

merge

@Michael_Hladky

ng-India

35 of 91

STATIC

OPERATOR

map

merge�(deprecated)

concat�(deprecated)

mergeMap�(alias flatMap)

mergeAll

mergeScan

merge

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

to

exhaustMap

expand

all

switchAll

exhaust

startsWith

endsWith

merge�(deprecated)

mergeMap�(alias flatMap)

mergeAll

merge

mergeScan

36 of 91

merge | static function

i1$

output$

i2$

merge([i2$, i2$])

@Michael_Hladky

ng-India

37 of 91

mergeMap | operator function

a

A

input$:

output$:

A

ws$:

b

A

A

B

B

B

B

ws1$:

ws2$:

mergeMap()

@Michael_Hladky

ng-India

38 of 91

When to use merge?

  • Single subscription
  • Don’t care about order
  • Handl number of concurrent processes �(concurrent param)

​

Guess what happens�if param concurrent is set to 1

!

@Michael_Hladky

ng-India

39 of 91

concat

@Michael_Hladky

ng-India

40 of 91

STATIC

OPERATOR

map

concat�(deprecated)

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

mapTo

exhaustMap

expand

switchAll

exhaust

startsWith

endsWith

merge�(deprecated)

mergeAll

merge

mergeScan

mergeMap�(alias flatMap)

concat�(deprecated)

concat

concatMap

concatAll

concatMapTo

startsWith

endsWith

41 of 91

concat | static function

w1$:

A

A

A

w1$:

output$:

A

A

A

B

B

B

B

w2$:

w2$:

B

B

concat([w1$,w2$])

@Michael_Hladky

ng-India

42 of 91

startWith | operator function

w$:

B

B

B

output$:

B

B

B

A

A

A

A

input$:

input$:

A

A

concat(w$):

startWith(w$)

@Michael_Hladky

ng-India

43 of 91

endWith | operator function

w$:

B

B

B

output$:

B

B

B

A

A

input$:

input$:

A

A

concat(w$):

A

A

endWith(w$):

@Michael_Hladky

ng-India

44 of 91

concatMap | operator function

a

A

input$:

output$:

A

w$:

b

A

A

B

B

B

B

w1$:

w2$:

concatMap(fn)

@Michael_Hladky

ng-India

45 of 91

concatMapTo | operator function

a

1

input$:

output$:

2

w$:

b

1

2

1

2

1

2

1

2

w$:

w$:

concatMapTo(w$)

@Michael_Hladky

ng-India

46 of 91

When to use concat?

  • Sequencialice async operations
  • Used to start or end a with a specific value
  • Most save to use operator

Concat is merge with �concurrency set to 1

​

!

@Michael_Hladky

ng-India

47 of 91

switch

@Michael_Hladky

ng-India

48 of 91

STATIC

OPERATOR

map

switchMap

switchMapTo

mapTo

exhaustMap

expand

switchAll

exhaust

merge�(deprecated)

mergeAll

merge

mergeScan

mergeMap�(alias flatMap)

concat�(deprecated)

concat

concatMap

concatAll

concatMapTo

startsWith

endsWith

switchMap

switchMapTo

switchAll

49 of 91

switchMap| operator function

a

A

input$:

output$:

A

w$:

b

A

A

B

B

B

B

w1$:

w2$:

switchMap(fn)

@Michael_Hladky

ng-India

50 of 91

switchMapTo| operator function

a

1

input$:

output$:

2

w$:

b

1

2

1

2

1

2

1

2

w$:

w$:

switchMapTo(w$)

@Michael_Hladky

ng-India

51 of 91

When to use switch?

  • Focus on the most recent initialized observable
  • Cancels older subscriptions
  • Perfect for fetch request

�

@Michael_Hladky

ng-India

52 of 91

exhaust

@Michael_Hladky

ng-India

53 of 91

STATIC

OPERATOR

map

mapTo

exhaustMap

expand

exhaust

merge�(deprecated)

mergeAll

merge

mergeScan

mergeMap�(alias flatMap)

concat�(deprecated)

concat

concatMap

concatAll

concatMapTo

startsWith

endsWith

exhaustMap

exhaust

switchMap

switchMapTo

switchAll

54 of 91

exhaustMap| operator function

a

A

input$:

output$:

A

w$:

b

A

A

C

w1$:

w3$:

c

C

C

C

exhaustMap()

@Michael_Hladky

ng-India

55 of 91

When to use exhaust?

  • Focus on the current active observable
  • Ignores new values while current is running
  • Perfect for a refresh button (finish current process first)

@Michael_Hladky

ng-India

56 of 91

Combining Operators

@Michael_Hladky

ng-India

57 of 91

Grouping Of Values Triggered By Events

zip

combine

forkJoin

withLatest

@Michael_Hladky

ng-India

58 of 91

Grouping Of Values Triggered By Events

1

2

b

a

3

[1,a]

[2,a]

[2,b]

[3,b]

[3,b]

[1,a]

[2,b]

[2,a]

[3,b]

combine

forkJoin

zip

withLatest

input1$

input2$

6 Parts�10 Operators

@Michael_Hladky

ng-India

59 of 91

STATIC

OPERATOR

combineLatest�(deprecated)

withLatestFrom

forkJoin

race

(deprecated)

combineAll

combineLatest

race

zip�(deprecated)

zip

zipAll

zip

zipAll

zip�(deprecated)

60 of 91

zip

a

input1$:

input2$:

b

2

c

3

d

4

output$:

a1

b2

c3

d4

1

@Michael_Hladky

ng-India

61 of 91

When to use zip?

  • Detect changes of values pairs of the streams

@Michael_Hladky

ng-India

62 of 91

STATIC

OPERATOR

combineLatest�(deprecated)

withLatestFrom

forkJoin

race

(deprecated)

zip�(deprecated)

zip

zipAll

combineAll

combineLatest

race

combineLatest�(deprecated)

combineAll

combineLatest

forkJoin

63 of 91

combineLatest | static function

a

input1$:

input2$:

b

2

c

3

d

4

output$:

a1

b2

a2

c2

c3

d3

d4

1

@Michael_Hladky

ng-India

64 of 91

When to use combineLatest?

  • Detect changes of either of the streams

@Michael_Hladky

ng-India

65 of 91

forkJoin

a

input1$:

input2$:

b

2

c

3

d

4

output$:

a1

b2

a2

c2

c3

d3

d4

1

@Michael_Hladky

ng-India

66 of 91

When to use forkJoin?

  • Like combineLatest but only the last values
  • Best for http requests

@Michael_Hladky

ng-India

67 of 91

STATIC

OPERATOR

combineLatest�(deprecated)

withLatestFrom

forkJoin

race

(deprecated)

zip�(deprecated)

zip

combineLatest

race

zipAll

combineAll

withLatestFrom

68 of 91

withLatestFrom

a

input$:

withLatestFrom(i2$):

b

2

c

3

d

4

output$:

a1

b2

c2

d3

1

i2$:

2

3

4

1

@Michael_Hladky

ng-India

69 of 91

When to use withLatestFrom?

  • If a primary stream should controls emission of a secondary

@Michael_Hladky

ng-India

70 of 91

“All” Operators

@Michael_Hladky

ng-India

71 of 91

Operations On HOB’s

(Higher Order Observables)

all

@Michael_Hladky

ng-India

72 of 91

All

hoo$:

@Michael_Hladky

ng-India

73 of 91

STATIC

OPERATOR

exhaust

zipAll

combineAll

mergeAll

concatAll

switchAll

exhaust

zipAll

combineAll

mergeAll

concatAll

switchAll

74 of 91

map

1

input$:

output$:

2

3

4

map(v => of(v) )

@Michael_Hladky

ng-India

75 of 91

mergeAll | operator function

input$:

o1$

o2$

@Michael_Hladky

ng-India

76 of 91

mergeAll | operator function

o1$:

output$:

o2$:

input$:

o1$

o2$

mergeAll()

@Michael_Hladky

ng-India

77 of 91

concatAll | operator function

input$:

o1$

o2$

@Michael_Hladky

ng-India

78 of 91

concatAll | operator function

o1$:

output$:

o2$:

input$:

o1$

o2$

concatAll()

@Michael_Hladky

ng-India

79 of 91

switchAll | operator function

input$:

o1$

o2$

@Michael_Hladky

ng-India

80 of 91

switchAll | operator function

o1$:

output$:

o2$:

input$:

o1$

o2$

switchAll()

@Michael_Hladky

ng-India

81 of 91

exhaust | operator function

o1$

input$:

o2$

o3$

A

A

B

B

C

C

@Michael_Hladky

ng-India

82 of 91

exhaust | operator function

o1$

A

input$:

output$:

A

o2$

A

A

C

w1$:

w3$:

o3$

C

C

C

exhaust()

@Michael_Hladky

ng-India

83 of 91

zipAll | operator function

o1$

o2$

input1$:

@Michael_Hladky

ng-India

84 of 91

zipAll | operator function

a

i1$:

i2$:

b

2

c

3

d

4

output$:

b2

c3

d4

1

o1$

o2$

input1$:

a1

@Michael_Hladky

ng-India

85 of 91

combineAll | operator function

input1$:

o1$

o2$

@Michael_Hladky

ng-India

86 of 91

combineAll | operator function

a

i1$:

i2$:

b

2

c

3

d

4

output$:

b2

c2

c3

d3

d4

1

o1$

o2$

input1$:

a1

a2

@Michael_Hladky

ng-India

87 of 91

Done With Operators

@Michael_Hladky

ng-India

88 of 91

combine�Latest

expand

combineAll

withLatest�From

forkJoin

mapTo

zip

zipAll

map

merge�(deprecated)

concat�(deprecated)

mergeMap�(alias flatMap)

mergeAll

mergeScan

merge

concat

concatMap

concatAll

concatMapTo

switchMap

switchMapTo

exhaustMap

switchAll

exhaust

startsWith

endsWith

groupBy

onError�ResumeNext

audit

buffer

bufferToggle

skipUntil

debounce

takeUntil

windowCount

window

windowTime

windowWhen

windowToggle

catchError

24.5/38�Operators�64%

89 of 91

When to use all?

  • To process higher order observables

@Michael_Hladky

ng-India

90 of 91

bit.ly/rx-marble-design-system�bit.ly/marble-design-system

​

1

Time

2

Time Span

42ms

3

Consumer Event

4

Notification

5

Completion

6

Error

7

Operator

opr

8

Operator Contex

opr

9

Operation

@Michael_Hladky

ng-India

91 of 91

Thanks for your time!

Michael Hladky

michael@hladky.at�github.com/BioPhoton�angular-college.com

My name is Michael , If you have� any questions just ping me.

@Michael_Hladky

ng-India