Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
3 likes239 views
The document discusses building a full-stack reactive application using Spring WebFlux for the backend and Angular for the frontend. It covers using Spring Data to access a MongoDB database reactively, building controllers with Spring WebFlux, and managing state in Angular with NgRx and RxJS. Code examples are provided for defining a reactive model, repository, and controller in Spring as well as making HTTP requests between Angular and Spring reactively.
![Arquitetura Full-Stack
Data source
Event
Source Observable<T[]>
Component ->
async pipe
ngRx
Redux
Repository
Flux<T>
Controller |
Routes
Flux<T>
MongoDB Spring WebFlux Angular Reativo
@loiane](https://image.slidesharecdn.com/devsjavagirl-191130141502/85/Full-Stack-Reativo-com-Spring-WebFlux-Angular-Devs-Java-Girl-5-320.jpg)
![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));
}
@loiane](https://image.slidesharecdn.com/devsjavagirl-191130141502/85/Full-Stack-Reativo-com-Spring-WebFlux-Angular-Devs-Java-Girl-32-320.jpg)
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
- 3. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Analista Negócios | Engenheira @ Citibank US
- 5. Arquitetura Full-Stack Data source Event Source Observable<T[]> Component -> async pipe ngRx Redux Repository Flux<T> Controller | Routes Flux<T> MongoDB Spring WebFlux Angular Reativo @loiane
- 6. @loiane
- 7. @loiane
- 8. @loiane
- 9. Programação Reativa 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 @loiane
- 10. @loiane
- 13. 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); } @loiane
- 16. @loiane
- 18. 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; } @loiane
- 19. Repository public interface ProductRepository extends ReactiveMongoRepository<Product, String> { } @loiane
- 20. Controller @RestController @RequestMapping("/api/products") public class ProductController { private ProductRepository repository; public ProductController(ProductRepository repository) { this.repository = repository; } } @loiane
- 21. 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()); } @loiane
- 22. Controller: WebFlux x MVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC @loiane
- 23. 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 @loiane
- 24. Mundo Real 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)) ); @loiane
- 27. Streams NJSON Newline delimited JSON @loiane
- 28. Backpressure @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); } @loiane
- 31. Observable Observable ObserverOperadores Data Source Fonte Transforma os dados Consumer Consumidor Observable emite valores assíncronos e notifica observers @loiane
- 32. 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)); } @loiane
- 33. 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(); }); } @loiane
- 35. Fluxo de Dados Assíncrono Reducer dispatch Store subscribe Requisita Ação Action Executa o Reducer Estado Atualiza a View Retorna um novo Estado Component @loiane
- 36. Componente inicia a mudança @loiane
- 39. @loiane
- 41. Desafios @loiane
- 43. Referências • hKps://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/web- reac(ve.pdf • hKps://docs.spring.io/spring/docs/current/spring-framework-reference/web- reac(ve.html • hKp://www.reac(ve-streams.org/ • hKps://github.com/ngrx/plaPorm • hKps://blog.nrwl.io/ngrx-paKerns-and-techniques-f46126e2b1e5 @loiane