This document summarizes a presentation on building full-stack reactive applications with Spring WebFlux and Angular. The presentation covers reactive programming concepts, implementing a reactive backend with Spring WebFlux, building a reactive frontend with Angular and NgRx, and integrating them with a MongoDB data source. Demo applications are shown to illustrate reactive data flow and state management across the full stack.

1. @loiane
loiane.com
Full-Stack Reactive
with Spring WebFlux +
Angular

2. Agenda
•Why Reac*ve
•Reac*ve x MVC
•Reac*ve Back-end with Spring WebFlux
•Reac*ve Front-end with Angular
•Angular State Management with NgRx and RxJS
•Demo

3. Tech Stack

4. Full-Stack Architecture
Data source
Event
Source Observable<T[]>
Component ->
async pipe
ngRx
Redux
Repository
Flux<T>
Controller |
Routes
Flux<T>
MongoDB Spring WebFlux Reactive Angular

8. Reactive Programming
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams
Streams Streams Streams Streams Streams Streams Streams Streams Streams

10. Reactive Applications
Publisher SubscriberStream

11. Spring 5
https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html

12. Spring Data
public interface ReactiveMongoRepository<T, ID> {
<S extends T> Mono<S> insert(S var1);
<S extends T> Flux<S> insert(Iterable<S> var1);
<S extends T> Flux<S> insert(Publisher<S> var1);
<S extends T> Flux<S> findAll(Example<S> var1);
<S extends T> Flux<S> findAll(Example<S> var1, Sort var2);
}

13. One Object

14. Multiple Objects

16. Oracle Cloud

17. Model
@NoArgsConstructor
@AllArgsConstructor
@Data
@Document(collection = "products")
public class Product {
@Id
private String id;
private String name;
private String description;
private Double price;
private String image;
private String status;
private String discounted;
private Double discount;
}

18. Repository
public interface ProductRepository
extends ReactiveMongoRepository<Product, String> {
}

19. Controller
@RestController
@RequestMapping("/api/products")
public class ProductController {
private ProductRepository repository;
public ProductController(ProductRepository repository) {
this.repository = repository;
}
}

20. Controller
@GetMapping
public Flux<Product> getAll() {
return repository.findAll();
}
@GetMapping("{id}")
public Mono<ResponseEntity<Product!>> getById(@PathVariable String id) {
return repository.findById(id)
.map(product !-> ResponseEntity.ok(product))
.defaultIfEmpty(ResponseEntity.notFound().build());
}

21. Controller: WebFlux x MVC
@GetMapping
public Flux<Product> getAll() {
return repository.findAll();
}
@GetMapping
public List findAll(){
return repository.findAll();
}
WebFlux
MVC

22. Controller: WebFlux x MVC
@GetMapping(“{id}")
public Mono<ResponseEntity<Product!>> getById(@PathVariable String id) {
return repository.findById(id)
.map(product !-> ResponseEntity.ok(product))
.defaultIfEmpty(ResponseEntity.notFound().build());
}
@GetMapping(path = {"{id}"})
public ResponseEntity<Contact> findById(@PathVariable("id") long id){
return repository.findById(id)
.map(record !-> ResponseEntity.ok().body(record))
.orElse(ResponseEntity.notFound().build());
}
WebFlux
MVC

23. Real World
List<Order> getOrders(int customerId)
List<Product> getProducts(Order order)
ShippingStatus getShippingStatus(Order o, Product p)
getOrdersAsync(1) !// Flux<Order>
.flatMap(o !-> getProductsAsync(o) !// Flux<Product>
.flatMap(p !-> getShippingStatusAsync(o, p))
);

24. Backpressure

25. Streams
Source: https://jakearchibald.com/2016/streams-ftw/

26. Streams
NJSON
Newline delimited JSON

27. Backpressure
@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<Order> streamOrderStatus() {
return repository.findAll().delayElements(Duration.ofSeconds(7));
}

29. Reactive Angular
•HGp
•Router
•Guards
•Forms

30. Observable
Observable ObserverOperators
Data Source Tranforms Data Consumer
Observable emits async values and notifies observers

31. Angular Http + Spring
load() {
return this.http.get<Contact[]>(this.API)
.pipe(
take(1),
tap(data !=> this.contactsCache = data)
);
}
create(record: Contact) {
return this.http.post<Contact>(this.API, record).pipe(take(1));
}
update(record: Contact) {
return this.http.put<Contact>(`${this.API}/${record.id}`, record).pipe(take(1));
}
remove(id: number) {
return this.http.delete<Contact>(`${this.API}/${id}`).pipe(take(1));
}

32. Backpressure with RxJS
observeMessages(url: string): Observable<any> {
return new Observable<any>(obs !=> {
const es = new EventSource(url);
es.addEventListener('message', (evt: any) !=> {
console.log(evt.data);
obs.next(evt.data !!= null ? JSON.parse(evt.data) : evt.data);
});
return () !=> es.close();
});
}

33. 1
2
3
4
5
State Management

34. Component initiates the change

35. State
With Redux

36. Store
Redux Store
Action
dispatch
subscribe

37. https://github.com/ngrx

38. Async Data Flow
Reducer
dispatch
Store
subscribe
Request action
Action
executes Reducer
State
Updated View
Returns new state
Component

40. Only MongoDB?

41. Challenges

42. hGps://github.com/loiane/
reac*ve-spring-angular

43. References
• hGps://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/web-
reac*ve.pdf
• hGps://docs.spring.io/spring/docs/current/spring-framework-reference/web-
reac*ve.html
• hGp://www.reac*ve-streams.org/
• hGps://github.com/ngrx/plaNorm
• hGps://blog.nrwl.io/ngrx-paGerns-and-techniques-f46126e2b1e5

44. Thank you!
@loiane
github.com/loiane
loiane.com
youtube.com/loianegroner