Chapter 7: Reactive Programming with TypeScript

Reactive programming is a paradigm of computing that is concerned with how data flows through a system and how the system reacts to changes. By using this paradigm, you simplify the communication model between components and improve performance. Reactive programming has many use cases that include creating interactive user interfaces, real-time feeds, and communication tools.

Reactive programming places asynchronous communications between services front and center, dealing with how and when they respond to changes. Combined with functional programming, you can create composable operators that can be used to build scalable reactive systems. In this chapter, we will explore some fundamental Reactive programming concepts and techniques.

The following are the topics that will be discussed in this chapter:

• Learning reactive programming concepts
• Asynchronous propagation of changes
• Understanding Promises and Futures
...

Technical requirements

The code bundle for this chapter is available on GitHub here: https://github.com/PacktPublishing/TypeScript-4-Design-Patterns-and-Best-Practices/tree/main/chapters/chapter-7_Reactive_Programming_concepts.

Learning Reactive programming concepts

When we use the term Reactive in computer programming, we usually refer to the following three concepts:

• Reactive programming: This is a computing paradigm that says that information flow is propagated asynchronously. For example, if one service object queries another service for some data, the response does not happen at the same time. What this means is that the response might be accepted but gets evaluated at a later time. Once the response is ready, then there are several predefined ways (such as callbacks or Futures) to propagate it to consumers.
• Reactive systems: A Reactive system is a set of concepts and design principles for building scalable and distributed applications that maintain an asynchronous way of communication. These stem from the Reactive manifesto, which is a document that defines the core principles of Reactive programming.
• Functional reactive programming (FRP): This is a combination of Reactive programming...

The asynchronous propagation of changes

In practical terms, Reactive programming represents a paradigm where we use declarative code to describe asynchronous communications and events. This means that when we submit a request or a message to a channel, it will be processed or accepted at a later time. As we obtain data as part of the response that we try to build, we send it back asynchronously. It is then the responsibility of the consumer to react based on those changes. The communication format needs to be established beforehand, whether you send the data in chunks or whether you send it back in a single response.

Next, we describe a few of the most popular communication techniques and patterns that you can use when developing Reactive programming systems.

The pull pattern

With the Pull pattern, the consumer of the data needs to proactively query the source for updates and react based on any new information. This means that they have to poll the producer periodically for...

Understanding Promises and Futures

Let's start with the most popular Reactive programming structure, which is the Promise. A Promise is a container for single future computations. A future computation is a result of a function call that will finish in future time and not immediately. The way that Promises work is by creating a container that can either resolve to a value in the future or reject with a message.

Simply speaking, a Promise is when you call a function and instead of returning an actual value, it returns an object that promises you that a value will be returned at some point. The creator of the Promise object will have to get this value by checking on the outcome of this computation at a later time, be it successful by resolving, or unsuccessful by rejecting.

Let's see a typical example of how you will use Promises in the real world:

Promises.ts

const fetch = require("node-fetch");
const pullFromApi = new Promise(async (resolve, reject)...

Learning observables

An observable represents a sequence that is invokable and produces future values or events. The idea is that you create an observable object and you add observers to it for receiving future values. Once the observable pushes a value, observers will receive them at some point.

Observables build upon the foundational ideas of the observer pattern that we discussed in Chapter 5, Behavioral Design Patterns. However, this pattern worked specifically with classes and its scope was limited. Observables, on the other hand, try to expand the idea of composing asynchronous and event-based programs that react based on changes.

Within the scope of Reactive programming, observables represent the producers of future values, and observers represent the consumers. By default, the communication happens as soon as the observable has any observers, so it waits to be invoked (subscribed) before it can emit any data. The association between the producer and the consumer is decoupled...

Summary

Within this chapter, we explored the fundamental concepts of Reactive programming and explored their usage in the real world.

We started by explaining the fundamental concepts of Reactive programming. We explored in detail the alternative ways of change propagation, including push, pull, and the hybrid model. Then, we learned more about Promises and Futures and their key differences. Finally, we spent some time understanding observables, functional Reactive programming operators, and cold versus hot observables.

Utilizing these concepts will encourage you to create composable, cleaner, and readable code that scales well as your application grows over time. In the following chapter, we will shift gears and focus on the most recommended practices and techniques when developing large-scale TypeScript applications.

Q & A

1. How does Reactive programming differ from object-oriented programming?

   Object-oriented programming deals with how objects are created and used and how they manage their state and behavior. An object represents an entity of the real world and can interact with the rest of the program via methods. Reactive programming, on the other hand, deals with data and how it is propagated to other parts of the system.

2. How do observables compare to the observer pattern?

   Both are similar, but they work on a different level. With an observer pattern, you add and dispose of observers in the list and notify the subscriber list of any state changes using methods and encapsulation. Observables, on the other hand, are more flexible as they are built on top of the concepts of the observer pattern and can be composed in a functional way. You can think of observables as an extension of the observer pattern, managing sequences of data and composable operators.

3. How does Reactive programming...

Further reading

• A good, in-depth book about Reactive programing is Mastering Reactive JavaScript, by Erich de Souza Oliveira, available at https://www.packtpub.com/product/mastering-reactive-javascript/9781786463388.
• The Reactive manifesto can be found at https://www.reactivemanifesto.org/.