Refactoring Asynchronous TypeScript Code
2 likes673 views
The document discusses the transition from callback hell to observables in TypeScript and Angular, emphasizing clean coding practices and effective use of asynchronous programming. It highlights the importance of structuring APIs, utilizing RxJS observables, and employing best practices for error handling and code organization. The author, Victor Rentea, shares insights on maintaining code simplicity and efficiency while managing asynchronous operations.
Refactoring Asynchronous TypeScript Code
- 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 [email protected] 30 companies Posting daily on
- 4. Marian Stanciu Internal Mentor/Coach Technical Lead Full-Stack Developer [email protected]
- 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
- 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 / [email protected] Posting daily on:Join us! @IBM