discovering rxjs - milanojs meeting in may 2016
TRANSCRIPT
![Page 2: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/2.jpg)
EFSA Hackathon • Free contest open to any European citizen.
• Develop innovative mobile apps using EFSA open data.
• €20,000 as first prize.
• Key dates• June 30, 2016: prototype
submission.• «End of September»
2016: winners announcement.
• Make us proud
More info at http://bit.ly/efsa_hackathon
![Page 3: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/3.jpg)
What is Rx ?
MSDN Rx introduction
![Page 4: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/4.jpg)
What is Rx ?
MSDN Rx introduction
![Page 5: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/5.jpg)
Back in 1994…• Design Patterns was
published.• Written by Gamma,
Helm, Johnson, Vlissides (Gang of Four)
• Contains 23 «recipes» to solve abstract problems with Object-Oriented approach.
![Page 6: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/6.jpg)
Iterator Pattern
![Page 7: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/7.jpg)
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()
![Page 8: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/8.jpg)
ConcurrencyIterator is represents a «pull-based» collection, what about a «push-based» collection?
Single MultipleSync/Pull T IEnumerable<T>
Iterable of T
Async/PushTask<T>
Promise<T>Future<T> ?
![Page 9: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/9.jpg)
Benjamin Franklin
«Tell me and I forget, teach me and I may remember, involve me and I learn»
![Page 10: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/10.jpg)
Duality• 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.
![Page 11: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/11.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>???
IDualEnumerator<T>
???
![Page 12: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/12.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???
IDualEnumerator<T>
???
![Page 13: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/13.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???(IDualEnumerator<T>)
IDualEnumerator<T>
???
![Page 14: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/14.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???(IDualEnumerator<T>)
IDualEnumerator<T>
void ???
![Page 15: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/15.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???(IDualEnumerator<T>)
IDualEnumerator<T>void ???( T )
![Page 16: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/16.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???(IDualEnumerator<T>)
IDualEnumerator<T>void ???( bool, …, T )
![Page 17: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/17.jpg)
DualityIEnumerable<T>
IEnumerator<T> GetEnumerator()
IEnumerator<T>
bool MoveNext() T Current()
IDualEnumerable<T>void ???(IDualEnumerator<T>)
IDualEnumerator<T>void ???( bool, Exception, T )
![Page 18: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/18.jpg)
DualityIEnumerable<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()
![Page 19: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/19.jpg)
Observer
![Page 20: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/20.jpg)
ObserverSubject
void Attach(Observer)void Detach(Observer)
Notify()
Observer
void Update()
![Page 21: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/21.jpg)
ObserverSubject
void Attach(Observer)void Detach(Observer)
Notify()
Observer
void Update()
![Page 22: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/22.jpg)
ObserverSubject<T>
void Attach(Observer<T>)void Detach(Observer<T>)
Notify(T)
Observer<T>
void Update(T)
![Page 23: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/23.jpg)
IDualEnumerable = Observer 2.0Subject<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 OnComplete()
![Page 24: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/24.jpg)
IDualEnumerable = Observer 2.0Subject<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 OnComplete()
![Page 25: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/25.jpg)
IDualEnumerable = ObservableSubject<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 OnComplete()
![Page 26: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/26.jpg)
IDualEnumerable = ObservableSubject<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 OnComplete()
![Page 27: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/27.jpg)
IDualEnumerable = ObservableSubject<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 OnComplete()
![Page 28: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/28.jpg)
IDualEnumerable = ObservableIObservable<T>
IDisposable Subscribe(IObserver<T>)
IObserver<T> void OnNext(T) void OnError(Exception) void OnComplete()
• 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.
![Page 29: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/29.jpg)
Promises are also Observables!
Single MultipleSync/Pull T IEnumerable<T>
Iterable of T
Async/PushTask<T>
Promise<T>Future<T>
IObservable<T>
![Page 30: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/30.jpg)
Promises are also Observables!
Single MultipleSync/Pull T IEnumerable<T>
Iterable of T
Async/PushTask<T>
Promise<T>Future<T>
IObservable<T>
• A single element of T can be seen as a specific IEnumerable<T>
![Page 31: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/31.jpg)
Promises are also Observables!
Single MultipleSync/Pull T IEnumerable<T>
Iterable of T
Async/PushTask<T>
Promise<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>
![Page 32: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/32.jpg)
Antoine de Saint-Exupéry
«Perfection is achieved, not when there is nothing more to add, but when there is
nothing left to take away»
![Page 34: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/34.jpg)
Rx is more than the Observable PatternLanguage neutral model based on 3 concepts:1. Observable Pattern.2. Composition operators & grammar.3. Schedulers and Time.
![Page 35: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/35.jpg)
filter( ) : Filter elementsEmit only those items from an Observable
that pass a predicate test
0 431 2
0 4
![Page 36: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/36.jpg)
map( ) : Transform elementsTransform the items emitted by an
Observable by applying a function to each item
0 1 2
0 1
43
2 3 4
![Page 37: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/37.jpg)
takeUntil( ) : CompleteDiscard any items emitted by an Observable after a second Observable emits an item or
terminates 0 1 2 43
0 1 2Hint: Don’t unsubscribe from Events, complete them when another fires.
![Page 39: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/39.jpg)
flatMap( ) : Map and then flattenTransform the items emitted by an
Observable into Observables, then flatten the emissions from those into a single
Observable
![Page 40: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/40.jpg)
flatMap( ) : Map and then flattenTransform the items emitted by an
Observable into Observables, then flatten the emissions from those into a single
Observable
Notice: if mapped observables are slow, events may interleaveNotice: if interleaving is not acceptable, use concatMap instead.
![Page 41: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/41.jpg)
flatMapLatest( ) : Map and then flattenTransform the items emitted by an
Observable into Observables, then flatten the emissions from those into a single
Observable
Notice: flatMapLatest exists that is like flatMap but keeps listening on last Observable only.
![Page 42: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/42.jpg)
A simple example : Autocompletion
![Page 43: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/43.jpg)
A simple example : Autocompletion
Events as Observables
Iterable as Observable Promise as Observable
![Page 45: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/45.jpg)
Rx is more than the Observable PatternLanguage neutral model based on 3 concepts:1. Observable Pattern.2. Composition operators & grammar.3. Schedulers and Time.
![Page 46: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/46.jpg)
SchedulersRx 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.
![Page 47: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/47.jpg)
Available Schedulers in RxJSScheduler Descriptionimmediate 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.
![Page 48: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/48.jpg)
Schedulers in action!
![Page 49: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/49.jpg)
ConclusionsUse 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.
![Page 50: Discovering RxJS - MilanoJS Meeting in May 2016](https://reader035.vdocument.in/reader035/viewer/2022062522/5878a4d41a28ab42588b6453/html5/thumbnails/50.jpg)
To continue your journey…• 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.