Submit Search
Upload
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
•
3 likes
•
1,067 views
Loiane Groner
Follow
Presented at Oracle Code One at Oct 24 - San Francisco
Read less
Read more
Technology
Report
Share
Report
Share
1 of 43
Download now
Download to read offline
Recommended
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Loiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Loiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Loiane Groner
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
Loiane Groner
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
Serverless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applications
Loiane Groner
Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRx
Loiane Groner
JavaOne 2013: Java 8 - The Good Parts
JavaOne 2013: Java 8 - The Good Parts
Konrad Malawski
Recommended
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Loiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Loiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Loiane Groner
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
Loiane Groner
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
Serverless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applications
Loiane Groner
Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRx
Loiane Groner
JavaOne 2013: Java 8 - The Good Parts
JavaOne 2013: Java 8 - The Good Parts
Konrad Malawski
Presente e Futuro: Java EE.next()
Presente e Futuro: Java EE.next()
Bruno Borges
Retrofit
Retrofit
bresiu
React table tutorial use filter (part 2)
React table tutorial use filter (part 2)
Katy Slemon
Retrofit library for android
Retrofit library for android
InnovationM
Reactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-Java
Kasun Indrasiri
Apollo. The client we deserve
Apollo. The client we deserve
Yuri Nezdemkovski
Functional UIs with Java 8 and Vaadin JavaOne2014
Functional UIs with Java 8 and Vaadin JavaOne2014
hezamu
Retrofit
Retrofit
Amin Cheloh
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
Fabio Biondi
Reactive Java (33rd Degree)
Reactive Java (33rd Degree)
Tomasz Kowalczewski
Android Libs - Retrofit
Android Libs - Retrofit
Daniel Costa Gimenes
Introduction to Retrofit and RxJava
Introduction to Retrofit and RxJava
Fabio Collini
Azure Durable Functions
Azure Durable Functions
Karthikeyan VK
Reactive Thinking in Java
Reactive Thinking in Java
Yakov Fain
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
Jalpesh Vadgama
Angular mix chrisnoring
Angular mix chrisnoring
Christoffer Noring
rx-java-presentation
rx-java-presentation
Mateusz Bukowicz
Introducing spring
Introducing spring
Ernesto Hernández Rodríguez
Building Scalable Stateless Applications with RxJava
Building Scalable Stateless Applications with RxJava
Rick Warren
Intro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich Android
Egor Andreevich
Reactive for the Impatient - Mary Grygleski
Reactive for the Impatient - Mary Grygleski
PolyglotMeetups
Arquitecturas de microservicios - Medianet Software
Arquitecturas de microservicios - Medianet Software
Ernesto Hernández Rodríguez
More Related Content
What's hot
Presente e Futuro: Java EE.next()
Presente e Futuro: Java EE.next()
Bruno Borges
Retrofit
Retrofit
bresiu
React table tutorial use filter (part 2)
React table tutorial use filter (part 2)
Katy Slemon
Retrofit library for android
Retrofit library for android
InnovationM
Reactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-Java
Kasun Indrasiri
Apollo. The client we deserve
Apollo. The client we deserve
Yuri Nezdemkovski
Functional UIs with Java 8 and Vaadin JavaOne2014
Functional UIs with Java 8 and Vaadin JavaOne2014
hezamu
Retrofit
Retrofit
Amin Cheloh
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
Fabio Biondi
Reactive Java (33rd Degree)
Reactive Java (33rd Degree)
Tomasz Kowalczewski
Android Libs - Retrofit
Android Libs - Retrofit
Daniel Costa Gimenes
Introduction to Retrofit and RxJava
Introduction to Retrofit and RxJava
Fabio Collini
Azure Durable Functions
Azure Durable Functions
Karthikeyan VK
Reactive Thinking in Java
Reactive Thinking in Java
Yakov Fain
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
Jalpesh Vadgama
Angular mix chrisnoring
Angular mix chrisnoring
Christoffer Noring
rx-java-presentation
rx-java-presentation
Mateusz Bukowicz
Introducing spring
Introducing spring
Ernesto Hernández Rodríguez
Building Scalable Stateless Applications with RxJava
Building Scalable Stateless Applications with RxJava
Rick Warren
Intro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich Android
Egor Andreevich
What's hot
(20)
Presente e Futuro: Java EE.next()
Presente e Futuro: Java EE.next()
Retrofit
Retrofit
React table tutorial use filter (part 2)
React table tutorial use filter (part 2)
Retrofit library for android
Retrofit library for android
Reactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-Java
Apollo. The client we deserve
Apollo. The client we deserve
Functional UIs with Java 8 and Vaadin JavaOne2014
Functional UIs with Java 8 and Vaadin JavaOne2014
Retrofit
Retrofit
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
Reactive Java (33rd Degree)
Reactive Java (33rd Degree)
Android Libs - Retrofit
Android Libs - Retrofit
Introduction to Retrofit and RxJava
Introduction to Retrofit and RxJava
Azure Durable Functions
Azure Durable Functions
Reactive Thinking in Java
Reactive Thinking in Java
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
Angular mix chrisnoring
Angular mix chrisnoring
rx-java-presentation
rx-java-presentation
Introducing spring
Introducing spring
Building Scalable Stateless Applications with RxJava
Building Scalable Stateless Applications with RxJava
Intro to RxJava/RxAndroid - GDG Munich Android
Intro to RxJava/RxAndroid - GDG Munich Android
Similar to Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Reactive for the Impatient - Mary Grygleski
Reactive for the Impatient - Mary Grygleski
PolyglotMeetups
Arquitecturas de microservicios - Medianet Software
Arquitecturas de microservicios - Medianet Software
Ernesto Hernández Rodríguez
Spring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. REST
Sam Brannen
AppSyncをReactで使ってみた
AppSyncをReactで使ってみた
Takahiro Kobaru
ASP.NET MVC Internals
ASP.NET MVC Internals
Vitaly Baum
A portlet-API based approach for application integration
A portlet-API based approach for application integration
whabicht
Universal JS Applications with React
Universal JS Applications with React
Thanh Trần Trọng
Java Libraries You Can’t Afford to Miss
Java Libraries You Can’t Afford to Miss
Andres Almiray
Android development
Android development
Gregoire BARRET
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
Toshiaki Maki
The Reactive Rollercoaster
The Reactive Rollercoaster
Bol.com Techlab
ASP .net MVC
ASP .net MVC
Divya Sharma
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
Fioriela Bego
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
Commit Software Sh.p.k.
React js
React js
Oswald Campesato
Introduction to R2DBC
Introduction to R2DBC
Rob Hedgpeth
Spring Web MVC
Spring Web MVC
zeeshanhanif
Why reactive:reactive programming spring 5
Why reactive:reactive programming spring 5
dnnddane
Redux Universal
Redux Universal
Nikolaus Graf
Reactive Functional Programming with Java 8 on Android N
Reactive Functional Programming with Java 8 on Android N
Shipeng Xu
Similar to Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
(20)
Reactive for the Impatient - Mary Grygleski
Reactive for the Impatient - Mary Grygleski
Arquitecturas de microservicios - Medianet Software
Arquitecturas de microservicios - Medianet Software
Spring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. REST
AppSyncをReactで使ってみた
AppSyncをReactで使ってみた
ASP.NET MVC Internals
ASP.NET MVC Internals
A portlet-API based approach for application integration
A portlet-API based approach for application integration
Universal JS Applications with React
Universal JS Applications with React
Java Libraries You Can’t Afford to Miss
Java Libraries You Can’t Afford to Miss
Android development
Android development
Introduction to Spring WebFlux #jsug #sf_a1
Introduction to Spring WebFlux #jsug #sf_a1
The Reactive Rollercoaster
The Reactive Rollercoaster
ASP .net MVC
ASP .net MVC
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
React js
React js
Introduction to R2DBC
Introduction to R2DBC
Spring Web MVC
Spring Web MVC
Why reactive:reactive programming spring 5
Why reactive:reactive programming spring 5
Redux Universal
Redux Universal
Reactive Functional Programming with Java 8 on Android N
Reactive Functional Programming with Java 8 on Android N
Recently uploaded
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Padma Pradeep
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
ngoud9212
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
carlostorres15106
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
MarianaLemus7
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
Neo4j
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
Recently uploaded
(20)
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
1.
Full-Stack Reactive with Spring WebFlux + Angular @loiane loiane.com
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.
Tech Stack
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.
6.
7.
8.
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
9.
10.
Reactive Applications Publisher SubscriberStream
11.
Spring 5 https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html
12.
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); }
13.
One Object
14.
Multiple Objects
15.
16.
Oracle Cloud
17.
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; }
18.
Repository public interface ProductRepository extends
ReactiveMongoRepository<Product, String> { }
19.
Controller @RestController @RequestMapping("/api/products") public class ProductController
{ private ProductRepository repository; public ProductController(ProductRepository repository) { this.repository = repository; } }
20.
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()); }
21.
Controller: WebFlux x
MVC @GetMapping public Flux<Product> getAll() { return repository.findAll(); } @GetMapping public List findAll(){ return repository.findAll(); } WebFlux MVC
22.
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
23.
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)) );
24.
Backpressure
25.
Streams
26.
Backpressure @GetMapping(value = "/stream",
produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Order> streamOrderStatus() { return repository.findAll().delayElements(Duration.ofSeconds(7)); }
27.
28.
Reactive Angular •HGp •Router •Guards •Forms
29.
Observable Observable ObserverOperators Data Source
Tranforms Data Consumer Observable emits async values and notifies observers
30.
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)); }
31.
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(); }); }
32.
1 2 3 4 5 State Management
33.
Component initiates the
change
34.
State With Redux
35.
Store Redux Store Action dispatch subscribe
36.
https://github.com/ngrx
37.
Async Data Flow Reducer dispatch Store subscribe Request
action Action executes Reducer State Updated View Returns new state Component
38.
39.
Challenges
40.
Thank you! @loiane github.com/loiane loiane.com loiane.training youtube.com/loianegroner
41.
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
42.
hGps://github.com/loiane/ codeone-2018-reac*ve-spring-angular
43.
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
Download now