Real-Time stream processing with RX
@Michael_Hladky
Job:
Dev
Trainer & Consultant
Focus on Angular & RX
Life:
Angular-Austria,
Angular-Vienna
The ancient story of Rx
What is RX?
Marble-Diagrams
What is Morse Code
Explaining the goal
Live coding
@Michael_Hladky
@Michael_Hladky
1970
Beginning of time
1991
1970
Beginning of
time
1991
public www
1970
Life before public www
Life with public www
Beginning of
time
Life before public www
1991
public www
2004
@ char added
to morsecode
1970
Life with public www
Beginning of
time
Life before public www
1991
public www
2004
@ char added
to morsecode
2009
RX released
1970
Life with public www
Beginning of
time
Life before public www
1991
public www
2004
@ char added
to morsecode
2009
RX released
1970
Beginning of
time
Life with public www
2018
Now
@Michael_Hladky
Channel9
Colorful shirts
Funny hobbies!
Sharp minded
Channel9
Awesome teacher
@Michael_Hladky
Code
Raven Tests
Code
Programming manuals
@Michael_Hladky
Pull Based
You decide when to get the value.
You pull item by item.
Pull Based
Push Based
You don't know when the value arrives.
Item are pushed to you.
Pull Based
Standard List Operators
Push Based
Pull Based
Standard List Operators
Push Based
Pull Based
Standard List Operators
Push Based
Standard List Operators
Pull Based
Standard List Operators
Push Based
Standard List Operators
Extras
Pull Based
Standard List Operators
Extras
Push Based
Standard List Operators
Extras
@Michael_Hladky
const numbers = [1,2,3,4,5];
numbers
.map(n => n * 2)
.filter(n => n > 7)
// [8, 10]
console.log(numbers);
const numbers = [1,2,3,4,5];
numbers
.map(n => n * 2)
.filter(n => n > 7)
// [8, 10]
console.log(numbers);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers = [1,2,3,4,5];
numbers
.map(n => n * 2)
.filter(n => n > 7)
// [8, 10]
console.log(numbers);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers = [1,2,3,4,5];
numbers
.map(n => n * 2)
.filter(n => n > 7)
// [8, 10]
console.log(numbers);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers$ = Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
const numbers$ =
Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers$ =
Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers$ =
Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers$ =
Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
const numbers$ =
Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);
1
2
3
4
5
map
2
4
6
8
10
filter
2
4
6
8
10
@Michael_Hladky
Server
Client
Cloud
UI
Client
Cloud
UI
event-driven computation
Client
Cloud
UI
asynchronous
computation
event-driven computation
Client
Cloud
Client
Server
Cloud
Client
Server
client based
I/O
Cloud
Client
Server
cloud based
I/O
client based
I/O
@Michael_Hladky
Dashes symbolizing time,
going from left to right
Characters are the different
objects/events in time
The pipe is a symbol for the end of the stream
# marks an error, a stream ends after an error occurs
Transform functions can transform single values or whole observables
filter:
events$:
switchMap:
const numbers$ = Observable.from([1,2,3,4,5]);
// numbers$: -a-a-a-a-a--|
// map(): -b-b-b-b-b--|
// filter(): -------b-b--|
numbers$
.map(n => n * 2)
.filter(n => n > 5)
// 8, 10
.subscribe(console.log);
@Michael_Hladky
The inventor of the telegraph
Keyboard
Screen
Keyboard
Screen
... -- ...
Message
Short Signal
Long Signal
.
-
Short Signal
Long Signal
.
-
Short Break
Long Break
+
*
+
.+.+.*-+-*.+.+.
Message:
... -- ...
Message:
@Michael_Hladky
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
vvv map ( d and u => t) vvv
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
----------t---------t-------t-----t----t----t---t----t------t------> (timestamp)
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
----------t---------t-------t-----t----t----t---t----t------t------> (timestamp)
----------c---------c------c-----c---c----c---c----c-----c------> ( "." "-" "." )
vvv map ( t => c) vvv
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
----------t---------t-------t-----t----t----t---t----t------t------> (timestamp)
----------c---------c------c-----c---c----c---c----c-----c------> ( "." "-" "." )
----------------------------s----------------s---------------s-----> ( ".-." )
vvv group ( c => s) vvv
----------------------------L----------------L---------------L-----> ( "R" )
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
----------t---------t-------t-----t----t----t---t----t------t------> (timestamp)
----------c---------c------c-----c---c----c---c----c-----c------> ( "." "-" "." )
----------------------------s----------------s---------------s-----> ( ".-." )
vvv map ( s => L) vvv
@Michael_Hladky
github.com/BioPhoton/angular-morse-code-example