Reactive Programming in Angular and Spring Boot with WebFlux

Reactive Programming is a way to build applications that react to changes (events, user actions, or data updates) efficiently and quickly. It’s like building an app that listens and reacts to things happening in real time without slowing down or crashing.

1. What is Reactive Programming?

In a simple analogy, imagine a grocery store where customers come to buy items. If there’s only one cashier, they handle one customer at a time, and everyone else must wait in line (like in traditional apps). But in reactive programming, instead of making everyone wait, there are several self-service checkouts (multiple threads handling requests). Customers get processed as soon as a checkout becomes available. This makes everything run smoother, faster, and more efficient.

Reactive programming is especially useful in web applications because it helps handle lots of requests without slowing down, especially when connecting with databases, other services, or APIs.

In Spring Boot, reactive programming is made possible through Spring WebFlux, and in Angular, it’s handled by RxJS (Reactive Extensions for JavaScript).

2. Spring Boot WebFlux: How Does It Work?

Spring WebFlux is a module in Spring Boot that allows developers to build non-blocking web applications. In traditional Spring MVC, each request takes up a thread, and if you have a lot of requests, you may run out of threads, causing slowdowns. WebFlux, on the other hand, doesn’t block threads. It handles requests asynchronously, which means threads aren’t locked up waiting for slow operations (like a database query).

Real-Life Example:

Let’s say Bob runs a grocery shop website where users can place orders. If Bob’s website uses traditional Spring MVC and many users place orders simultaneously, the system might struggle to handle all those requests, especially if the database is slow. Some users might even get frustrated waiting for their orders to be confirmed.

With Spring WebFlux, however, each user’s order is processed asynchronously. Instead of waiting for one order to be completed before starting the next, WebFlux listens for multiple requests at once and processes them as resources become available. Bob's users can now submit orders at the same time, and the system remains responsive, no matter how many users are online.

Here’s an example of an endpoint in WebFlux:

@RestController
public class OrderController {
    
    @GetMapping("/orders")
    public Flux<Order> getAllOrders() {
        return orderService.findAllOrders();  // Returns a stream of orders
    }
}        

In this case, Flux<Order> represents a reactive stream of orders, allowing the system to process multiple orders concurrently, rather than one by one.

3. RxJS in Angular: Making Your App Reactive

In Angular, RxJS helps you manage data streams and events asynchronously. With RxJS, you can subscribe to events (like a button click or data update) and react to them when they happen, without having to wait.

For example, if Bob’s website uses Angular, RxJS can help make sure users get real-time updates about their orders. If the order is processed and confirmed on the server (using WebFlux), Angular can react to that update immediately and show the user that their order is confirmed, without refreshing the page.

Here’s an Angular example using RxJS:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-order-status',
  template: `<div *ngIf="order$ | async as order">{{ order.status }}</div>`
})
export class OrderStatusComponent {
  order$: Observable<Order>;

  constructor(private http: HttpClient) {
    this.order$ = this.http.get<Order>('/api/orders/1');  // Fetching an order
  }
}        

In this example, Angular uses RxJS to subscribe to the order updates. The async pipe makes sure the data is displayed on the page as soon as the update comes in, without blocking the application.

4. Connecting Angular and Spring WebFlux: Real-Time Order Tracking

Now, let's bring the two sides together — Angular for the front end and WebFlux for the back end — to create a real-time order tracking system for Bob’s grocery store.

When a user places an order on Bob’s website:

• Spring Boot WebFlux processes the order and streams the updates.
• Angular with RxJS listens for those updates and dynamically changes the status of the order on the user’s screen.

This real-time communication can be done using WebSockets or Server-Sent Events (SSE). Here’s how it works:

Spring Boot with SSE:

@GetMapping("/orders/status")
public Flux<ServerSentEvent<OrderStatus>> getOrderStatus() {
    return Flux.interval(Duration.ofSeconds(1))
               .map(sequence -> ServerSentEvent.<OrderStatus>builder()
                               .data(orderService.getCurrentStatus())
                               .build());
}        

In this example, the server sends order status updates to the client every second.

Angular with RxJS:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-order-status',
  template: `<div *ngIf="status$ | async as status">{{ status }}</div>`
})
export class OrderStatusComponent {
  status$: Observable<string>;

  constructor(private http: HttpClient) {
    this.status$ = this.http.get('/api/orders/status', { responseType: 'text' });
  }
}        

Here, Angular subscribes to the stream of status updates and displays them in real time, ensuring Bob’s customers are always up-to-date.

5. Benefits of Reactive Programming

• Scalability: Both Spring WebFlux and RxJS allow your app to handle thousands of requests without slowing down.
• Performance: By not blocking threads, your app stays responsive even under heavy loads.
• Real-time Updates: Users get immediate feedback, improving their experience.

Bob’s grocery shop is now running smoother than ever, with Spring WebFlux on the back end ensuring fast, efficient processing of orders, and Angular with RxJS providing real-time updates on the front end. Reactive programming makes applications more scalable, efficient, and responsive, especially when dealing with high traffic or real-time interactions.

Find us

linkedin Shant Khayalian

Facebook Balian’s

X-platform Balian’s

web Balian’s

#ReactiveProgramming #AngularRxJS #SpringWebFlux #Java #WebDevelopment #RealTimeApps #FullStackDevelopment