SlideShare a Scribd company logo
Refactoring
from Callback Hell
to Observables
In TypeScript + Angular Marian Stanciu
Victor Rentea
Victor Rentea
Clean Code Evangelist
VictorRentea.ro
30+ talks, 10+ meetups
Lead Architect at
Software Craftsman
XP: Pair Programming, Clean Code, TDD
Java Champion
Founder of:
Independent
Technical Trainer & Coach
HibernateSpring Java 8
Architecture, DDDDesign Patterns
Clean Code Unit Testing, TDD
Java Performance and much more…Scala
180+ days1300 devs6 years
VictorRentea.rovictor.rentea@gmail.com
30 companies
Posting daily on
Marian Stanciu
Internal Mentor/Coach
Technical Lead
Full-Stack Developer
stanciumariansmm@gmail.com
@VictorRentea @StanciuMarianM15
JavaScript is Single Threaded
Callbacks
Background Tasks
REST calls at a SPA
+
=
Avoids race conditions
V
@VictorRentea @StanciuMarianM16
Get Current User Get All Countries
Get Cities for Country
Preselect User
Country
Get Stores for City
Init
Submit
Validate ReceiptID
Confirm Dialog
Request Coupon
Display Coupon
RESTUSERLegend:SYNC
Coupon Service
V
7
@VictorRentea @StanciuMarianM18
looking back
@VictorRentea @StanciuMarianM19
Controller methods should access fields directly
Prefer local variables instead of fields
Clean Code + TypeScript
Don't subscribe() in subscribe(): Extract methods instead
Learn the Array API: filter, find, map, …
ng
V
@VictorRentea @StanciuMarianM110
Promise Observable
One Async Event Stream of Async Events
Cancellable
rx$q
forkJoinPromise.all
await
UI events:
(But an HTTP request only fires ONCE)
Async
Constructs
< >
V
@VictorRentea @StanciuMarianM111
Keep your API in sync
using swagger
Use types. Never “any” or {}.
Group your fields in data structures.
Then, generate them.
We TypeScript
M
@VictorRentea @StanciuMarianM112
Swagger Generated TypeScript
…
M
@VictorRentea @StanciuMarianM113
async asyncAwait() {
// stuff1
await this.getPromiseA();
// stuff2
let b = await this.getPromiseB();
// stuff3 with b
}
callbackHell() {
// stuff1
this.getPromiseA().then(() => {
// stuff2
this.getPromiseB().then(b => {
// stuff3 with b
});
});
}
promiseChaining() {
// stuff1
this.getPromiseA().then(() => {
// stuff2
return this.getPromiseB();
}).then(b => {
// stuff3 with b
});
}
equivalent to
V
@VictorRentea @StanciuMarianM114
Questions?
Multi-Task Elegantly
on 1 Thread!
Trainings: VictorRentea.ro / victor.rentea@gmail.com
Posting daily on:Join us!
@IBM
Ad

Recommended

Functional Programming Patterns with Java 8 (at Devoxx BE)
Functional Programming Patterns with Java 8 (at Devoxx BE)
Victor Rentea
 
A Tale About the Evil Partial Mock and Separation by Layers of Abstractions
A Tale About the Evil Partial Mock and Separation by Layers of Abstractions
Victor Rentea
 
Clean Lambdas at JBCNConf by Victor Rentea
Clean Lambdas at JBCNConf by Victor Rentea
Victor Rentea
 
Clean Code - The Next Chapter
Clean Code - The Next Chapter
Victor Rentea
 
Refactoring blockers and code smells @jNation 2021
Refactoring blockers and code smells @jNation 2021
Victor Rentea
 
Clean Code
Clean Code
Victor Rentea
 
Functional Patterns with Java8 @Bucharest Java User Group
Functional Patterns with Java8 @Bucharest Java User Group
Victor Rentea
 
Extreme Professionalism - Software Craftsmanship
Extreme Professionalism - Software Craftsmanship
Victor Rentea
 
Top REST API Desgin Pitfalls @ Devoxx 2024
Top REST API Desgin Pitfalls @ Devoxx 2024
Victor Rentea
 
Refactoring Games - 15 things to do after Extract Method
Refactoring Games - 15 things to do after Extract Method
Victor Rentea
 
Software Craftsmanship @Code Camp Festival 2022.pdf
Software Craftsmanship @Code Camp Festival 2022.pdf
Victor Rentea
 
Extreme Professionalism - Software Craftsmanship
Extreme Professionalism - Software Craftsmanship
Victor Rentea
 
Your Bespoke Software Developers.pdf
Your Bespoke Software Developers.pdf
Oceanstart
 
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Victor Rentea
 
Remitano Clone Script
Remitano Clone Script
Monaliza707548
 
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Victor Rentea
 
technetry Broucher.pdf
technetry Broucher.pdf
TechEntry
 
Clean architecture - Protecting the Domain
Clean architecture - Protecting the Domain
Victor Rentea
 
CV_Samiran
CV_Samiran
Samiran Samanta
 
Hibernate and Spring - Unleash the Magic
Hibernate and Spring - Unleash the Magic
Victor Rentea
 
