Reactive Extensions
with
-
What is Rx.js?
-
Live-coding and examples
Agenda
- Working with asynchronous
data streams / observables
- By using functional operations
Rx.js
- xhr requests
- events
- promises
- dom input
- dom manipulation
- web workers
- web sockets
- web rtc
Most of the web consists of
asynchronous data streams
- pop
- push
- shift
- splice
- map
- filter
- reduce
- join
- indexOf
- slice
- revert
- concat
We have functional
first class operators in js
and many more in lodash
Array.prototype
What is Rx?
Pull
Push
based collections
(arrays)
based collections
(observables)
functional operators
functional operators
extras
extras
Let's create a
morse-code decoder
Marble-Diagram
-----------------------> (start) ---a----a--a-----------> (emitting data)
---a----a--a----------->
vvv map ( a to b) vvv (transformation)
---b----b--b----------->
---b----b--b-----X-----> (error) ---b----b--b---------|-> (end)
Button
=>
S O S
=>
... --- ...
------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-----> ( ".-." )
----------------------------L----------------L---------------L-----> ( "R" )
vvv map ( d and u => t) vvv
vvv map ( t => c) vvv
vvv group ( c => s) vvv
vvv map ( s => L) vvv