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 - Oracle Code One 2018

821 Aufrufe

Veröffentlicht am

Presented at Oracle Code One at Oct 24 - San Francisco

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

Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018

  1. 1. Full-Stack Reactive with Spring WebFlux + Angular @loiane loiane.com
  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
  21. 21. Backpressure @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); }
  22. 22. Reactive Angular •HGp •Router •Guards •Forms
  23. 23. Observable Observable ObserverOperators Data Source Tranforms Data Consumer Observable emits async values and notifies observers
  24. 24. 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)); }
  25. 25. 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(); }); }
  26. 26. 1 2 3 4 5 State Management
  27. 27. Component initiates the change
  28. 28. State With Redux
  29. 29. Store Redux Store Action dispatch subscribe
  30. 30. https://github.com/ngrx
  31. 31. Async Data Flow Reducer dispatch Store subscribe Request action Action executes Reducer State Updated View Returns new state Component
  32. 32. Challenges
  33. 33. Thank you! @loiane github.com/loiane loiane.com loiane.training youtube.com/loianegroner
  34. 34. 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/plaOorm • hGps://blog.nrwl.io/ngrx-paGerns-and-techniques-f46126e2b1e5
  35. 35. hGps://github.com/loiane/ codeone-2018-reac*ve-spring-angular
  36. 36. Experts in Modern Development • Cloud • Microservices and Containers • Java, JavaScript/Node.js, PHP, Python • DevOps developer.oracle.com/ambassador @groundbreakers • Continuous Delivery • Open Source Technologies • SQL/NoSQL Databases • Machine Learning, AI, Chatbots

×