Gain insights into building Reactive Web Applications with Spring Boot 2 and Spring WebFlux, from database integration to front-end. Explore Reactive vs MVC, performance, and deployment with Docker.

Full Reactive Stack with Spring Boot 2 and Spring WebFlux.png

tarball.tar.gz

initialzr

spring-mongo-only

Lesson-playing-with-reactive-endpoints

angular-app-with spring-mongo

angular-app-with spring-mongo-copy

spring-mongo-only-copy

initialzr-copy

This course is your guide to using Spring Boot 2 and Spring WebFlux to create Reactive Web Applications. 

You will learn how to build a full-reactive system from the database (MongoDB reactive) to the front-end (Angular), using a Reactive programming strategy leveraged by Spring WebFlux, with the simplicity offered by Spring Boot 2. 

Beyond that though, you will be able to compare the Spring WebFlux with the standard MVC approach as well, covering the main aspects such as simplicity, performance, user experience, and more.

The last part of the course ties it all up by teaching you to run the application using Docker compose. By the end of this course, you will have a great new skill for your resume and you’ll be able to build your own projects using the full Reactive stack.

Full Reactive Stack: Spring Boot 2 & Spring WebFlux

## Code

Let’s take a look at the code of the **reactive service** that interacts with the backend using Server-Sent Events.

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

import { Quote } from './quote';

import {Observable} from 'rxjs';

@Injectable()
export class QuoteReactiveService {

  url: string = 'http://localhost:8080/quotes-reactive';
  urlPaged: string = 'http://localhost:8080/quotes-reactive-paged';

  getQuoteStream(page?: number, size?: number): Observable<Quote> {
    return new Observable<Quote>((observer) => {
      let url = this.url;
      if (page != null) {
        url = this.urlPaged + '?page=' + page + '&size=' + size;
      }
      let eventSource = new EventSource(url);
      eventSource.onmessage = (event) => {
        console.debug('Received event: ', event);
        let json = JSON.parse(event.data);
        observer.next(new Quote(json['id'], json['book'], json['content']));
      };
      eventSource.onerror = (error) => {
        // readyState === 0 (closed) means the remote source closed the connection,
        // so we can safely treat it as a normal situation. Another way 
        // of detecting the end of the stream is to insert a special element
        // in the stream of events, which the client can identify as the last one.
        if(eventSource.readyState === 0) {
          console.log('The stream has been closed by the server.');
          eventSource.close();
          observer.complete();
        } else {
          observer.error('EventSource error: ' + error);
        }
      }
    });
  }

}

## Explanation

Now, here is some explanation about the most important ideas in this code:

With [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource), we connect to the endpoint, setting a content-type `text/event-stream`. This is implicitly set up by the API. That way, as we saw in the previous section, we open a channel in which the server will send us events. We create this connection implicitly when we construct the `EventSource` object, passing the endpoint in which the server exposes this functionality. Note that, depending on whether the page and size parameters are used in the method, we’re passing them as parameters in the URL.

Whenever we receive an event through the `EventSource` object (`onmessage` on `line-20`), we emit a new `Quote` object using `Observable.next` on `line-23`. Note that we don't use `EventSource` (SSE) to pass data within our UI application. Instead, we use a **ReactiveX (RxJS) `Observable`** object. A subscriber of that `Observable` will receive events when the array gets updated – an action that we perform by calling `next()`.

As detailed in the code comments (`line 26-29`), we'll get an error when the stream is closed by the remote. We can identify that error if `readyState` is 0 (`line-30`), and then we treat it as a normal situation. We complete the observer (`line-31`) so the subscribers will know that they consumed all of the available data.

# Code

Let’s take a look at the code of the **reactive service** that interacts with the backend using Server-Sent Events.

# Explanation

Now, here is some explanation about the most important ideas in this code:

With [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource), we connect to the endpoint, setting a content-type `text/event-stream`. This is implicitly set up by the API. That way, as we saw in the previous section, we open a channel in which the server will send us events. We create this connection implicitly when we construct the `EventSource` object, passing the endpoint in which the server exposes this functionality. Note that, depending on whether the page and size parameters are used in the method, we’re passing them as parameters in the URL.

Whenever we receive an event through the `EventSource` object (`onmessage` on `line-20`), we emit a new `Quote` object using `Observable.next` on `line-23`. Note that we don't use `EventSource` (SSE) to pass data within our UI application. Instead, we use a **ReactiveX (RxJS) `Observable`** object. A subscriber of that `Observable` will receive events when the array gets updated – an action that we perform by calling `next()`.

As detailed in the code comments (`line 26-29`), we'll get an error when the stream is closed by the remote. We can identify that error if `readyState` is 0 (`line-30`), and then we treat it as a normal situation. We complete the observer (`line-31`) so the subscribers will know that they consumed all of the available data.

Learn how to create an angular reactive service.

Reactive Web

Full Reactive Stack Backend

Connecting Angular With the WebFlux Backend

Go Green: Create a Recycling App Using Angular and Spring Boot

Conclusion

Appendix

Angular Reactive Service

Code

Explanation