Full Reactive Stack with WebFlux and RxJS
We’ll use this guide to demonstrate the capabilities of Spring WebFlux to build a Reactive Web Application, supported by a good example. To avoid endogamic scenarios in which we use also Spring as a client, I’ll step out of my comfort zone to show you how to complete the full reactive stack with a client application in Angular JS 4.
The complete source code for Backend and Frontend is available on GitHub: Full Reactive Stack
Don’t forget to give it a star!
Why Reactive? Why also for the Web?
As described on the official WebFlux documentation, reactive patterns and non-blocking functionality are widely extended nowadays but, when we talk about backend controllers and implementing Web APIs, most of the available options are based on synchronous communication.
Spring 5 offers us a non-blocking, reactive alternative to the standard Spring MVC approach: Spring WebFlux. It is based on the Project Reactor (also part of the Spring family), which itself follows the Reactive Streams Specification so the standard concepts are available there: Publisher, Subscriber, etc.
On the client side, there are several options to work with reactive patterns, being RxJS the most popular one. Same as Reactor, it implements the Observable, Publisher and Subscriber patterns.
The sample application
To showcase the reactive capabilities we’ll create a client web application that receives quotes from the book Don Quixote. Instead of just asking for the quotes using a standard blocking call, we’ll open a Server-Sent Events channel. The backend application will send these events once there is a subscriber (our client application); this part is supported by WebFlux returning a
Flux<Quote> object. On the AngularJS end, we model the connection using an
EventSource object, which we map to a RxJS
The part that subscribes to the Observable is the AngularJS’s
AsyncPipe, which supports reactive streams.
Where to go next
We’ll continue to the next post in this series showing how to implement the backend part of our application.
- Full Reactive Stack with Spring WebFlux, AngularJS, RxJS and EventSource – Introduction (this post)
- Reactive Web with Spring Boot and Spring WebFlux
- Subscribing to a Reactive Endpoint with AngularJS, RxJS and EventSource