Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular & RXJS: examples and use cases

1.398 visualizaciones

Publicado el

Examples and use cases about Angular & RxJS

Publicado en: Software
  • Sé el primero en comentar

Angular & RXJS: examples and use cases

  1. 1. ANGULAR&RXJS FABIOBIONDI.io SEP2018
  2. 2. fabiobiondi.io TRAINING AND MENTORING
  3. 3. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI
 (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani
  4. 4. RXJS-6-INTRO
  5. 5. interval(value) returns an observable sequence that produces a value after each period.
  6. 6. map(fn) transform the items emitted by an Observable by applying a function to each item
  7. 7. <fb-clock>
  8. 8. ANGULAR & RXJS
  9. 9. You don't need subscribe(fn)
  10. 10. {{myObs$ | async}} the async Angular pipe “I” 
 automatically subscribes an observer
  11. 11. <fb-clock>
  12. 12. WHERE CAN YOU USE RXJS IN ANGULAR? ALMOST EVERYWHERE!
 In components, directives, pipes, services, XHR, router, guards, interceptors ...
  13. 13. ASync Pipes {{'Milano' | temperature | async }} 
 // output: 20°
  14. 14. Router EVENTS
  15. 15. FILTER Router EVENTS
  16. 16. Reactive FORMSTemplate-driven FORMS
  17. 17. RxJS operators used in forms
  18. 18. Create Component at Runtime
  19. 19. HttpClient
  20. 20. HttpClient & map(fn) Leanne Graham (Sincere@april.biz) Transform HTTP response
  21. 21. forkJoin(array) Combine Multiple HTTP requests When all observables complete, 
 emit the last emitted value from each.
  22. 22. switchMap Map to observable, complete previous inner observable, 
 emit values.
  23. 23. ! NESTED XHR with switchMap(fn) Solution Sequential HTTP requests
  24. 24. exhaustMap(array) Abort new HTTP requests until the previous one has been completed
  25. 25. Services UserService: fetch data View: request and use data
  26. 26. perform actions or side-effects, such as logging. tap(fn) “Debug” and side effects with tap()
  27. 27. AUTHENTICATION
  28. 28. A value that changes over time BehaviorSubject Store authentication token
  29. 29. UI: SignInComponent SignIn by using LoginService
  30. 30. LoginService Invoke login REST Service and save token
  31. 31. SECURITY
  32. 32. *ifLogged Structural Directive Render DOM if user is logged Usage
  33. 33. AuthGuard Disable route access if user is not logged Usage
  34. 34. HTTP Interceptors Inject token to each XHR and handle errors
  35. 35. NGRX (Redux)
  36. 36. NGRX Store ! Too many 
 subscriptions
  37. 37. *ngIf…as Only one 
 subscription
  38. 38. NGRX Effects
  39. 39. DATA MANIPULATION
  40. 40. 7: telly.hoeger@billy.biz 8: sherwood@rosamond.me 9: chaim_mcdermott@dana.io 10: rey.padberg@karina.bizt FILTER ARRAY with map: easiest way Get user ID > 6 and email lowercase
  41. 41. X FILTER ARRAY WITH RXJS (1/3) 
 Wrong Way
  42. 42. FILTER ARRAY WITH RXJS (2/3): 
 flatten in single emissions Get user ID > 6 ! Too many. I just need one!
  43. 43. we only need to emit one value (3/3) Get user ID > 6 and email lowercase
  44. 44. scan & reduce
  45. 45. scan(fn) applies an accumulator function over an observable sequence and returns each intermediate result
  46. 46. reduce(fn) apply a function to each item emitted by an Observable, sequentially, and emit the final value
  47. 47. scan ! Too many. 
 I just need one! Display the total of likes Given an array Display the total of likes
  48. 48. scan Display the total of likes Given an array Display the total of likes Yo! :)
  49. 49. REAL-WORLD-EXAMPLES with scan(fn)
  50. 50. <Clock> Picker
  51. 51. <ImageGallery> A simple carousel with timer and NEXT / PREV buttons
  52. 52. ! !
  53. 53. <ImageGallery> Enhanced version: get Token, HTTP requests and completely “pure”
  54. 54. ANGULAR JAVASCRIPT REACT OPPORTUNITÀ per DEVELOPER ITALIANI
 (jobs / collaborations / training and more) FACEBOOK GROUPS developer italianideveloper italianideveloper italiani
  55. 55. fabiobiondi.io

×