![@ladyleet
Yeah but… isn’t it just for async?
Nope! Observables are just push based primitives that push values at you.
Synchronous examples: Observable.of and Observable.from
Observable.of(x) just gives you a back whatever you pass into that argument.
Observable.from converts an array, promise, iterable) -
observable.from([1,2,3])](https://image.slidesharecdn.com/rxjsinnativescriptangular-170920023102/75/The-Power-of-RxJS-in-Nativescript-Angular-15-2048.jpg)
Uploaded byTracy Lee
The Power of RxJS in Nativescript + Angular
The document discusses the use of RxJS in NativeScript and Angular, highlighting it as a push-based primitive in JavaScript to facilitate reactive programming. It explains the core components of RxJS, namely observables and observers, and offers practical guidance on creating observables and integrating them into applications. Additionally, it touches on best practices for importing RxJS and future developments in versions 6 and 7.
More Related Content
![State management with GraphQL [Angular Minsk, Online, 13.06.20]](https://cdn.slidesharecdn.com/ss_thumbnails/statemanagementwithgraphqlangularminskinternet13-200617021642-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to The Power of RxJS in Nativescript + Angular
![Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]](https://cdn.slidesharecdn.com/ss_thumbnails/refactr-190614202717-thumbnail.jpg?width=640&height=640&fit=bounds)
The Power of RxJS in Nativescript + Angular
- 1. The Power ofRxJS In NativeScript + Angular
- 2. What is ? Pushbased primitive in JavaScript @ladyleet RxJS
- 3. Push based primitivein JavaScript Ref implementation for TC39 Observable proposal @ladyleet What is ?RxJS
- 4. Push based primitivein JavaScript Domain specific language that sits on top of JS Ref implementation for TC39 Observable proposal @ladyleet What is ?RxJS
- 5. Push based primitivein 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 primitivein 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. Authors Ben Lesh, RxJS5+MattPodwysocki, RxJS 4 @ladyleet RxJS
- 8. is used inbig cos @ladyleet RxJS
- 9.
- 10. @ladyleet RxJS - 2Major Components Observables & Observers
- 11. @ladyleet RxJS - 2Major Components Observables & Observers Observables give data and observers receive data
- 12. @ladyleet RxJS - 2Major 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
- 13. @ladyleet RxJS - 2Major 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
- 14. @ladyleet RxJS - 2Major 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
- 15. @ladyleet Yeah but… isn’tit just for async? Nope! Observables are just push based primitives that push values at you. Synchronous examples: Observable.of and Observable.from Observable.of(x) just gives you a back whatever you pass into that argument. Observable.from converts an array, promise, iterable) - observable.from([1,2,3])
- 16. TRACY LEE |@ladyleet SPEAKER & GOOGLE DEVELOPER EXPERT DEV - ANGULAR, REACT, RXJS, REACT NATIVE, NATIVESCRIPT TECH WRITER & PODCASTER THIS DOT LABS & THIS DOT MEDIA MENTOR
- 17.
- 18. Learning RxJS BeLike... Couldn’t find the right docs! @ladyleet
- 19. What do theseoperators even do? Learning RxJS Be Like... @ladyleet
- 20. Oops, I forgotto subscribe. (╯°□°)╯︵ ┻━┻ Learning RxJS Be Like... @ladyleet
- 21. Learning & UsingRxJS • • Best practices for importing and using RxJS • How to choose operators and find documentation • How to avoid unwanted subscriptions • The benefits of “same-shapedness” • What’s coming for RxJS 6 and 7 How to create an Observable @ladyleet
- 22. const x =new (observer => { observer.next(‘hi’); observer.complete(); }); How to create an Observable Observable @ladyleet
- 23. Many other creationmethodsObservable Observable.fromEvent Observable.to Observable.from Use the Observable constructor @ladyleet
- 24. Let’s build anapp! (It’s a pun app) @ladyleet
- 27. Lookahead Search The IdiomaticRxJS Example @ladyleet
- 28. Setting up theApp Using NativeScript + Angular @ladyleet
- 29. $ tns create<name-of-app> - -ng $ tns run ios Scaffold a NativeScript App with NativeScript CLI @ladyleet
- 30. Create a PunComponent @ladyleet
- 31. Add Component toRouter @ladyleet
- 32. Configure Main AppComponent @ladyleet
- 33. Add the SearchBarComponent @ladyleet
- 34. Add the SearchBarComponent @ladyleet
- 35. Use Subject asan event handler in submit event. @ladyleet Get Observable of Text Changes from Submit
- 36. @ladyleet Add a templatereference variable to get the text value Get Observable of Text Changes from Input
- 37. Using the nextmethod to get an Observable of values. @ladyleet Get Observable of Text Changes from Input
- 38. Import Subject fromRxJS @ladyleet Get Observable of Text Changes from Input
- 39. Add the Subjectto your component class @ladyleet Get Observable of Text Changes from Input
- 40. • Subjects areObservables • 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 • Multicast, or hot @ladyleet On the Subject of Subjects
- 41. Importing RxJS … thisis where a lot of people make a mistake. @ladyleet
- 42. MISTAKE: Importing ALLof RxJS @ladyleet
- 43. Include Just WhatYou Need @ladyleet
- 44. Back to OurPun App We have an Observable of text input changes - keywordInputChange$ … give us the puns we’re looking for! @ladyleet
- 45. To Get OurData, We’ve Created “PunService” @ladyleet
- 46. For Our DataSource, We Created PunService @ladyleet
- 47. Take Observable ofTextbox Changes and Get a List of Suggested Keywords @ladyleet
- 48. switchMap Converts the valueto a new Observable, then switches to that Observable (unsubscribing from any previous ones it might have made) @ladyleet
- 49.
- 50. Writing Suggested Keywordsto the View @ladyleet
- 51. Writing Suggested Keywordsto the View @ladyleet
- 52. Writing Suggested Keywordsto the View @ladyleet
- 53. Get List ofPuns from List of Keywords @ladyleet
- 54.
- 55.
- 56.
- 57. The Benefits of SameShaped-ness @ladyleet
- 58.
- 59. Learning & UsingRxJS How to create an Observable @ladyleet What’s Next for RxJS 6 & 7? • • Best practices for importing and using RxJS • How to choose operators and find documentation • How to avoid unwanted subscriptions • The benefits of “same-shapedness”
- 60. What’s Next forRxJS 6 & 7? @ladyleet
- 61. T-Rex => RxJS6/7 @ladyleet ~30kb => ~3kb (minified, bundled, and gzipped)
- 62. How did itget 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
- 63. Patch Operators vsLettable 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
- 64. Lots more tocome… @ladyleet
- 65.
- 66.