Reactive Extensions (Rx) originated in the .NET world, devised and built by Erik Meijer and his team at Microsoft, Rx is a library to compose asynchronous and event-based programs. Available, among other languages, for Javascript(RxJS) it is meant for usage in frontend and backend programming. In this session we will see an introduction to Rx, why it is so useful to deal with async computation and how you can use RxJS in your code.

1. Taming Asynchrony
using RxJS
Angelo Simone Scotto
Cluster Reply
26 October 2015,
Milan
15

2. 2
What is Rx ?
MSDN introduction on Rx

3. 3
What is Rx ?
MSDN introduction on Rx

4. 4
• Design Patterns was
published.
• Written by Gamma, Helm,
Johnson, Vlissided (Gang of
Four)
• Contains 23 «recipes» to
solve abstract problems with
Object-Oriented approach.
Back in 1994…

5. 5
Iterator Pattern

6. 6
Iterator Pattern C#
Aggregate<T>
Iterator<T> CreateIterator()
Iterator<T>
void First()
void Next()
bool IsDone()
T CurrentItem()
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
void Reset()
bool MoveNext()
T Current()

7. 7
Concurrency
Single Multiple
Sync/Pull T IEnumerable<T>
Iterable of T
Async/Push
Task<T>
Promise of T
Future<T>
?
Iterator is represents a «pull-based» collection, what about a «push-
based» collection?

8. «Tell me and I forget, teach me and I may remember,
involve me and I learn»
Benjamin Franklin

9. 9
• Hint 1: Subject of pull based collection is consumer of collection
(«give me the next element»)
• Hint 2: Subject of push based collection is producer of collection
(«take this next element»)
• Hint 3: Input / Output are inverted between producer and consumer
(producer see next element as output, consumer as input)
• A push-based collection is therefore the dual of a pull based
collection.
• To switch consumer with producer we just need to switch input with
output.
Duality

10. 10
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
???
IDualEnumerator<T>
???

11. 11
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???
IDualEnumerator<T>
???

12. 12
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
???

13. 13
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void ???

14. 14
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void ???(
T
)

15. 15
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void ???(
T,
…,
bool
)

16. 16
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void ???(
T,
Exception,
bool
)

17. 17
Duality
IEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext()
T Current()
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void OnNext(T)
void OnError(Exception)
void OnComplete()

18. 18
Observer

19. 19
Observer
Subject
void Attach(Observer)
void Detach(Observer)
Notify()
Observer
void Update()

20. 20
Observer
Subject
void Attach(Observer)
void Detach(Observer)
Notify()
Observer
void Update()

21. 21
Observer
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Notify(T)
Observer<T>
void Update(T)

22. 22
IDualEnumerable = Observer 2.0
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Observer<T>
void Update(T)
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()

23. 23
IDualEnumerable = Observer 2.0
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Observer<T>
void Update(T)
IDualEnumerable<T>
void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()

24. 24
IDualEnumerable = IObservable
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Observer<T>
void Update(T)
IObservable<T>
void Subscribe(IObserver<T>)
IObserver<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()

25. 25
IDualEnumerable = IObservable
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Observer<T>
void Update(T)
IObservable<T>
void Subscribe(IObserver<T>)
void Unsubscribe(IObserver<T>)
IObserver<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()

26. 26
IDualEnumerable = IObservable
Subject<T>
void Attach(Observer<T>)
void Detach(Observer<T>)
Observer<T>
void Update(T)
IObservable<T>
IDisposable Subscribe(IObserver<T>)
IObserver<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()

27. 27
IDualEnumerable = IObservable
IObservable<T>
IDisposable Subscribe(IObserver<T>)
IObserver<T>
void OnNext(T)
void OnError(Exception)
void OnCompleted()
• Unsubscribe was not
necessary on iterator, added
as Subscribe return value.
• Event Streams does not
complete neither fail.
• Collection can, hopefully,
complete and can,
unfortunately, raise
exceptions.

28. 28
Promises are also Observables!
Single Multiple
Sync/Pull T IEnumerable<T>
Iterable of T
Async/Push
Task<T>
Promise of T
Future<T>
IObservable<T>

29. 29
Promises are also Observables!
Single Multiple
Sync/Pull T IEnumerable<T>
Iterable of T
Async/Push
Task<T>
Promise of T
Future<T>
IObservable<T>
• A single element of T can be seen as a specific IEnumerable<T>

