RxJS: A Beginner & Expert's Perspective - ng-conf 2017
•
22 likes•5,316 views
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to RxJS: A Beginner & Expert's Perspective - ng-conf 2017
Similar to RxJS: A Beginner & Expert's Perspective - ng-conf 2017 (20)
More from Tracy Lee
More from Tracy Lee (16)
Recently uploaded
Recently uploaded (20)
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
- 1. RxJS A Beginner & Expert’s Perspective
- 4. Learning RxJS Be Like... Couldn’t find the right docs! @benlesh | @ladyleet
- 5. What do these operators even do? Learning RxJS Be Like... @benlesh | @ladyleet
- 6. How do I wrap APIs in Observables? Learning RxJS Be Like... @benlesh | @ladyleet
- 7. Oops, I forgot to subscribe. (╯°□°)╯︵ ┻━┻ Learning RxJS Be Like... @benlesh | @ladyleet
- 9. Tracy Lee @ladyleet A Beginner & Expert’s Perspective Ben Lesh @benlesh
- 10. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Google Developer Expert
- 11. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Google Developer Expert Co-Founder This Dot Labs
- 12. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Google Developer Expert Co-Founder This Dot Labs Learned RxJS a few months ago
- 13. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Software Engineer, Google
- 14. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Software Engineer, Google Formerly Netflix
- 15. Tracy Lee @ladyleet Beginner & Expert Ben Lesh @benlesh Software Engineer, Google Formerly Netflix RxJS5+ Lead
- 17. A Beginner & Expert’s Perspective On Learning & Using RxJS - How to create an Observable - Best practices for importing and using RxJS - How to choose operators and find documentation - How to avoid unwanted subscriptions - How to wrap an API - The benefits of “same-shapedness” @benlesh | @ladyleet
- 18. const x = new Observable(observer => { observer.next(‘hi’); observer.complete(); }); @benlesh | @ladyleet Creating a New Observable
- 19. Many other Observable creation methods @benlesh | @ladyleet
- 21. Versions Angular 4.0.1 Angular-CLI 1.0.0 RxJS 5.3.0 Angular Material 2.0.0-beta.2 @benlesh | @ladyleet
- 22. // Add a funny pun about Angular 4 and Angular CLI @benlesh | @ladyleet
- 23. Lookahead Search The Idiomatic RxJS Example @benlesh | @ladyleet
- 24. Add an <input> to your component’s template @benlesh | @ladyleet Getting Observable of text changes from input
- 25. Use Subject as an event handler in input event @benlesh | @ladyleet Getting Observable of text changes from input
- 26. Use a template reference variable to get the text value @benlesh | @ladyleet Getting Observable of text changes from input
- 27. Using the next method to push values through the Observable @benlesh | @ladyleet Getting Observable of text changes from input
- 28. Import Subject from RxJS @benlesh | @ladyleet Getting Observable of text changes from input
- 29. Add the Subject @benlesh | @ladyleet Getting Observable of text changes from your input
- 30. On the subject of Subjects... - Subjects are Observables - Subjects are Observers (with next, error and complete) - Allow us to push values by calling `subject$.next(value)` - Have all operators on them any observable would @benlesh | @ladyleet
- 31. @benlesh | @ladyleet Importing RxJS … this is where a lot of beginners make a mistake
- 32. Beginner Mistake: Importing ALL of RxJS 5 @benlesh | @ladyleet
- 33. Include Just What You Need @benlesh | @ladyleet
- 34. Back to Our Pun App We have an Observable of text input changes - keywordInputChange$ … give us the keywords we might be looking for! @benlesh | @ladyleet
- 35. To Get Our Data, We’ve Created “PunService” @benlesh | @ladyleet
- 36. PunService Uses Http From @angular/http @benlesh | @ladyleet
- 37. Take Observable of Textbox Changes and Get a List of Suggested Keywords @benlesh | @ladyleet
- 38. switchMap Converts the value to a new observable, then switches to that observable (unsubscribing from any previous ones it might have made) @benlesh | @ladyleet
- 39. @benlesh | @ladyleet Operators: Why switchMap?
- 40. @benlesh | @ladyleet Writing Suggested Keywords to the View
- 41. Get List of Puns from List of Keywords @benlesh | @ladyleet
- 42. Displaying Puns @benlesh | @ladyleet
- 43. Subscribing to keyword$ @benlesh | @ladyleet
- 44. Let’s Share keyword$ @benlesh | @ladyleet
- 46. Same Shaped-ness Let’s add another data source! @benlesh | @ladyleet
- 47. Web Speech API https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API @benlesh | @ladyleet
- 48. Wrap an API in an Observable @benlesh | @ladyleet
- 49. Wrap an API in an Observable @benlesh | @ladyleet
- 50. Wrap an API in an Observable @benlesh | @ladyleet
- 51. An Angular Service - Injectable - Actually use all results - Add error handling @benlesh | @ladyleet
- 52. Add Button to Trigger Speech Recognition @benlesh | @ladyleet
- 53. Pump our clicks through a Subject @benlesh | @ladyleet
- 54. Inject SpeechService @benlesh | @ladyleet
- 55. switchMap Clicks into Speech Recognition @benlesh | @ladyleet
- 56. Merge Typed Keyword Suggestions With Spoken Ones @benlesh | @ladyleet
- 57. Same shaped-ness! This works because they’re both Observable<string[]> @benlesh | @ladyleet
- 59. A Beginner & Expert’s Perspective On Learning & Using RxJS - How to create an Observable - Best practices for importing and using RxJS - How to choose operators and find documentation - How to avoid unwanted subscriptions - How to wrap an API - The benefits of “same-shapedness” @benlesh | @ladyleet
- 61. Thank You! @benlesh | @ladyleet