FullStack Reativo com Spring WebFlux + Angular

FullStack Reativo
com Spring WebFlux
+ Angular
Loiane Groner
@loiane

Agenda
Pq reativo
Webﬂux x MVC
Back-end Reativo com Spring WebFlux
Front-end Reativo com Angular
Demo
@loiane

Arquitetura Full-Stack Reativa
@loiane
Observer
Component
RxJS
Observable
Event
Source
Spring
WebFlux
RestController
Reactive
Repository
MongoDB
Products Collection
App Spring Boot
App Angular
Service

Programação Reativa
@loiane
Streams Streams Streams Streams Streams Streams Streams Streams Streams

Aplicações Reativas
@loiane
Publisher SubscriberStream

Spring 5
@loianehttps://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html

Blocking request processing
@loiane

Suporte à programação reativa no Spring 5
@loiane

Processamento de requisições não-bloqueantes
@loiane

Spring Data
@loiane
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);
}

Coleção de Objetos: Flux
@loiane

Aplicação Reativa rodando no Oracle Cloud
@loiane

Model
@loiane
@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;
}

Repository
@loiane
public interface ProductRepository
extends ReactiveMongoRepository<Product, String> {
}

Controller
@loiane
@RestController
@RequestMapping("/api/products")
public class ProductController {
private final ProductRepository repository;
public ProductController(ProductRepository repository) {
this.repository = repository;
}
}

Controller: Mapeamentos Get
@loiane
@GetMapping
public Flux<Product> getAll() {
return repository.findAll();
}
@GetMapping("{id}")
public Mono<ResponseEntity<Product>> getById(@PathVariable String id) {
return repository.findById(id)
.map(ResponseEntity::ok)
.defaultIfEmpty(ResponseEntity.notFound().build());
}

Controller: WebFlux x MVC
@loiane
@GetMapping
public Flux<Product> getAll() {
}
@GetMapping
public List<Product> getAll() {
}
WebFlux
MVC

Controller: WebFlux x MVC
@loiane
@GetMapping("{id}")
public Mono<ResponseEntity<Product>> getById(@PathVariable String id) {
.map(ResponseEntity::ok)
.defaultIfEmpty(ResponseEntity.notFound().build());
}
@GetMapping("{id}")
public ResponseEntity<Product> findById(@PathVariable long id){
.map(record -> ResponseEntity.ok().body(record))
.orElse(ResponseEntity.notFound().build());
}
WebFlux
MVC

Streams
@loianeSource: https://jakearchibald.com/2016/streams-ftw/

Cenário Real
@loiane
// obtém dados do usuário
Mono<Map<String, Object>> dataToFrontEnd =
userRespository.findById(userId).flatMap(user -> {
// obtém catálago pessoal + detalhes
Mono<Map<String, Object>> catalog = getPersonalCatalog(user)
.flatMap(catalogList -> {
catalogList.getVideos()
.flatMap(video -> {
Flux<Bookmark> bookmark = getBookmark(video); // chamadas não bloqueantes
Flux<Rating> rating = getRating(video); // chamadas não bloqueantes
Flux<VideoMetadata> metadata = getMetadata(video); // chamadas não bloqueantes
return Flux.zip(bookmark, rating, metadata,
(b, r, m) -> combineVideoData(video, b, r, m));
});
});
// obtém outros dados pessoais
Mono<Map<String, Object>> social = getSocialData(user)
.map(socialData -> socialData.getDataAsMap());
return Mono.merge(catalog, social);
});

Streams
@loiane
NJSON
Newline delimited JSON

Stream / SSE - Server Side Events
@loiane
@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<Order> streamOrderStatus() {
return repository.findAll().delayElements(Duration.ofSeconds(7));
}

Eventos Push do Servidor
@loiane
Long Polling (HTTP)
Web Sockets (TCP - comunicação do lado cliente e servidor)
SSE - Server Side Events (HTTP - somente leitura)

FullStack Reativo com Spring WebFlux + Angular

Angular Reativo
Http
Router
Guards (Guarda de Rotas)
Forms
@loiane

Angular Http + Spring
@loiane
load(): Observable<Product[]> {
return this.http.get<Product[]>(this.API);
}
create(record: Product): Observable<Product> {
return this.http.post<Product>(this.API, record);
}
update(record: Product): Observable<Product> {
return this.http.put<Product>(`${this.API}/${record.id}`, record);
}
remove(id: string): Observable<Product> {
return this.http.delete<Product>(`${this.API}/${id}`);
}

Event Source (Consumir SSE - Streams)
@loiane
observeMessages(url: string): Observable<StreamData> {
return new Observable<StreamData>(obs => {
const es = new EventSource(url);
es.addEventListener('message', (evt: StreamData) => {
obs.next(evt.data != null ? JSON.parse(evt.data) : evt.data);
});
return () => es.close();
});
}

Reativo ou MVC?
MVC:
● Aplicação não tem problemas de escalabilidade
● Custo de escalar app horizontalmente está no orçamento
Reativo
● Precisa de concorrência alta + latência variável
● Custo escalar horizontal x vertical é alto
● Várias requisições simultâneas / segundo
@loiane

Links e Referências
@loiane
https://github.com/loiane/reactive-spring-angular
https://docs.spring.io/spring/docs/current/spring-framework-reference/pdf/web-reactive.pdf
https://docs.spring.io/spring/docs/current/spring-framework-reference/web-reactive.html
http://www.reactive-streams.org/

FullStack Reativo com Spring WebFlux + Angular

More Related Content

Similar to FullStack Reativo com Spring WebFlux + Angular (20)

Recently uploaded (20)

FullStack Reativo com Spring WebFlux + Angular