Reactive Functional Programming made simple. You may have or may have not used RxJs and experimented or developed apps with Subjects, Observables and transformation of observables through piping RxJs operators. In this 30 minute presentation we will make things simple. We will go through examples of what they are and how they are made, as well as what problems they solve. We will also see how to build our own RxJs operators that implement synchronous and asynchronous data flow patterns.
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Under the hood of RxJS (Dimitris Livas) - GreeceJS #27
1. Under the hood of RxJs
Managing our Reactive, Side Effected world
2. ...to better understand RxJs by implementing simplified
versions of some commonly used Observables and Operators
and...
Scope of this Session is...
2
3. ...to present how to build our application business logic as
composable custom Observables and Operators according to
best practices
...and
3
4. Observables and Operators
4
{
fromEvent(...)
1 2 3 4 5 6 7 8
2 3 4 5 6 7 8 9
{
map(x => x + 1)
{
An Operator creates one output
stream out of a given input stream.
This new stream provides altered
data or flow from the given one.
An Observable is a producer of
a stream of data that others
consume (observe).
8. ...all together to understand their concurrent nature
Let’s See Some widely used Observables
8
9. ... let’s build an oversimplified version of the
Observable class
The class Observable
9
10. Let’s build some simplified version of the observables:
● of
● interval
● zip - (or a more complete simplified zip)
Let’s Build Some widely used Observables
10
11. ...observables can be merged
11
{
fromEvent(..)
1 3 4 8
{
from(...)
A B C ED
{
B C ED1 3A 4 8
merge
13. ...observables can be chained
13
1 2 3 4 5 6 7 8
2 3 4 5 6 7 8 9
{
map(x => x + 1)
{
2 4 6 8
{
filter(x => x % 2 === 0)
{{scan((x, y) => x + y, 0)
{
2 6 12 20
14. Streams 101 for List users :)
14
On streams we perform similar operations as in lists:
List Stream
forEach subscribe
map map
filter filter
reduce reduce
groupBy groupBy
15. Let’s build some simplified version of
map
Let’s build some known operators
15
25. There are provided 3 scheduling strategies for observables:
● queueScheduler
● asapScheduler
● asyncScheduler
Let’s see some code that demonstrates their differences
Schedulers in RxJs
25
26. Let’s build an operator that serializes the merged observable
produced by a sequence of operators,
First let’s define a problem… sequence operator
Now Let’s Build a Custom Operator
26
27. Then let’s try three solutions:
● A naive solution
● A solution using the operators of RxJs
● A better solution using the operators of RxJs
● sequenceBy - an another similar operator
Now Let’s Build a Custom Operator
27
28. Before we build one operator is good to study well the existing
ones and be sure that the provided RxJs operators do not
provide the functionality needed
Custom Operators Lesson Learned
28
29. Some more indicative sample operators:
● triplewise
● previousCurrentNext
● onOff and a more complete onOff
● withLastFlag / withLastFlag using Notifications
● tryOperatorsCatchError
Some more Custom Operators
29
30. Side effects free observables and IO
30
DB
AJAX
...IO
in
out
inin
out out
Side effect free
merged observables
- Business Logic -
merged observables
with side effects
- IO Management -
controler
Observable