Learn how to use RxJS with Angular

To be comfortable as an Angular developer it is important to first understand the basics of reactive programming and functional programming. It's actually the combination of these two concepts that becomes slightly more complicated to assimilate for a new developer without experience. In fact, the concept of functional reactive programming must be understood and used as much as possible in order to develop quality, robust, maintainable and testable applications. So let's see what functional programming is by taking the two concepts one after the other:

  • Reactive is the fact of using a Reactive library (RxJS) to process, combine, transform data and events via a steam and therefore asynchronously.
  • Functional is the fact of developing logic by combining pure functions in order to avoid having a shared state, mutated objects and side effects.

RxJS: Definitions

  • Observable: is the stream of data. It represents the idea of an invokable collection of future values or events.
  • Observer: is a collection of up to 3 callbacks (next, error, complete) that knows how to listen to values delivered by the Observable.
  • Subscription: represents the execution of an Observable, is primarily useful for starting the execution in case of a cold observable and for cancelling the execution in case of hot observable.
  • Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, flatMap, etc.
  • Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
  • Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.

Learn more about Angular

Best practices to know in angular development .