{"id":8070,"date":"2019-12-02T08:13:19","date_gmt":"2019-12-02T08:13:19","guid":{"rendered":"https:\/\/www.arobs.com\/?p=8070"},"modified":"2022-01-07T09:08:11","modified_gmt":"2022-01-07T09:08:11","slug":"reactive-extensions-rx","status":"publish","type":"post","link":"https:\/\/arobs.com\/en\/blog\/reactive-extensions-rx\/","title":{"rendered":"Reactive extensions (Rx)"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Reactive extensions -\u00a0Introduction to reactive programming<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Topics of this article<\/strong>: Rx, reactive programming, declarative programming, IoT systems<\/a><\/span>, IObservable, IObserver<\/p>

About the author:<\/strong> Bogdan Dobrea is an experienced .NET developer with a great curiosity towards discovering new technologies.<\/p>

Reactive extensions can make your programming life easier. But how does it work? Let’s take it step by step. We all learned in school imperative programming, which has the advantage of being simple to explain and implement. This programming paradigm allows us to write a code where we describe, step by step, what we want to do. Hence, the result will be exactly predictable. It happens what we wanted to happen.
Let’s try to exemplify this using a real situation: an online store<\/strong>, where, through the browser, any user can look at products and place an order.<\/p>

\"Reactive<\/p>

As an administrator of this online store, we would like to create an algorithm that returns the top \/”rich” customers: for example, we want to find out how many customers have in their basket products that total at least 1000 Ron.<\/p>

In the code, our client will be associated with the Customer<\/strong> class. We only need 2 properties, its name (Name)<\/em> and the total of its shopping cart, expressed by the OrderAmount<\/em> property. For simplicity, we will use Romanian lei (Ron) when we refer to the total of the basket.<\/p>

The following examples are written in C#, but the subject of the article is not limited to this language, as we will find out later.<\/p>

\"Reactive<\/p>

Our premise is that at one point, in our private virtual space there are 5 clients<\/strong>, each having a name as well as a basket of a certain value:<\/p>

\"Reactive<\/p>

Our imperative algorithm, whereby we want to find out which of the 5 clients has spent at least 1000 RON could look like this:<\/p>

\"\"<\/p>

In line with the definition of the imperative programming style mentioned at the beginning of the article, I described on each line, step by step, what I wanted to happen.<\/p>

First, we created a new list of topSpendersList<\/em>, then we went through the list of customers item by item, only interested in the name of the person whose shopping basket exceeds or is equal to 1000 Ron. At the end of the execution of this algorithm, we will notice that in the topSpendersList<\/em> list we have 3 members (“Felicia”<\/em>, “Robert”<\/em> and “Fred”<\/em>), because each of the 3 has spent at least 1000 Ron.<\/p>

Declarative programming<\/strong><\/span><\/h2>

Everything was fine so far, we found out what we needed. Now let\u2019s see how we could rewrite this algorithm using the declarative programming model.
Declarative programming, in contrast to the imperative one, is a programming style in which the logic of a calculation is described, but without presenting the execution mode. Those familiar with .Net (C#, VB) already use this programming mode when writing code using LINQ:<\/p>

\"Reactive<\/p>

In the lines of code above, the logic of a calculation is expressed (it selects from the customers list only the customers who have a value of the shopping cart at least equal to 1000 Ron, then using their name creates a new list), without having to write the action step by step. The source code for the Where()<\/em>, Select()<\/em> and ToList()<\/em> functions is in the .NET Framework library.
The result of the execution of this algorithm will be the same as for the previous one. Therefore, the topSpendersList<\/em> list will contain the same 3 members (“Felicia”<\/em>, “Robert”<\/em> and “Fred”<\/em>).<\/p>

Reactive programming<\/strong><\/span><\/h2>

What does reactive mean? A common dictionary tells us that it is about a reaction to a stimulus.
To explain it more familiarly, I will use the well-known Excel spreadsheet, where we can have static cells as well as dynamic cells (for example, a formula). In the screenshot below, in column A we enter static values, and the first 2 cells in column D have the calculation formula, respectively the average of the first 10 values in column A. As a bonus, we added a 2D Chart with the help of to which we will represent a graph with the values in column A.<\/p>

\"Reactive<\/p>

Each time we add, modify, or delete a value in a cell in column A, we notice that Sum, Average, and Graph 2D “reacts” to these changes.<\/p>

\"Reactive<\/p>

Returning to our example, suppose that every time a new client appears on the site, we want the topSpendersList<\/em> list to update itself with the name of the new client if it meets the condition imposed by us.<\/p>

The examples written above will no longer work, because they depend on a fixed customer list, while we now have a customer flow.<\/p>

And here come Reactive Extensions<\/strong>, which is a free library with which we can rewrite our algorithm so that it takes into account the fact that it has to “react” every time we have a new client.<\/p>

\"Reactive<\/p>

Although there are more lines of code written than in the previous examples, we will find out that reactive extensions are easy to understand, and we will use this pattern often in the future.<\/p>

Let’s take them one at a time:<\/p>