The document discusses RxJS and its core concepts, focusing on building simplified versions of observables and operators. It covers the construction of custom observables and operators based on best practices while explaining various features such as merging, chaining, and scheduling strategies. Additionally, it addresses custom operators and the management of side effects in reactive programming.

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).

5. interval
Let’s See Some widely used Observables
5

6. of
Let’s See Some widely used Observables
6

7. zip
Let’s See Some widely used Observables
7

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

12. ...observables of observables
12

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

16. 16

17. Let’s build some simplified version of
filter
Let’s build some known operators
17

18. 18

19. Let’s build some simplified version of
reduce / scan
Let’s build some known operators
19

20. 20

21. Let’s build some simplified version of
groupBy
Let’s build some known operators
21

22. 22

23. How these operators differ:
● mergeMap
● switchMap
mergeMap and switchMap operators
23

24. switchMap operator
24

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

31. www.agileactors.com | www.linkedin.com/company/agile-actors/
www.learningactors.com | www.linkedin.com/company/learning-actors/