Sema García presentó una charla sobre reactividad y RxJS en la conferencia T3chFest2018. Explicó conceptos clave como observables, observadores y operadores, y cómo RxJS permite manejar flujos de datos asíncronos de forma reactiva. Incluyó varios ejemplos prácticos y discutió cómo RxJS se puede usar en Angular para manejar peticiones HTTP, formularios y comunicación entre componentes. El objetivo final era ayudar a los asistentes a entender los fundamentos de la programación reactiva con RxJS.

1. 1 y 2 de Marzo
#t3chfest2018
Entendamos de una vez qué
es eso de la reactividad…
Sema García
@semagarcia

2. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
“Cordobéh”
JavaScript Architect
Trainer & speaker
Who am I?

3. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
§Rx introduction
§Atypical examples
§This seems to be an observable
§Observables and its friends
§More examples
Agenda

4. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
A brief survey

5. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Reactive
eXtensions
Far time ago…

6. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
JSSkills
Time
Rx
Event loop
Promises
Clousures
Learning curve cliff?

7. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

8. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Rx = FP + Observer + Iterator
Mixture of concepts:
• Functional programming
• Observer pattern
• Iterator pattern

9. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
The reactive programming is
a paradigm with
asynchronous data streams.
to operate
What’s reactive programming

10. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
paradigm
What’s reactive programming

11. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Reactive eXtensions

12. #T3chFest2018@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;

13. #T3chFest2018@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”

14. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
a = 1; b = 3;
c = a + b; // 4
a = 3;
c = ? // 4!!!
Typical first example: values over the time

15. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
c = 4??

16. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
A good example of “reactive model"

17. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Excel: reactive datasheet

18. #T3chFest2018@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

19. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Over the time
JS-ASYNCHRONY

20. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 01
Example 01

21. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Standardizing methods

22. #T3chFest2018@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 completion

23. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 02
Example 02

24. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
An event is coming!

25. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
An event is coming!

26. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Money, money…
VALUE
DATA STREAM
ASYNC TONS OF OBSERVERS
OBSERVABLE

27. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Rx in the nature
OBSERVABLE
OBSERVERS

28. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
¡¡GRRRR
RRR!!!
Ohh! He says
“GRRRRRRR”!!
Rx in the nature

29. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Example 02
Lion example

30. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Streams everywhere…

31. #T3chFest2018@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
Observables
are
lazy

32. #T3chFest2018@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);

33. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription

34. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription
A “subscription” represents the
execution of an Observable, useful
for cancelling it

35. #T3chFest2018@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. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Subscription
Its most important method:
.unsuscribe()

37. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Pay attention to this advice…
TO UNSUSCRIBE!!
DON’T FORGET

38. #T3chFest2018@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. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
A new friend in Rx world: Subject

40. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
A new friend in Rx world: Subject

41. #T3chFest2018@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. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Operators…
• Creationals
• Filters
• Maths
• Transforms
• Combinations
• Error handling
… for all use cases:

43. #T3chFest2018@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. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Marble (formal) diagram
Events/Data
Streams’ end
Error occurred

45. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
RxMarbles

46. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Angular
Angular Auth Example
Comp. 1 Comp. 2 Comp. 3
Header (+ AuthService)

47. #T3chFest2018@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…

48. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
RxJS & Redux (in Angular)

49. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
This is just the beginning
Further topics in RxJS:
- Error (catch, retry) and parallel
observables
- Operators (even more) in depth
- Schedulers
- More subject use cases
- .pipe() and lettable operators
- RxJS 6/7…

50. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Conclusions
Conclusions…
RxJS is so cute!

51. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Examples in the repo!
https://github.com/semagarcia/
rxjs-t3chfest-reactividad

52. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Make your questions!

53. #T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas
Make your questions!