"Understanding the reactive extensions once and for all" is the title for the talk given in the CodeMotion Madrid 2017. This will cover Rx (and RxJS in particular) from scratch. Charla "Entendiendo eso de la reactividad de una vez por todas" impartida en el CodeMotion 2017, donde se habló de Rx y RxJS desde lo básico, con ejemplos desde cero.

1. MADRID, 24-25 NOV 2017
Entiende eso de la reactividad de
una vez por todas
{José Manuel García - @semagarcia

2. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Who am I?
“Cordobéh”
JavaScript Architect
Trainer & speaker
Member of ngLabs

3. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Agenda
§Rx introduction
§Atypical examples
§This seems to be an observable
§Observables and its friends
§Operators
§More examples

4. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
A brief survey

5. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Introduction
Reactive
eXtensions

6. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Learning cliff
RxSkills
Time
RxJS
Async
Promises
Clousures

7. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas

8. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
What is reactive programming?
The reactive programming is
a paradigm with
asynchronous data streams.
to operate

9. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
What is reactive programming?
The reactive programming is
a paradigm with
asynchronous data streams.
to operate

10. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
What is reactive programming?
paradigm

11. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Rx = FP + Observer + Iterator
Mixture of concepts:
• Functional programming
• Observer pattern
• Iterator pattern

12. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Reactive eXtensions

13. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Typical first example: values over the time
Please, pay attention to that complex and huge equation:
c = a + b;

14. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Typical first example: values over the time
All variables in our system change
over the time, and therefore, they
are “observables”

15. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Typical first example: values over the time
a = 1; b = 3;
c = a + b; // 4
a = 3;
c = ? // 4!!!

16. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Where c = 6?

17. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Where c = 6?

18. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Excel: reactive datasheet

19. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Reactive step-by-step sum
Step by step sum with async (future) values
1 3 add 4
a b c
7 8

20. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Over the time
ASYNCHRONY

21. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 01
Example 01

22. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Standardizing methods

23. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Kind of callbacks identified
I’d need…
• A callback for each event / data
• A callback for error handling
• A callback for end signaling

24. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 02
Example 02

25. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
An event is coming!

26. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
An event is coming!

27. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Very soon…
VALUE
DATA STREAM
ASYNC TONS OF OBSERVERS
OBSERVABLE

28. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Rx in the nature
OBSERVABLE
OBSERVERS

29. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Rx in the nature
¡¡GRRRR
RRR!!!
¡Ohh! ¡Ha dicho
“GRRRRRRR”!!

30. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 02
Lion example

31. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Streams everywhere…

32. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Observables…
Observables are functions, so,
functions don’t do anything until
they are called

33. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
How to create an Observable?
Many forms:
• .create(function);
• .of(value);
• .from(AnArray);
• .fromEvent(element, event);
• .fromPromise(p);
• .range(min, max);
• .interval(period);

34. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription
A “subscription” is the result of a
disposable resource, such as the
execution of an Observable

35. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription
A subscription to an observable ends if one of the
following occurs:
1. The consumer explicitely unsubscribes
2. The observable invokes the complete()
method on the observer
3. The observable invokes the error() method
on the observer

36. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription
Its most important method:
.unsuscribe()

37. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Pay attention to this advice…
TO UNSUSCRIBE!!
DON’T FORGET

38. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
A new friend in Rx world: Subject
WTF is a Subject?
A subject represents an object that is
both an observable as well as an
observer. Each notification is
broadcasted to all subscribed
observers.
“Data producer – data consumer…”

39. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
A new friend in Rx world: Subject
WTF is a Subject?
A subject represents an object that is both an
observable (it can pass through the items it
observes by re-emitting them, and it can also
emit new items) as well as an observer (it can
subscribe to one or more Observables). Each
notification is broadcasted to all subscribed
observers.
“Data producer – data consumer…”

40. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
A new friend in Rx world: Subject

41. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Type of Subjects
There are four types:
• PublishSubject: emits all the subsequent items of the
source Observable at the time of subscription.
• ReplaySubject: emits all the items of the source
Observable, regardless of when the subscriber subscribes.
• BehaviourSubject: emits the most recently emitted item
and all the subsequent items of the source Observable
when an observer subscribes to it.
• AsyncSubject: only emits the last value of the source
Observable(and only the last value) only after that source
Observable completes.

42. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Operators…
• Creationals
• Filters
• Maths
• Transforms
• Combinations
• Error handling
… for all use cases:

43. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Operators…
An “operator” is just a function
that takes an observable and
returns a new observable

44. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Marble (formal) diagram
Events/Data
Streams’ end
Error occurred

45. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
http://rxmarbles.com

46. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Angular

47. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Angular

48. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Angular
Angular Auth Example
Comp. 1 Comp. 2 Comp. 3
Header (+ AuthService)

49. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Angular
- Http requests
- Forms
- Async inputs
- Components inter-communication
- Router / Navigating
- Change Detection
- Animations
- And much more…

50. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Redux (in Angular)

51. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
For my next C4P… advanced topics!

52. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
For my next C4P…
Further topics in RxJS:
- Error (catch, retry) and parallel
observables
- Operators (even more) in depth
- Schedulers
- Observables and subject (differences)
- More subject use cases
- RxJS 6/7…

53. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Conclusions
Conclusions…
RxJS is so cute!

54. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Examples in the repo!
https://github.com/semagarcia/
rxjs-entendiendo-la-reactividad-
en-js

55. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Make your questions!

56. {
Madrid, 24-25 Nov’17@semagarcia – Entiende eso de la reactividad de una vez por todas
Make your questions!