.-. . .- .-.. -....- - .. -- . / ... - .-. . .- -- /
.--. .-. --- -.-. . ... ... .. -. --. / .-- .. - .... / .-. -..-
Real-Time stream processing with RX
@Michael_Hladky
@Michael_Hladky
Job:
Dev
Trainer & Consultant
Focus on Angular & RX
Life:
Angular-Austria,
Angular-Vienna
Agenda
The ancient story of Rx
What is RX?
Marble-Diagrams
What is Morse Code
Explaining the goal
Live coding
@Michael_Hladky
The story
of Rx
ancient
@Michael_Hladky
Timeline
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
Who explored RX?
@Michael_Hladky
Eric Meijers
Channel9
Special features of eric
Colorful shirts
Funny hobbies!
Sharp minded
Channel9
Awesome teacher
Receipt for a great idea?
@Michael_Hladky
Raven Tests
Programming Manuals
Code
Receipt for a great idea
Raven Tests
Code
&
Programming manuals
Reactive Extensions
The missing link in collections
@Michael_Hladky
Collections
Pull Based
You decide when to get the value.
You pull item by item.
Collections
Pull Based
Push Based
You don't know when the value arrives.
Item are pushed to you.
Collections
Pull Based
Standard List Operators
Push Based
Collections
Pull Based
Standard List Operators
Push Based
Collections
Pull Based
Standard List Operators
Push Based
Standard List Operators
Collections
Pull Based
Standard List Operators
Push Based
Standard List Operators
Extras
Collections
Pull Based
Standard List Operators
Extras
Push Based
Standard List Operators
Extras
How to code this?
@Michael_Hladky
const numbers = [1,2,3,4,5];
numbers
.map(n => n * 2)
.filter(n => n > 7)
// [8, 10]
console.log(numbers);Array
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
Array
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
Array
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
Array
const numbers$ = Observable.from([1,2,3,4,5]);
numbers$
.map(n => n * 2)
.filter(n => n > 7)
// 8, 10
.subscribe(console.log);Observable
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
Observable
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
Observable
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
Observable
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
Observable
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
Observable
Where can I use RX?
@Michael_Hladky
Supported Languages
Server
Client
Scenarios
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
Marble Diagrams
@Michael_Hladky
Time
Dashes symbolizing time,
going from left to right
Event
a
a
a
Characters are the different
objects/events in time
Complete
a
a
a
The pipe is a symbol for the end of the stream
Error
#
a
a
a
# marks an error, a stream ends after an error occurs
Transform functions
a
a
a
Transform functions can transform single values or whole observables
b
b
filter:
events$:
b
b
switchMap:
B
B
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);Morse code 101
@Michael_Hladky
The inventor of the telegraph
Named by Samuel F. B. Morse
Morse code .-
morse code
is a
binary tree
Left Branch = .
Right Branch = -
R => .-.
Keyboard
Screen
Keyboard
Screen
... -- ...
Message
Short Signal
Long Signal
.
-
Parts of a message:
Short Signal
Long Signal
.
-
Parts of a message:
Short Break
Long Break
+
*
+
.+.+.*-+-*.+.+.
Message:
... -- ...
Message:
Message and breaks:
Translating MorseCode
with RX
@Michael_Hladky
------d-----u-----------d--u------d-u----d-u------d---u----> (down / up)
Translating MorseCode
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)
Translating MorseCode
------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
Translating MorseCode
------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
Translating MorseCode
----------------------------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
Translating MorseCode
Live Coding
@Michael_Hladky
github.com/BioPhoton/angular-morse-code-example
Basta 2018 | Real-Time stream processing with RX
By Michael Hladky
