Downloaded 44 times
Uploaded byFabio Biondi
RXJS Best (& Bad) Practices for Angular Developers
The document outlines best and bad practices for using RxJS in Angular applications, emphasizing the importance of naming conventions, unsubscribing from observables, and handling errors. It covers essential concepts such as cold vs hot observables, pure functions, and various RxJS operators, along with tips for effective learning. Additionally, it highlights common mistakes and resources for further study.
In this document
Powered by AI
Introduction to RXJS best and bad practices focusing on naming conventions and concepts.
Highlighting three main bad practices: use of '$' in observable names, subscribing in ngOnInit, and forgetting to unsubscribe.
Demonstrating another method for subscriptions using the async pipe in Angular templates.
Recommendations against passing streams to components and double subscriptions.
Emphasizing the importance of handling errors and introducing the concept of Subjects as Observables.
Importance of using pure functions and limiting logic within Observers.
Best practices for handling arrays using RxJS streams, with an example of Angular HTTP Interceptor.
Illustrating the integration of RxJS in various Angular features like directives, forms, and guards.Focus on NGRX for state management including dispatching actions and relevant effects.
Key RxJS concepts including Cold vs Hot observables, various operators, and their functionality.
Presenting resources and communities for further learning about RxJS and frontend training.
More Related Content
RXJS Best (& Bad) Practices for Angular Developers
- 1.
- 2.
- 3. fabiobiondi.io Google Developer Expert MicrosoftMVP JS Training Community Founder
- 4.
- 5. THERE ARE 3 “BADPRACTICES” HERE
- 6. use “$” inobservable’s names 1
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. fabiobiondi.io Another way tounsubscribe 3b
- 13.
- 14.
- 15.
- 16.
- 18.
- 19. fabiobiondi.io Don’t pass streamsto components
- 21.
- 22.
- 25.
- 26.
- 28.
- 29.
- 31.
- 32.
- 36.
- 37. fabiobiondi.io LIMIT LOGIC INOBSERVERs
- 39.
- 40.
- 43.
- 44. fabiobiondi.io Create a flowof streams (Angular HTTPInterceptor example)
- 45.
- 46.
- 47.
- 48. fabiobiondi.io RxJS is everywhere(in Angular) in directives, forms, router guards/events/props, interceptors, @Output EventEmitters, …
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. NGRX: dispatch multipleactions
- 58.
- 59. fabiobiondi.io Redux Observable forReact actions observable
- 60. fabiobiondi.io Don’t use tap:) it’s just for logs 😱
- 62.
- 63. fabiobiondi.io YOU SHOULD KNOWFOLLOWING CONCEPTS: Cold vs Hot Observables Unicast vs Multicast Outer vs Inner observables Pure Functions & Immutability Think Async Learn how to work with multiple streams
- 64. fabiobiondi.io FUNDAMENTALS OPERATORS YOUSHOULD KNOW creation: transformation: filtering: combination: multicast: & Subjects of, from, fromEvent, interval, … buffer, toArray, groupBy, reduce, map, … switchMap, concatMap, exhaustMap, mergeMap filter, take, first, skip, last, distinct, ***Until, ***While, … zip, withLatestFrom, merge, combineLatest, forkJoin, … publish, refCount, share, multicast Subject, BehaviorSubject, ReplaySubject, AsyncSubjecs
- 65.
- 66.
- 67.
- 68.