Building a Reactive Framework with Angular and Spring WebFlux

1. Introduction

This document outlines the implementation of a reactive framework using Angular for the frontend and Spring WebFlux for the backend. The approach ensures non-blocking, high-performance applications suitable for real-time systems.

2. Backend: Spring WebFlux Implementation

2.1 Dependencies (Maven)

<dependencies>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-webflux</artifactId>

    </dependency>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-data-r2dbc</artifactId>

    </dependency>

    <dependency>

        <groupId>org.postgresql</groupId>

        <artifactId>r2dbc-postgresql</artifactId>

    </dependency>

</dependencies>

2.2 Define the Model

import lombok.Data;

import org.springframework.data.annotation.Id;

import org.springframework.data.relational.core.mapping.Table;

@Data

@Table("employees")

public class Employee {

    @Id

    private String id;

    private String name;

    private double salary;

}

2.3 Create Reactive Repository

import org.springframework.data.repository.reactive.ReactiveCrudRepository;

import reactor.core.publisher.Flux;

public interface EmployeeRepository extends ReactiveCrudRepository<Employee, String> {

    Flux<Employee> findBySalaryGreaterThan(double salary);

}

2.4 Implement Reactive Service

import org.springframework.stereotype.Service;

import reactor.core.publisher.Flux;

@Service

public class EmployeeService {

    private final EmployeeRepository repository;

    public EmployeeService(EmployeeRepository repository) {

        this.repository = repository;

    }

    public Flux<Employee> getAllEmployees() {

        return repository.findAll();

    }

}

2.5 Define the Controller

import org.springframework.web.bind.annotation.*;

import reactor.core.publisher.Flux;

@RestController

@RequestMapping("/employees")

public class EmployeeController {

    private final EmployeeService service;

    public EmployeeController(EmployeeService service) {

        this.service = service;

    }

    @GetMapping

    public Flux<Employee> getAllEmployees() {

        return service.getAllEmployees();

    }

}

3. Frontend: Angular Implementation with WebFlux

3.1 Generate Angular App & Service

ng new reactive-frontend

cd reactive-frontend

ng generate service employee

3.2 Employee Service (Angular)

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })

export class EmployeeService {

  private baseUrl = 'http://localhost:8080/employees';

  constructor(private http: HttpClient) {}

  getAllEmployees(): Observable<any[]> {

    return this.http.get<any[]>(this.baseUrl);

  }

}

3.3 Component to Display Employees

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from './employee.service';

@Component({

  selector: 'app-employee-list',

  templateUrl: './employee-list.component.html'

})

export class EmployeeListComponent implements OnInit {

  employees: any[] = [];

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {

    this.employeeService.getAllEmployees().subscribe(data => {

      this.employees = data;

    });

  }

}

3.4 Template HTML

<h2>Employee List</h2>

<ul>

  <li *ngFor="let emp of employees">

    {{ emp.name }} - ${{ emp.salary }}

  </li>

</ul>

4. Running the Application

Start Backend:

mvn spring-boot:run

Start Frontend:

ng serve

5. Key Benefits of Reactive Framework

✅ Pros:

- Non-blocking Backend – Uses Spring WebFlux for high performance.

- Efficient Frontend – Angular fetches and updates UI reactively using RxJS.

- Real-time Updates – Can be extended with WebSockets / SSE.

- Better Resource Utilization – Handles thousands of concurrent requests efficiently.

- Scalable – Suitable for microservices and cloud-native architectures.

❌ Cons:

- Complex Debugging – Harder to trace errors in async execution.

- Steep Learning Curve – Requires understanding of Mono, Flux, RxJS, and backpressure.

- Limited Database Support – Traditional JDBC (blocking) is incompatible; requires R2DBC.

- Not Always Needed – Overkill for simple CRUD operations; Spring MVC may be sufficient.

✅ Conclusion: Reactive Framework with Spring WebFlux and Angular

Using Spring WebFlux with Angular offers a powerful combination for building high-performance, non-blocking, and scalable web applications. With Spring WebFlux handling reactive backend services and Angular leveraging RxJS for reactive UI updates, the full-stack becomes well-suited for real-time data streaming, microservices, and cloud-native deployments.

However, this reactive architecture comes with complexity. It requires a solid understanding of reactive principles (Mono, Flux, RxJS), careful debugging, and sometimes, workarounds for database and tooling limitations.

Choose this stack when: your application demands high concurrency, real-time updates, or microservices architecture.