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 Reactive with Spring WebFlux + Angular - JConf Colombia 2019

1.077 Aufrufe

Veröffentlicht am

Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019

Veröffentlicht in: Technologie
  • Login to see the comments

Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019

  1. 1. @loiane loiane.com Full-Stack Reactive with Spring WebFlux + Angular
  2. 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. 3. Tech Stack
  4. 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
  5. 5. 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
  6. 6. Reactive Applications Publisher SubscriberStream
  7. 7. Spring 5 https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html
  8. 8. 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); }
  9. 9. One Object
  10. 10. Multiple Objects
  11. 11. Oracle Cloud
  12. 12. 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; }
  13. 13. Repository public interface ProductRepository extends ReactiveMongoRepository<Product, String> { }
  14. 14. Controller @RestController @RequestMapping("/api/products") public class ProductController { private ProductRepository repository; public ProductController(ProductRepository repository) { this.repository = repository; } }
  15. 15. 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()); }
  16. 16. Controller: WebFlux x MVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC
  17. 17. 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
  18. 18. 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))     );
  19. 19. Backpressure
  20. 20. Streams Source: https://jakearchibald.com/2016/streams-ftw/
  21. 21. Streams NJSON Newline delimited JSON
  22. 22. Backpressure @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); }
  23. 23. Reactive Angular •HGp •Router •Guards •Forms
  24. 24. Observable Observable ObserverOperators Data Source Tranforms Data Consumer Observable emits async values and notifies observers
  25. 25. 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)); }
  26. 26. 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(); }); }
  27. 27. 1 2 3 4 5 State Management
  28. 28. Component initiates the change
  29. 29. State With Redux
  30. 30. Store Redux Store Action dispatch subscribe
  31. 31. https://github.com/ngrx
  32. 32. Async Data Flow Reducer dispatch Store subscribe Request action Action executes Reducer State Updated View Returns new state Component
  33. 33. Only MongoDB?
  34. 34. Challenges
  35. 35. hGps://github.com/loiane/ reac*ve-spring-angular
  36. 36. 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/plaNorm • hGps://blog.nrwl.io/ngrx-paGerns-and-techniques-f46126e2b1e5
  37. 37. Thank you! @loiane github.com/loiane loiane.com youtube.com/loianegroner

×