RxJS - The Basics & The Future
5 likes1,482 views
The document provides an overview of RxJS, a push-based primitive in JavaScript that focuses on observables and observers for handling asynchronous data. It discusses key concepts, best practices for using RxJS, and the upcoming changes in versions 6 and 7, including improvements in operation efficiency and the introduction of lettable operators. Additionally, it includes practical examples, such as building an Angular application with RxJS for handling user input and integrating APIs.
RxJS - The Basics & The Future
- 1. RxJS The Basics & The Future
- 2. What is ? Push based primitive in JavaScript @ladyleet RxJS
- 3. Push based primitive in JavaScript Ref implementation for TC39 Observable proposal @ladyleet What is ?RxJS
- 4. Push based primitive in JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal @ladyleet What is ?RxJS
- 5. Push based primitive in JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal Only external dependency to Angular (2x) @ladyleet What is ?RxJS
- 6. Push based primitive in JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal Easy to chain together complex interactions @ladyleet Only external dependency to Angular (2x) What is ?RxJS
- 7. @ladyleet RxJS - 2 Major Components Observables & Observers
- 8. @ladyleet RxJS - 2 Major Components Observables & Observers Observables give data and observers receive data
- 9. @ladyleet RxJS - 2 Major Components Observables & Observers Observables are just functions in JavaScript - they don’t do anything until you subscribe to them. Observables give data and observers receive data
- 10. @ladyleet RxJS - 2 Major Components Observables & Observers Observables are just functions in JavaScript - they don’t do anything until you subscribe to them. Observables are always observed by observers Observables give data and observers receive data
- 11. @ladyleet RxJS - 2 Major Components Observables & Observers Observables are just functions in JavaScript - they don’t do anything until you subscribe to them. Observables are always observed by observers Subscribing to an Observable sets up a chain of observation using observers. Observables give data and observers receive data
- 12. Authors Ben Lesh, RxJS5+Matt Podwysocki, RxJS 4 @ladyleet RxJS
- 13. is used in big cos @ladyleet RxJS
- 14. @ladyleet
- 15. Let me tell you an story @ladyleet
- 16. “Ben, teach me RxJS!” @ladyleet
- 18. “RxJS Blah blah blah!” @ladyleet
- 19. “RxJS Blah bl…uh oh…” @ladyleet
- 20. @ladyleet
- 21. Learning RxJS Be Like... Couldn’t find the right docs! @ladyleet
- 22. What do these operators even do? Learning RxJS Be Like... @ladyleet
- 23. How do I wrap APIs in Observables? Learning RxJS Be Like... @ladyleet
- 24. Oops, I forgot to subscribe. (╯°□°)╯︵ ┻━┻ Learning RxJS Be Like... @ladyleet
- 25. @ladyleet Wow, I get it! I love RxJS!
- 26. TRACY LEE | @ladyleet SPEAKER & GOOGLE DEVELOPER EXPERT DEV - ANGULAR, EMBER, REACT, RXJS TECH WRITER & PODCASTER THIS DOT MEDIA / LABS MENTOR
- 27. Learning & Using RxJS • • 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” • What’s coming for RxJS 6 and 7 How to create an Observable @ladyleet
- 28. const x = new (observer => { observer.next(‘hi’); observer.complete(); }); How to create an Observable Observable @ladyleet
- 29. Many other creation methodsObservable Observable.fromEvent Observable.to Observable.from Use the Observable constructor @ladyleet
- 30. Let’s build an app! (It’s a pun app) @ladyleet
- 31. Versions Angular 4.2.5 Angular-CLI 1.2.0 RxJS 5.4.1 Angular Material 2.0.0-beta.7 @ladyleet
- 34. Lookahead Search The Idiomatic RxJS Example @ladyleet
- 35. Add an <input> to your component’s template. Getting Observable of Text Changes from Input @ladyleet
- 36. Use Subject as an event handler in input event. @ladyleet Getting Observable of Text Changes from Input
- 37. Use a template reference variable to get the text value. @ladyleet Getting Observable of Text Changes from Input
- 38. Using the next method to get an Observable of values. @ladyleet Getting Observable of Text Changes from Input
- 39. Import Subject from RxJS @ladyleet Getting Observable of Text Changes from Input
- 40. Add the Subject to your component class @ladyleet Getting Observable of Text Changes from Input
- 41. • 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 @ladyleet On the Subject of Subjects
- 42. Importing RxJS … this is where a lot of people make a mistake. @ladyleet
- 43. MISTAKE: Importing ALL of RxJS @ladyleet
- 44. Include Just What You Need @ladyleet
- 45. Back to Our Pun App We have an Observable of text input changes - keywordInputChange$ … give us the puns we’re looking for! @ladyleet
- 46. To Get Our Data, We’ve Created “PunService” @ladyleet
- 47. PunService Uses Http From @angular/http @ladyleet
- 48. Take Observable of Textbox Changes and Get a List of Suggested Keywords @ladyleet
- 49. switchMap Converts the value to a new Observable, then switches to that Observable (unsubscribing from any previous ones it might have made) @ladyleet
- 51. Writing Suggested Keywords to the View @ladyleet
- 52. Get List of Puns from List of Keywords @ladyleet
- 55. @ladyleet
- 56. Same Shaped-ness Let’s add another data source! @ladyleet
- 58. Wrap an API in an Observable @ladyleet
- 59. Wrap an API in an Observable @ladyleet
- 60. @ladyleet Wrap an API in an Observable
- 61. An Angular Service • Injectable • Actually use all results • Add error handling @ladyleet
- 62. Add Button to Trigger Speech Recognition @ladyleet
- 63. Pump Clicks through a Subject @ladyleet
- 65. switchMap Clicks into Speech Recognition @ladyleet
- 66. Merge Typed Keyword Suggestions With Spoken Ones @ladyleet
- 67. @ladyleet
- 68. Learning & Using RxJS • • 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” • How to create an Observable @ladyleet What’s Next for RxJS 6 & 7?
- 69. What’s Next for RxJS 6 & 7? @ladyleet
- 70. T-Rex => RxJS 6/7 @ladyleet ~30kb => ~3kb (minified, bundled, and gzipped)
- 71. How did it get so small? @ladyleet • Implemented a lot of operators in terms of other operators • Turn operators into one line vs 40-50 lines of code • Ex. reduce operator is just scan and take last • Ex. toArray is just a specialty of reduce
- 72. Patch Operators vs Lettable Operators @ladyleet • Patch operators • import ‘rx/add/operator/map’ • Libraries and code breaking • Add operators on to the prototype • No tree shaking • Lettable operators • aka operator functions • Higher order functions • Yay tree shaking • Yay functional programming
- 73. Lots more to come… @ladyleet