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 - FiqueEmCasaConf

592 Aufrufe

Veröffentlicht am

Palestra aprensentada no FiqueEmCasaConf para o canal LinuxTips em 2 de Abril 2020

Veröffentlicht in: Technologie

Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf

  1. 1. Full-Stack Reativa com Spring WebFlux + Angular loiane.com @loiane
  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 Software Engineer
  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 MVC https://howtodoinjava.com/spring-webflux/spring-webflux-tutorial/ @loiane
  14. 14. Spring WebFlux https://howtodoinjava.com/spring-webflux/spring-webflux-tutorial/ @loiane
  15. 15. 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. 16. Um Objeto @loiane
  17. 17. Vários Objetos @loiane
  18. 18. @loiane
  19. 19. Oracle Cloud @loiane
  20. 20. 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
  21. 21. Repository public interface ProductRepository extends ReactiveMongoRepository<Product, String> { } @loiane
  22. 22. Controller @RestController @RequestMapping("/api/products") public class ProductController { private ProductRepository repository; public ProductController(ProductRepository repository) { this.repository = repository; } } @loiane
  23. 23. 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
  24. 24. Controller: WebFlux x MVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC @loiane
  25. 25. 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
  26. 26. 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. 27. Backpressure @loiane
  28. 28. Streams Source: https://jakearchibald.com/2016/streams-ftw/ @loiane
  29. 29. Streams NJSON Newline delimited JSON @loiane
  30. 30. Backpressure @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); } @loiane
  31. 31. Angular Reativo •HKp •Router •Guards •Forms @loiane
  32. 32. Observable Observable ObserverOperadores Data Source Fonte Transforma os dados Consumer Consumidor Observable emite valores assíncronos e notifica observers @loiane
  33. 33. 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
  34. 34. 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. 35. https://github.com/ngrx @loiane
  36. 36. 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
  37. 37. Componente inicia a mudança @loiane
  38. 38. estado Com Redux @loiane
  39. 39. Store Redux Store Action dispatch subscribe @loiane
  40. 40. @loiane
  41. 41. Apenas MongoDB? @loiane
  42. 42. Desafios @loiane
  43. 43. hKps://github.com/loiane/reac(ve-spring-angular @loiane
  44. 44. 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
  45. 45. Obrigada! @loiane github.com/loiane loiane.com youtube.com/loianegroner

×