Download as PDF, PPTX
![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)
Uploaded byLoiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
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.
More Related Content
Similar to Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
- 1.
- 2.
- 3. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Analista Negócios| Engenheira @ Citibank US
- 4.
- 5. Arquitetura Full-Stack Data source Event SourceObservable<T[]> Component -> async pipe ngRx Redux Repository Flux<T> Controller | Routes Flux<T> MongoDB Spring WebFlux Angular Reativo @loiane
- 6.
- 7.
- 8.
- 9. Programação Reativa Streams StreamsStreams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams Streams 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.
- 11.
- 12.
- 13. Spring Data public interfaceReactiveMongoRepository<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
- 14.
- 15.
- 16.
- 17.
- 18. Model @NoArgsConstructor @AllArgsConstructor @Data @Document(collection = "products") publicclass 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 extendsReactiveMongoRepository<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 xMVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC @loiane
- 23. Controller: WebFlux xMVC @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(intcustomerId) 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
- 25.
- 26.
- 27.
- 28. Backpressure @GetMapping(value = "/stream",produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); } @loiane
- 30.
- 31. Observable Observable ObserverOperadores Data Source Fonte Transformaos 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
- 34.
- 35. Fluxo de DadosAssí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 amudança @loiane
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 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
- 44.