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
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
Sujit Pal
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Recently uploaded
(20)
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Slack Application Development 101 Slides
Slack Application Development 101 Slides
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