Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ANGULAR&RXJS
FABIOBIONDI.io
SEP2018
fabiobiondi.io
TRAINING AND MENTORING
ANGULAR JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI

(jobs / collaborations / training and more)
FACEBOOK GROUPS
d...
RXJS-6-INTRO
interval(value)
returns an observable sequence that produces a
value after each period.
map(fn)
transform the items emitted by an Observable by
applying a function to each item
<fb-clock>
ANGULAR & RXJS
You don't need subscribe(fn)
{{myObs$ | async}}
the async Angular pipe “I” 

automatically subscribes an observer
<fb-clock>
WHERE CAN YOU USE RXJS IN ANGULAR?
ALMOST EVERYWHERE!

In components, directives, pipes, services,
XHR, router, guards, in...
ASync Pipes
{{'Milano' | temperature | async }} 

// output: 20°
Router EVENTS
FILTER Router EVENTS
Reactive FORMSTemplate-driven FORMS
RxJS operators used in forms
Create Component at Runtime
HttpClient
HttpClient & map(fn)
Leanne Graham (Sincere@april.biz)
Transform HTTP response
forkJoin(array)
Combine Multiple HTTP requests
When all observables complete, 

emit the last emitted value from each.
switchMap
Map to observable, complete previous inner observable, 

emit values.
!
NESTED XHR with switchMap(fn)
Solution
Sequential HTTP requests
exhaustMap(array)
Abort new HTTP requests until the previous one has been completed
Services
UserService: fetch data View: request and use data
perform actions or side-effects, such as logging.
tap(fn)
“Debug” and side effects with tap()
AUTHENTICATION
A value that changes over time
BehaviorSubject
Store authentication token
UI: SignInComponent
SignIn by using LoginService
LoginService
Invoke login REST Service and save token
SECURITY
*ifLogged Structural Directive
Render DOM if user is logged
Usage
AuthGuard
Disable route access if user is not logged
Usage
HTTP Interceptors
Inject token to each XHR and handle errors
NGRX (Redux)
NGRX Store
! Too many 

subscriptions
*ngIf…as
Only one 

subscription
NGRX Effects
DATA MANIPULATION
7: telly.hoeger@billy.biz
8: sherwood@rosamond.me
9: chaim_mcdermott@dana.io
10: rey.padberg@karina.bizt
FILTER ARRAY with...
X
FILTER ARRAY WITH RXJS (1/3) 

Wrong Way
FILTER ARRAY WITH RXJS (2/3): 

flatten in single emissions
Get user ID > 6
!
Too many. I just need one!
we only need to emit one value (3/3)
Get user ID > 6 and email lowercase
scan & reduce
scan(fn)
applies an accumulator function over an observable
sequence and returns each intermediate result
reduce(fn)
apply a function to each item emitted by an
Observable, sequentially, and emit the final value
scan
!
Too many. 

I just need one!
Display the total of likes
Given an array
Display the total of likes
scan
Display the total of likes
Given an array
Display the total of likes
Yo! :)
REAL-WORLD-EXAMPLES with
scan(fn)
<Clock> Picker
<ImageGallery>
A simple carousel with timer and NEXT / PREV buttons
!
!
<ImageGallery>
Enhanced version: get Token, HTTP requests and completely “pure”
ANGULAR JAVASCRIPT REACT
OPPORTUNITÀ per DEVELOPER ITALIANI

(jobs / collaborations / training and more)
FACEBOOK GROUPS
d...
fabiobiondi.io
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
Nächste SlideShare
Wird geladen in …5
×

Angular & RXJS: examples and use cases

1.426 Aufrufe

Veröffentlicht am

Examples and use cases about Angular & RxJS

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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

×