data-driven-docs

Selft training repo

Project maintained by ggranados Hosted on GitHub Pages — Theme by mattgraham

Reactive Programming

Table of Contents

What’s Reactive Programming

Reactive programming is a programming paradigm that focuses on asynchronous data streams and the propagation of changes. It is often used to handle events and data flow in a more responsive and efficient manner, particularly in user interfaces and systems where events occur frequently.

At the core of reactive programming is the concept of reactive streams. A reactive stream represents a sequence of events or data changes over time. These events can be anything from user interactions, sensor readings, database updates, or any other asynchronous events. Reactive programming provides tools and abstractions to process, transform, and react to these events in a declarative and composable way.

For example, in an imperative programming setting, a := b + c would mean that a is being assigned the result of b + c in the instant the expression is evaluated, and later, the values of b and c can be changed with no effect on the value of a. On the other hand, in reactive programming, the value of a is automatically updated whenever the values of b or c change, without the program having to explicitly re-execute the statement a := b + c to determine the presently assigned value of a.

var b = 1
var c = 2
var a = b + c
b = 10
console.log(a) // 3 (not 12 because "=" is not a reactive assignment operator)

Now imagine you have a special operator “$=” that changes the value of a variable (executes code on the right side of the operator and assigns result to left side variable) not only when explicitly initialized, but also when referenced variables (on the right side of the operator) are changed

var b = 1
var c = 2
var a $= b + c
b = 10
console.log(a) // 12

Back to top

Observer Pattern

Reactive programming is a broader paradigm that encompasses the principles of the Observer Pattern but extends them to provide more comprehensive and powerful tools for handling asynchronous and event-driven programming.

Reactive programming often employs the Observer Pattern as a fundamental building block. In reactive programming, you have a source of data (the observable) that emits events or data changes, and you have subscribers (the observers) that react to these events. This is analogous to the traditional Observer Pattern, where a subject notifies its observers about state changes.

Reactive programming goes beyond the basic Observer Pattern by providing operators and functions for composing, transforming, filtering, and manipulating data streams.

Back to top

Asynchronous vs Synchronous

Back to top

Thread Management in Synchronous Programming

Synchronous programming typically involves a linear flow of execution, where each operation is executed one after the other in a sequential manner. In the context of thread management, this means that a single thread of execution is used to carry out all tasks and operations. If one operation blocks (e.g., waiting for I/O or a resource), the entire thread is blocked, and no other tasks can be performed until the blocking operation completes.

For example, in a synchronous programming model:

print("Starting")
result = perform_synchronous_io()  # Blocking I/O operation
print("Result:", result)
print("Finished")

In this case, if perform_synchronous_io() blocks, the entire thread is blocked, and the program will not proceed until the I/O operation completes.

Back to top

Thread Management in Asynchronous Programming

Asynchronous programming involves the use of multiple threads (or non-blocking event loops) to manage concurrent operations efficiently. In this model, when an operation blocks, the thread can be released to perform other tasks, allowing for better utilization of resources and improved responsiveness.

For example, in an asynchronous programming model:

print("Starting")
async_result = perform_asynchronous_io()  # Non-blocking I/O operation
print("Continuing other work...")
result = await async_result
print("Result:", result)
print("Finished")

In this case, when perform_asynchronous_io() is called, the thread is not blocked, and other work can continue. The await keyword is used to pause the current execution until the asynchronous operation is complete.

Asynchronous programming is particularly useful in scenarios where tasks can be performed concurrently, such as handling multiple network requests or responding to various user interactions in a responsive way.

img.png

Back to top

Example

Here’s a basic demonstration of reactive programming using JavaScript and the RxJS library, which is a popular library for reactive programming:

// Import the RxJS library
import { fromEvent } from 'rxjs';
import { map, filter, debounceTime } from 'rxjs/operators';

// Create an observable from a DOM element's click events
const button = document.getElementById('myButton');
const clickObservable = fromEvent(button, 'click');

// Use operators to transform and filter the stream
const transformedStream = clickObservable.pipe(
    debounceTime(300), // Wait for 300ms pause between clicks
    map(event => event.clientX), // Extract the x-coordinate of the click
    filter(x => x > 100) // Filter out clicks with x-coordinate less than 100
);

// Subscribe to the transformed stream to react to events
transformedStream.subscribe(x => {
    console.log('Clicked at x-coordinate:', x);
});

In this example:

Back to top

Languages

Several modern programming languages and frameworks are commonly used for reactive programming due to their strong support for asynchronous and event-driven programming paradigms. Some of the most popular ones include:

Reactive programming allows you to easily compose and manipulate data streams while promoting a more responsive and efficient way of handling asynchronous events.

Back to top

Ref.

Get Started