Reactive Programming in Angular

  • Event streams are sequences of values produced over a period of time. And the state is a single value that varies over time.
  • Another thing that is different in regards to the state and events is their relation to time.

  • Using time when deriving the state is rarely practical, i.e., time is always implicit. Using time when dealing with events is common (e.g., debouncing), i.e., time is often explicit.

  • To make dealing with time easier, Angular has support for reified reactive programming.

  • let’s look at the {{talk.title}} binding. Angular does not provide any object representing it — we only get the current value. We can call this type of reactive programming transparent because the developer only interacts with the most recent value, and the act of observation is hidden in the framework.
  • Now, let’s look at the selected event. Angular gives us a EventEmitter object to represent it. We can call this type of reactive programming reified because we have access to a concrete object representing the act of observation. And having these concrete objects is powerful because we can manipulate them, pass them around, and compose them. In particular, we can use them to explicitly handle time.
  • There are many ways to implement event streams or reified reactive programming. Angular embraced RxJS, and the EventEmitter class is just an implementation of RxJS/Observable.
  • When saying “reactive programming”, many are referring to programming using RxJS. Most of what you do in Angular is reactive even if you don’t use RxJS. Reified reactive programming is a better way to refer to programming using observable-based APIs.
  • Since reified reactive programming is more complicated than transparent reactive programming, Angular supports handling events in a more traditional way by supplying callbacks (e.g., the click handler). In other words, we can use both transparent and reified programming to handle events. We will see the same being true in other parts of the framework and the ecosystem: we can use transparent reactive programming for simple use cases, and the reified one for advanced ones.
  • RxJS Observables are functions attached to the Observable Type.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s