Presented at Oracle Code One at Oct 24 - San Francisco

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

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

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

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

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

30. 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));
}

31. 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();
});
}

32. 1
2
3
4
5
State Management

33. Component initiates the change

34. State
With Redux

35. Store
Redux Store
Action
dispatch
subscribe

36. https://github.com/ngrx

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

39. Challenges

40. Thank you!
@loiane
github.com/loiane
loiane.com
loiane.training
youtube.com/loianegroner

41. 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/plaOorm
• hGps://blog.nrwl.io/ngrx-paGerns-and-techniques-f46126e2b1e5

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

43. Experts in Modern Development
• Cloud
• Microservices and Containers
• Java, JavaScript/Node.js, PHP, Python
• DevOps
developer.oracle.com/ambassador @groundbreakers
• Continuous Delivery
• Open Source Technologies
• SQL/NoSQL Databases
• Machine Learning, AI, Chatbots