Learn the basics of use and power of RxJS in NativeScript & Angular in this presentation given at NativeScript Developer Days in New York City September 2017

1. The Power of RxJS
In NativeScript + Angular

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. Authors
Ben Lesh, RxJS5+Matt Podwysocki, RxJS 4
@ladyleet
RxJS

8. is used in big cos
@ladyleet
RxJS

9. @ladyleet

10. @ladyleet
RxJS - 2 Major Components
Observables & Observers

11. @ladyleet
RxJS - 2 Major Components
Observables & Observers
Observables give data and observers receive data

12. @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

13. @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

14. @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

15. @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])

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. @ladyleet

18. Learning RxJS Be Like...
Couldn’t find the right docs!
@ladyleet

19. What do these operators even do?
Learning RxJS Be Like...
@ladyleet

20. Oops, I forgot to subscribe. (╯°□°)╯︵ ┻━┻
Learning RxJS Be Like...
@ladyleet

21. Learning & Using RxJS
•
• 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 creation methodsObservable
Observable.fromEvent
Observable.to
Observable.from
Use the
Observable
constructor
@ladyleet

24. Let’s build an app!
(It’s a pun app)
@ladyleet

27. Lookahead Search
The Idiomatic RxJS Example
@ladyleet

28. Setting up the App
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 Pun Component
@ladyleet

31. Add Component to Router
@ladyleet

32. Configure Main App Component
@ladyleet

33. Add the SearchBar Component
@ladyleet

34. Add the SearchBar Component
@ladyleet

35. Use Subject as an event handler in submit event.
@ladyleet
Get Observable of Text Changes from Submit

36. @ladyleet
Add a template reference variable to get the text value
Get Observable of Text Changes from Input

37. Using the next method to get an Observable of values.
@ladyleet
Get Observable of Text Changes from Input

38. Import Subject from RxJS
@ladyleet
Get Observable of Text Changes from Input

39. Add the Subject to your component class
@ladyleet
Get Observable of Text Changes from Input

40. • 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
• Multicast, or hot
@ladyleet
On the Subject of Subjects

41. Importing RxJS
… this is where a lot of people make a mistake.
@ladyleet

42. MISTAKE: Importing ALL of RxJS
@ladyleet

43. Include Just What You Need
@ladyleet

44. Back to Our Pun App
We have an Observable of text input changes - keywordInputChange$
… give us the puns we’re looking for!
@ladyleet

45. To Get Our Data, We’ve Created “PunService”
@ladyleet

46. For Our Data Source, We Created PunService
@ladyleet

47. Take Observable of Textbox Changes and
Get a List of Suggested Keywords
@ladyleet

48. switchMap
Converts the value to a new Observable, then switches to that Observable
(unsubscribing from any previous ones it might have made)
@ladyleet

49. Operators: Why switchMap?
http://reactivex.io/rxjs
@ladyleet

50. Writing Suggested Keywords to the View
@ladyleet

51. Writing Suggested Keywords to the View
@ladyleet

52. Writing Suggested Keywords to the View
@ladyleet

53. Get List of Puns from List of Keywords
@ladyleet

54. Displaying Puns
@ladyleet

55. Let’s Share keyword$
@ladyleet

56. @ladyleet

57. The Benefits of
Same Shaped-ness
@ladyleet

58. Let’s Demo!
@ladyleet

59. Learning & Using RxJS
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 for RxJS 6 & 7?
@ladyleet

61. T-Rex => RxJS 6/7
@ladyleet
~30kb => ~3kb
(minified, bundled, and gzipped)

62. 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

63. 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

64. Lots more to come…
@ladyleet

65. Resources
https://github.com/ladyleet/rxjs-nativescript-ddays
https://github.com/ladyleet/rxjs-test
http://reactivex.io/rxjs
tracy@thisdot.co
twitter.com/ladyleet
@ladyleet

66. Thank You!
@ladyleet