Day 08 Rx.Net part 2

Day 08 - Reactive X - Part 2

Projects:

Fun With Rx Operators	Introducing a bunch of Rx operators
Practical Rx Net	Two examples of how to use reactive in real life applications

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)
• 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)](https://rxjs-dev.firebaseapp.com/api/operators/debounceTime) 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.

Merging observables

• We wanted to implement the progress indicator, so that when a search is in progress, it will show animation
• We saw that the [Merge (**merge** in rxjs)](https://rxjs-dev.firebaseapp.com/api/index/function/merge) is operator that collects events from several observables into a single observable.
• We used it along with Select and DistinctUntilChanged to create a single observable that controls the progress bar

To Be Concluded!