Passei direto 2020
Passei direto 2020
Rodrigo Orofino
 
Blockchain technology-in-fin tech - Anton Sitnikov
Blockchain technology-in-fin tech - Anton Sitnikov
DataFest Tbilisi
 
Clean Pragmatic Architecture - Avoiding a Monolith
Clean Pragmatic Architecture - Avoiding a Monolith
Victor Rentea
 
The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Microservice Resilience Patterns @VoxxedCern'24
Microservice Resilience Patterns @VoxxedCern'24
Victor Rentea
 
Distributed Consistency.pdf
Distributed Consistency.pdf
Victor Rentea
 
Testing Microservices @DevoxxBE 23.pdf
Testing Microservices @DevoxxBE 23.pdf
Victor Rentea
 
From Web to Flux @DevoxxBE 2023.pptx
From Web to Flux @DevoxxBE 2023.pptx
Victor Rentea
 

More Related Content

Similar to Refactoring Asynchronous TypeScript Code (15)

Top REST API Desgin Pitfalls @ Devoxx 2024
Top REST API Desgin Pitfalls @ Devoxx 2024
Victor Rentea
 
Refactoring Games - 15 things to do after Extract Method
Refactoring Games - 15 things to do after Extract Method
Victor Rentea
 
Software Craftsmanship @Code Camp Festival 2022.pdf
Software Craftsmanship @Code Camp Festival 2022.pdf
Victor Rentea
 
Extreme Professionalism - Software Craftsmanship
Extreme Professionalism - Software Craftsmanship
Victor Rentea
 
Your Bespoke Software Developers.pdf
Your Bespoke Software Developers.pdf
Oceanstart
 
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Victor Rentea
 
Remitano Clone Script
Remitano Clone Script
Monaliza707548
 
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Victor Rentea
 
technetry Broucher.pdf
technetry Broucher.pdf
TechEntry
 
Clean architecture - Protecting the Domain
Clean architecture - Protecting the Domain
Victor Rentea
 
CV_Samiran
CV_Samiran
Samiran Samanta
 
Hibernate and Spring - Unleash the Magic
Hibernate and Spring - Unleash the Magic
Victor Rentea
 
Passei direto 2020
Passei direto 2020
Rodrigo Orofino
 
Blockchain technology-in-fin tech - Anton Sitnikov
Blockchain technology-in-fin tech - Anton Sitnikov
DataFest Tbilisi
 
Clean Pragmatic Architecture - Avoiding a Monolith
Clean Pragmatic Architecture - Avoiding a Monolith
Victor Rentea
 
Top REST API Desgin Pitfalls @ Devoxx 2024
Top REST API Desgin Pitfalls @ Devoxx 2024
Victor Rentea
 
Refactoring Games - 15 things to do after Extract Method
Refactoring Games - 15 things to do after Extract Method
Victor Rentea
 
Software Craftsmanship @Code Camp Festival 2022.pdf
Software Craftsmanship @Code Camp Festival 2022.pdf
Victor Rentea
 
Extreme Professionalism - Software Craftsmanship
Extreme Professionalism - Software Craftsmanship
Victor Rentea
 
Your Bespoke Software Developers.pdf
Your Bespoke Software Developers.pdf
Oceanstart
 
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Evolving a Clean, Pragmatic Architecture - A Craftsman's Guide
Victor Rentea
 
Remitano Clone Script
Remitano Clone Script
Monaliza707548
 
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Clean Code @Voxxed Days Cluj 2023 - opening Keynote
Victor Rentea
 
technetry Broucher.pdf
technetry Broucher.pdf
TechEntry
 
Clean architecture - Protecting the Domain
Clean architecture - Protecting the Domain
Victor Rentea
 
Hibernate and Spring - Unleash the Magic
Hibernate and Spring - Unleash the Magic
Victor Rentea
 
Blockchain technology-in-fin tech - Anton Sitnikov
Blockchain technology-in-fin tech - Anton Sitnikov
DataFest Tbilisi
 
Clean Pragmatic Architecture - Avoiding a Monolith
Clean Pragmatic Architecture - Avoiding a Monolith
Victor Rentea
 

More from Victor Rentea (20)

The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Microservice Resilience Patterns @VoxxedCern'24
Microservice Resilience Patterns @VoxxedCern'24
Victor Rentea
 
Distributed Consistency.pdf
Distributed Consistency.pdf
Victor Rentea
 
Testing Microservices @DevoxxBE 23.pdf
Testing Microservices @DevoxxBE 23.pdf
Victor Rentea
 
From Web to Flux @DevoxxBE 2023.pptx
From Web to Flux @DevoxxBE 2023.pptx
Victor Rentea
 
Test-Driven Design Insights@DevoxxBE 2023.pptx
Test-Driven Design Insights@DevoxxBE 2023.pptx
Victor Rentea
 
Profiling your Java Application
Profiling your Java Application
Victor Rentea
 
OAuth in the Wild
OAuth in the Wild
Victor Rentea
 
The tests are trying to tell you [email protected]
The tests are trying to tell you [email protected]
Victor Rentea
 
Vertical Slicing Architectures
Vertical Slicing Architectures
Victor Rentea
 
