Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl

152 Aufrufe

Veröffentlicht am

Palestra aprensentada no meetup do Devs Java Girl em São Paulo em 28 Nov 2019

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl

  1. 1. loiane.com @loiane Full-Stack Reativa com Spring WebFlux + Angular
  2. 2. Agenda •Pq rea(vo? •Rea(vo x MVC •Back-end rea(vo com Spring WebFlux •Front-end rea(vo com with Angular •Gerenciamento de estado com NgRx e RxJS •Demo @loiane
  3. 3. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Analista Negócios | Engenheira @ Citibank US
  4. 4. Tech Stack @loiane
  5. 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. 6. @loiane
  7. 7. @loiane
  8. 8. @loiane
  9. 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. 10. @loiane
  11. 11. Aplicações Reativas Publisher SubscriberStream @loiane
  12. 12. Spring 5 https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html @loiane
  13. 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
  14. 14. Um Objeto @loiane
  15. 15. Vários Objetos @loiane
  16. 16. @loiane
  17. 17. Oracle Cloud @loiane
  18. 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. 19. Repository public interface ProductRepository extends ReactiveMongoRepository<Product, String> { } @loiane
  20. 20. Controller @RestController @RequestMapping("/api/products") public class ProductController { private ProductRepository repository; public ProductController(ProductRepository repository) { this.repository = repository; } } @loiane
  21. 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. 22. Controller: WebFlux x MVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC @loiane
  23. 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. 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
  25. 25. Backpressure @loiane
  26. 26. Streams Source: https://jakearchibald.com/2016/streams-ftw/ @loiane
  27. 27. Streams NJSON Newline delimited JSON @loiane
  28. 28. Backpressure @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); } @loiane
  29. 29. Angular Reativo •HKp •Router •Guards •Forms @loiane
  30. 30. Observable Observable ObserverOperadores Data Source Fonte Transforma os dados Consumer Consumidor Observable emite valores assíncronos e notifica observers @loiane
  31. 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)); } @loiane
  32. 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(); }); } @loiane
  33. 33. https://github.com/ngrx @loiane
  34. 34. 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
  35. 35. Componente inicia a mudança @loiane
  36. 36. estado Com Redux @loiane
  37. 37. Store Redux Store Action dispatch subscribe @loiane
  38. 38. @loiane
  39. 39. Apenas MongoDB? @loiane
  40. 40. Desafios @loiane
  41. 41. hKps://github.com/loiane/ reac(ve-spring-angular @loiane
  42. 42. 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
  43. 43. Obrigada! @loiane github.com/loiane loiane.com youtube.com/loianegroner

×