Talk Slides at Voxxed Days Frontend, Bucharest 2019. Abstract: You send a request, then you wait for the response. And so it begins… After you get back A, you request B, then C, but only after you also receive D and the user clicks ”OK” in a modal dialog. Sounds familiar? So you know the pain! Asynchronism is probably the most difficult mental leap Single-Page Apps forced us to take, especially if you want to write clean, maintainable code. Join this live-coding session to see us refactoring TypeScript code from callback-hell to promises and then Observables, pair programming and discussing lots of best practices we established for our projects at IBM. As we go, we will intentionally avoid any framework-specific intelligence: there will be a minimal Angular7 app, but our focus will remain on paradigms and principles. And at the end, we also prepared a tiny surprise for you: a way to avoid your client/server data structures to ever go out of sync again.

1. Refactoring
from Callback Hell
to Observables
In TypeScript + Angular Marian Stanciu
Victor Rentea

2. 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:

3. 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

4. Marian Stanciu
Internal Mentor/Coach
Technical Lead
Full-Stack Developer
stanciumariansmm@gmail.com

5. @VictorRentea @StanciuMarianM15
JavaScript is Single Threaded
Callbacks
Background Tasks
REST calls at a SPA
+
=
Avoids race conditions
V

6. @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. 7

8. @VictorRentea @StanciuMarianM18
looking back

9. @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

10. @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

11. @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

12. @VictorRentea @StanciuMarianM112
Swagger Generated TypeScript
…
M

13. @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

14. @VictorRentea @StanciuMarianM114
Questions?
Multi-Task Elegantly
on 1 Thread!
Trainings: VictorRentea.ro / victor.rentea@gmail.com
Posting daily on:Join us!
@IBM