{"id":4725,"date":"2019-02-09T10:35:00","date_gmt":"2019-02-09T08:35:00","guid":{"rendered":"https:\/\/orfium.com\/?p=4725"},"modified":"2023-04-26T14:16:09","modified_gmt":"2023-04-26T11:16:09","slug":"introduction-to-reactive-programming","status":"publish","type":"post","link":"https:\/\/www.orfium.com\/ja\/%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e3%83%bc%e3%81%aa%e3%81%97\/introduction-to-reactive-programming\/","title":{"rendered":"Introduction to Reactive Programming"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n


As programmers, many of us have to deal with handling a response data that comes from an asynchronous callback. At first, that seems to work just fine, but as the codebase gets bigger and more complicated we start wondering if there is a better way to handle that response data and surely if there is a better way to unit test it.<\/p>\n\n\n\n

Such a better way exists and it\u2019s called Reactive Programming.<\/strong><\/p>\n\n\n\n

In this post, we will present a brief introduction to reactive programming and examine how it can help us build more robust applications.<\/p>\n\n\n\n

What is Reactive Programming<\/strong><\/h2>\n\n\n\n

According to wikipedia<\/a>, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.<\/p>\n\n\n\n

Well, that may sound a bit complicated and doesn\u2019t really help us understand what Reactive Programming really is.<\/p>\n\n\n\n

So in order to keep it sharp and clear, we can describe reactive programming as programming with asynchronous data streams that a consumer observes and reacts to them.<\/p>\n\n\n\n

For sure, this is a much easier way to perceive it. However, we should elaborate on a small but crucial detail that differentiates this type of programming; the data streams and their meaning.<\/p>\n\n\n\n

In a few words, streams are a sequence of events over time. That\u2019s it, so simple.<\/p>\n\n\n\n

For example, a stream could be a user\u2019s action to fill a form on a website. Each keypress is an event that provides us with information on what the user is typing.  A submit button click is an event that notifies us when the user submitted his form and consequently when the stream completed.<\/p>\n\n\n\n

Why Reactive Programming<\/strong><\/h2>\n\n\n\n

Reactive Programming has gained a lot of popularity in recent years. You probably have read articles<\/a> or attended lectures<\/a> on conferences or local meetups about it. You may, though, still wonder why to use it and how it would help you?<\/p>\n\n\n\n

The basic concept of Reactive Programming is that everything can be a stream of data. An API response, a list of rows from a local database, an Enum state class, even a button click can be represented as a stream of data able to be observed by a consumer. This stream can be filtered, transformed, combined with another stream or even shared with multiple consumers. Every stream runs on its own non-blocking thread, allowing us to execute multiple code blocks simultaneously, turning part of our application into asynchronous.<\/p>\n\n\n\n

How to use Reactive Programming<\/strong><\/h2>\n\n\n\n

Reactive Extensions or Rx<\/a> is an implementation of Reactive Programming principles following Observer pattern, Iterator pattern and Functional Programming. In this way, Rx abstracts away any concerns about threading, synchronization, thread safety or concurrent data structures.<\/p>\n\n\n\n

The two key components of Rx are Observables and Subscribers, or Observers. An observable is a class that emits the stream of data. A subscriber is a consumer that subscribes, receives and reacts to the data emitted by an Observable.<\/p>\n\n\n\n

We can think observables as event emitters, that emit three events: onNext, onComplete, onError. The common flow of an observable is to emit the data, using the onNext method, and then call the onComplete or the onError method, if an error has occurred. When an observable calls onComplete or onError, it gets terminated. Observables are grouped by hot and cold observables; you can read more about it here<\/a>.<\/p>\n\n\n\n

A subscriber is a class that can observe these three events, by implementing these methods and then calling the subscribe method on the observable.<\/p>\n\n\n\n

Rx Operators<\/strong><\/h2>\n\n\n\n

By this point, Rx seems quite simple and may not sounds useful enough to start using it. However, this is where the interesting part begins! The Operators. One of the most important features of Rx is Operators. An operator is a function that takes one observable as its first argument and returns another observable. An operator allows us to take an observable, transform it and change its behavior according to our needs. Using an operator we can filter, map or cache the data emitted by an observable, combine two or more observables, chain different observables, specify the scheduler on which an observer will observe an observable, create, delay, repeat or retry an observable and many more. As we can see the true power of Rx comes from its operator. Here you can view the whole list of Rx\u2019s operators<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Show me some code<\/strong><\/h2>\n\n\n\n

Let\u2019s dive into some code to discover, through a real-world example, the true power of Rx.<\/p>\n\n\n\n

In our example, we will borrow the paradigm of a shopping application. When the user enters his shopping cart the flow, described below,  must be executed :<\/p>\n\n\n\n