30. 30
Promises are also Observables!
Single Multiple
Sync/Pull T IEnumerable<T>
Iterable of T
Async/Push
Task<T>
Promise of T
Future<T>
IObservable<T>
• A single element of T can be seen as a specific IEnumerable<T>
• A single promise of T can be seen as a specific IObservable<T>

31. «Perfection is achieved, not when there is nothing more
to add, but when there is nothing left to take away»
Antoine de Saint-Exupéry

32. 32
DEMO
Code can be found at: http://bit.ly/1GaADhX

33. 33
Language neutral model based on 3 concepts:
1. Observable Pattern.
2. Composition operators & grammar.
3. Schedulers and Time.
Rx is more than the Observable Pattern

34. 34
filter() : Filter elements
0 431 2
0 4
Emit only those items from an Observable that
pass a predicate test

35. 35
map() : Transform elements
0 1 2
0 1
43
2 3 4
Transform the items emitted by an Observable by
applying a function to each item

36. 36
takeUntil() : Complete
0 1 2 43
0 1 2
Hint: Don’t unsubscribe from Events, complete them when another fires.
Discard any items emitted by an Observable after
a second Observable emits an item or terminates

37. 37
DEMO
Code can be found at: http://bit.ly/1GaADhX

38. 38
flatMap() : Map and then flatten
Transform the items emitted by an Observable into
Observables, then flatten the emissions from
those into a single Observable

39. 39
flatMap() : Map and then flatten
Notice: if mapped observables are slow, events may interleave
Notice: if interleaving is not acceptable, use concatMap instead.
Transform the items emitted by an Observable into
Observables, then flatten the emissions from
those into a single Observable

40. 40
flatMapLatest () : Map and then flatten
Notice: flatMapLatest exists that is like flatMap but keeps listening
on last Observable only.
Transform the items emitted by an Observable into
Observables, then flatten the emissions from
those into a single Observable

41. 41
A simple example : Autocompletion

42. 42
A simple example : Autocompletion
Events as Observables
Iterable as Observable
Promise as Observable

43. 43
A simple example : Autocompletion
DEMO
Code can be found at: http://bit.ly/1GaADhX

44. 44
Language neutral model based on 3 concepts:
1. Observable Pattern.
2. Composition / Query operations & grammar.
3. Schedulers and Time.
Rx is more than the Observable Pattern

45. 45
Rx schedulers provide an abstraction that allows work to be scheduled
to run, possibly in the future, it controls when a subscription starts and
when notifications are published.
One can:
• Subscribe using a particular scheduler (using subscribeOn)
• Observe using a particular scheduler (using observeOn)
Plus, every operator that needs to introduce concurrency in the system
(mainly generators) is parametrized by an optional scheduler.
Since JavaScript is essentially single-threaded, schedulers options are
quite limited, and the default scheduler is usually the right choice.
Schedulers

46. 46
Available Schedulers
Scheduler Description
immediate Gets a scheduler that schedules work
immediately on the current thread.
currentThread Gets a scheduler that schedules work as soon
as possible on the current thread.
default Gets a scheduler that schedules work via a
timed callback based upon platform.
TestScheduler Virtual time scheduler used for testing
applications and libraries built using Reactive
Extensions.
HistoricalScheduler Provides a virtual time scheduler that uses
a Date for absolute time and time spans for
relative time.

47. 47
Schedulers in action!

48. 48
Use Rx and Observable to help you to:
• Avoid callback hell, tons of callbacks and global variables in your
async code, relay instead on just one, carefully crafted, observable.
• Enhance promises in supporting multi-value and cancellation.
• Forget removeEventListener and unsubscription/cancellation code,
just use takeUntil on your observables.
Conclusions

49. 49
• ReactiveX: Homepage of RX project.
• LearnRX: Online tutorial, published initially by Netflix as training for
its developers.
• RxJSKoans: GitHub repository full of small exercises of increasing
difficulty using RxJS.
• Rx Workshop: A set of videos teaching you Rx.NET directly from Rx
team members.
• IntroToRx: Free book about previous version of Rx.NET (v1.x). Still
a great introduction as concept are still valid and API is not changed
so much.
To continue your journey…

51. webnextconf.eu

52. Thanks
Angelo Simone Scotto
a.scotto@reply.eu
Except where otherwise noted,
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.