Day 08 Rx.Net part 2

Day 08 - Reactive X - Part 2

Projects:

Fun With Rx.Net	Programming reative ui using Rx Operators

Reactive Stateful Services

• We have used BehaviorSubject to implement a service that holds the state of a counter.
• We used AsObservable to create a proxy over the BehaviorSubject so that consumers can only subscribe to it, but not call OnNext
• We exposed the data of the service only using reactive, so any consumer must get the original value as well as future notifications

Reactive Operators

• We have created an observable from UI events using FromEventPattern.
• We have seen some of the basic Rx operators:
  • Select (map in rxjs)
  • Where (filter in rxjs)
  • Disctinct
  • DistinctUntilChanged
  • Take
  • Skip
  • TakeLast and SkipLast
  • TakeWhile and SkipWhile
  • TakeUntil and SkipUntil
• The last 2 are special because they are binary operators - so they work with 2 observables to create one result observable

Resource Cleanup

• We saw that if we subscribe to the observables without unsubscribing from them, it causes memory leaks and perfromance degradation
• We saw that we can use the IDisposable that we get when calling Subscribe in order to unsubscribe from the observable
• We also saw that if the observable completes, then all the subscriptions are automatically disposed as well
• We saw that we can turn an infinite observable into a finite one by using the Take Operator
• We also saw that if we want to complete an infinite observable when an event occurs (such as page unload) we can use the TakeUntil operator

Combining Observables and Tasks

• In the last example, we created a stateless service that performs search on a large collection of objects
• On the way, we saw how to create immutable objects (with getters only) and immutable collections (using the immutable collection package) to preserve an immutable data model
• Also on the way, we saw how to use Linq to Json In order to read a large json object as enumerable and transform it into .net entities.
• We Created a task method that delays for 3 seconds and then returns a list of colors by search
• We used Select operator to transform each user search into the search results but then noticed that because we use a method that returns task, we get an IObservable<Task<result>> instead of IObservable<result>
  • We understood that Task, just like Observable is an object representing a timeline
  • So IObservable is actually Timeline<Timline> - or what we call Second Order Observable (just like a 2 dimensional array is a second order array).
  • The operator SelectMany (flatMap in rxjs) can be used to transform a second order observable into a first order observable, so this is what we used to create an IObservable<result>
• We noticed that when we slowly type the keyword, we cause many search operations to run, and each time a search ended, its result was displayed.
  • This was a problem because by the time the result have arrived, they did not match the current keyword
  • We needed a way to dispose of results of searches that were already replaced by a new search
  • We understood that this is what the Switch (switchAll in rxjs) operator does.
  • In rxJs there is also a [switchMap(https://rxjs-dev.firebaseapp.com/api/operators/switchMap)] operator, that combines map and switch together.
  • Once we changed SelectMany into .Select.Switch we saw that results for outdated searches were ignored
• We noticed that when the user types a search word, we start a new search for every substring along the way. We preferred to only start a search once the user have stopped typing for awhile.
  • We saw that `Throttle (debounceTime in rxjs) is an operator that filters out events that occur too frequently. You may decide a minimum time of idle before the next event is emitted.

To be concluded!