RxJS

A Beginner & Expert’s Perspective

@benlesh | @ladyleet

@benlesh | @ladyleet

Learning RxJS Be Like...

Couldn’t find the right docs!

@benlesh | @ladyleet

What do these operators even do?

Learning RxJS Be Like...

@benlesh | @ladyleet

How do I wrap APIs in Observables?

Learning RxJS Be Like...

@benlesh | @ladyleet

Oops, I forgot to subscribe. (╯°□°)╯︵ ┻━┻

Learning RxJS Be Like...

@benlesh | @ladyleet

@benlesh | @ladyleet

Tracy Lee @ladyleet

A Beginner & Expert’s Perspective

Ben Lesh @benlesh

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Google Developer

Expert

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Google Developer

Expert

Co-Founder This Dot Labs

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Google Developer

Expert

Co-Founder This Dot Labs

Learned RxJS a few months

ago

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Software Engineer, Google

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Software Engineer, Google

Formerly Netflix

Tracy Lee @ladyleet

Beginner & Expert

Ben Lesh @benlesh

Software Engineer, Google

Formerly Netflix

RxJS5+ Lead

@benlesh | @ladyleet

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

const x = new Observable(observer => { observer.next(‘hi’); observer.complete(); });

@benlesh | @ladyleet

Creating a New Observable

Many other Observable creation methods

@benlesh | @ladyleet

@benlesh | @ladyleet

Versions

Angular 4.0.1 Angular-CLI 1.0.0 RxJS 5.3.0 Angular Material 2.0.0-beta.2

@benlesh | @ladyleet

// Add a funny pun about Angular 4 and Angular CLI

@benlesh | @ladyleet

Lookahead Search

The Idiomatic RxJS Example

@benlesh | @ladyleet

Add an <input> to your component’s template

@benlesh | @ladyleet

Getting Observable of text changes from input

Use Subject as an event handler in input event

@benlesh | @ladyleet

Getting Observable of text changes from input

Use a template reference variable to get the text value

@benlesh | @ladyleet

Getting Observable of text changes from input

Using the next method to push values through the Observable

@benlesh | @ladyleet

Getting Observable of text changes from input

Import Subject from RxJS

@benlesh | @ladyleet

Getting Observable of text changes from input

Add the Subject

@benlesh | @ladyleet

Getting Observable of text changes from your input

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

@benlesh | @ladyleet

Importing RxJS

… this is where a lot of beginners make a mistake

Beginner Mistake: Importing ALL of RxJS 5

@benlesh | @ladyleet

Include Just What You Need

@benlesh | @ladyleet

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

To Get Our Data, We’ve Created “PunService”

@benlesh | @ladyleet

PunService Uses Http From @angular/http

@benlesh | @ladyleet

Take Observable of Textbox Changes and Get a List of Suggested Keywords

@benlesh | @ladyleet

switchMap

Converts the value to a new observable, then switches to that observable (unsubscribing from any previous ones it might have made)

@benlesh | @ladyleet

@benlesh | @ladyleet

Operators: Why switchMap?

@benlesh | @ladyleet

Writing Suggested Keywords to the View

Get List of Puns from List of Keywords

@benlesh | @ladyleet

Displaying Puns

@benlesh | @ladyleet

Subscribing to keyword$

@benlesh | @ladyleet

Let’s Share keyword$

@benlesh | @ladyleet

@benlesh | @ladyleet

Same Shaped-nessLet’s add another data source!

@benlesh | @ladyleet

Web Speech APIhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

@benlesh | @ladyleet

Wrap an API in an Observable

@benlesh | @ladyleet

Wrap an API in an Observable

@benlesh | @ladyleet

Wrap an API in an Observable

@benlesh | @ladyleet

An Angular Service

- Injectable

- Actually use all results

- Add error handling

@benlesh | @ladyleet

Add Button to Trigger Speech Recognition

@benlesh | @ladyleet

Pump our clicks through a Subject

@benlesh | @ladyleet

Inject SpeechService

@benlesh | @ladyleet

switchMap Clicks into Speech Recognition

@benlesh | @ladyleet

Merge Typed Keyword Suggestions With Spoken Ones

@benlesh | @ladyleet

Same shaped-ness!This works because they’re both Observable<string[]>

@benlesh | @ladyleet

@benlesh | @ladyleet

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

Resources

https://github.com/ladyleet/rxjs-test

http://reactivex.io/rxjs

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

https://cloud.google.com/vision/

@benlesh | @ladyleet

Thank You!

@benlesh | @ladyleet