Unit testing - 9 design hints
Unit testing - 9 design hints
Victor Rentea
 
Clean pragmatic architecture @ devflix
Clean pragmatic architecture @ devflix
Victor Rentea
 
Integration testing with spring @JAX Mainz
Integration testing with spring @JAX Mainz
Victor Rentea
 
The Proxy Fairy and the Magic of Spring @JAX Mainz 2021
The Proxy Fairy and the Magic of Spring @JAX Mainz 2021
Victor Rentea
 
Integration testing with spring @snow one
Integration testing with spring @snow one
Victor Rentea
 
Pure functions and immutable objects @dev nexus 2021
Pure functions and immutable objects @dev nexus 2021
Victor Rentea
 
TDD Mantra
TDD Mantra
Victor Rentea
 
Definitive Guide to Working With Exceptions in Java - takj at Java Champions ...
Definitive Guide to Working With Exceptions in Java - takj at Java Champions ...
Victor Rentea
 
The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
The Joy of Testing - Deep Dive @ Devoxx Belgium 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Microservice Resilience Patterns @VoxxedCern'24
Microservice Resilience Patterns @VoxxedCern'24
Victor Rentea
 
Distributed Consistency.pdf
Distributed Consistency.pdf
Victor Rentea
 
Testing Microservices @DevoxxBE 23.pdf
Testing Microservices @DevoxxBE 23.pdf
Victor Rentea
 
From Web to Flux @DevoxxBE 2023.pptx
From Web to Flux @DevoxxBE 2023.pptx
Victor Rentea
 
Test-Driven Design Insights@DevoxxBE 2023.pptx
Test-Driven Design Insights@DevoxxBE 2023.pptx
Victor Rentea
 
Profiling your Java Application
Profiling your Java Application
Victor Rentea
 
Vertical Slicing Architectures
Vertical Slicing Architectures
Victor Rentea
 
Unit testing - 9 design hints
Unit testing - 9 design hints
Victor Rentea
 
Clean pragmatic architecture @ devflix
Clean pragmatic architecture @ devflix
Victor Rentea
 
Integration testing with spring @JAX Mainz
Integration testing with spring @JAX Mainz
Victor Rentea
 
The Proxy Fairy and the Magic of Spring @JAX Mainz 2021
The Proxy Fairy and the Magic of Spring @JAX Mainz 2021
Victor Rentea
 
Integration testing with spring @snow one
Integration testing with spring @snow one
Victor Rentea
 
Pure functions and immutable objects @dev nexus 2021
Pure functions and immutable objects @dev nexus 2021
Victor Rentea
 
Definitive Guide to Working With Exceptions in Java - takj at Java Champions ...
Definitive Guide to Working With Exceptions in Java - takj at Java Champions ...
Victor Rentea
 
Ad

Recently uploaded (20)

Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
Migrating to Azure Cosmos DB the Right Way
Migrating to Azure Cosmos DB the Right Way
Alexander (Alex) Komyagin
 
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
certivoai
 
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Tech Services
 
What is data visualization and how data visualization tool can help.pptx
What is data visualization and how data visualization tool can help.pptx
Varsha Nayak
 
Making significant Software Architecture decisions
Making significant Software Architecture decisions
Bert Jan Schrijver
 
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdf
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdf
Varsha Nayak
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
How to Choose the Right Web Development Agency.pdf
How to Choose the Right Web Development Agency.pdf
Creative Fosters
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
dp-700 exam questions sample docume .pdf
dp-700 exam questions sample docume .pdf
pravkumarbiz
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
Artificial Intelligence Workloads and Data Center Management
Artificial Intelligence Workloads and Data Center Management
SandeepKS52
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
Who will create the languages of the future?
Who will create the languages of the future?
Jordi Cabot
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Zoneranker’s Digital marketing solutions
Zoneranker’s Digital marketing solutions
reenashriee
 
Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
certivoai
 
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Tech Services
 
What is data visualization and how data visualization tool can help.pptx
What is data visualization and how data visualization tool can help.pptx
Varsha Nayak
 
Making significant Software Architecture decisions
Making significant Software Architecture decisions
Bert Jan Schrijver
 
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdf
Looking for a BIRT Report Alternative Here’s Why Helical Insight Stands Out.pdf
Varsha Nayak
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
How to Choose the Right Web Development Agency.pdf
How to Choose the Right Web Development Agency.pdf
Creative Fosters
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
dp-700 exam questions sample docume .pdf
dp-700 exam questions sample docume .pdf
pravkumarbiz
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
Artificial Intelligence Workloads and Data Center Management
Artificial Intelligence Workloads and Data Center Management
SandeepKS52
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
Who will create the languages of the future?
Who will create the languages of the future?
Jordi Cabot
 
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Automated Migration of ESRI Geodatabases Using XML Control Files and FME
Safe Software
 
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
Enable Your Cloud Journey With Microsoft Trusted Partner | IFI Tech
IFI Techsolutions
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Zoneranker’s Digital marketing solutions
Zoneranker’s Digital marketing solutions
reenashriee
 
Ad

Refactoring Asynchronous TypeScript Code