RxJS - The Basics & The Future

What is ?
Push based primitive in JavaScript
@ladyleet
RxJS

Ref implementation for TC39 Observable proposal
@ladyleet
What is ?RxJS

Domain specific language that sits on top of JS
@ladyleet
What is ?RxJS

Only external dependency to Angular (2x)
@ladyleet
What is ?RxJS

Easy to chain together complex interactions
@ladyleet
Only external dependency to Angular (2x)
What is ?RxJS

@ladyleet
RxJS - 2 Major Components
Observables & Observers

@ladyleet
Observables give data and observers receive data

@ladyleet
Observables are just functions in JavaScript - they don’t do
anything until you subscribe to them.

@ladyleet
Observables are always observed by observers

@ladyleet
Observables are always observed by observers
Subscribing to an Observable sets up a chain of observation
using observers.

Authors
Ben Lesh, RxJS5+Matt Podwysocki, RxJS 4
@ladyleet
RxJS

is used in big cos
@ladyleet
RxJS

Let me tell you an story
@ladyleet

“Ben, teach me RxJS!”
@ladyleet

“RxJS Blah blah blah!”
@ladyleet

“RxJS Blah bl…uh oh…”
@ladyleet

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

What do these operators even do?
@ladyleet

How do I wrap APIs in Observables?
@ladyleet

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

@ladyleet
Wow, I get it!
I love RxJS!

TRACY LEE | @ladyleet
SPEAKER & GOOGLE DEVELOPER EXPERT
DEV - ANGULAR, EMBER, REACT, RXJS
TECH WRITER & PODCASTER
THIS DOT MEDIA / LABS
MENTOR

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

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

Many other creation methodsObservable
Observable.fromEvent
Observable.to
Observable.from
Use the
Observable
constructor
@ladyleet

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

Versions
Angular 4.2.5
Angular-CLI 1.2.0
RxJS 5.4.1
Angular Material 2.0.0-beta.7
@ladyleet

RxJS - The Basics & The Future

Lookahead Search
The Idiomatic RxJS Example
@ladyleet

Add an <input> to your component’s template.
Getting Observable of Text Changes from Input
@ladyleet

Use Subject as an event handler in input event.
@ladyleet

Use a template reference variable to get the text value.
@ladyleet

Using the next method to get an Observable of values.
@ladyleet

Import Subject from RxJS
@ladyleet

Add the Subject to your component class
@ladyleet

• 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

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

MISTAKE: Importing ALL of RxJS
@ladyleet

Include Just What You Need
@ladyleet

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

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

PunService Uses Http From @angular/http
@ladyleet

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

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

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

Writing Suggested Keywords to the View
@ladyleet

Get List of Puns from List of Keywords
@ladyleet

Let’s Share keyword$
@ladyleet

Same Shaped-ness
Let’s add another data source!
@ladyleet

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

Wrap an API in an Observable
@ladyleet

@ladyleet
Wrap an API in an Observable

An Angular Service
• Injectable
• Actually use all results
• Add error handling
@ladyleet

Add Button to Trigger Speech Recognition
@ladyleet

Pump Clicks through a Subject
@ladyleet

Inject SpeechService
@ladyleet

switchMap Clicks into Speech Recognition
@ladyleet

Merge Typed Keyword Suggestions With Spoken Ones
@ladyleet

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”
•
@ladyleet
What’s Next for RxJS 6 & 7?

What’s Next for RxJS 6 & 7?
@ladyleet

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

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

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

Lots more to come…
@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/
@ladyleet

RxJS - The Basics & The Future

Related slideshows

More Related Content

RxJS - The Basics & The Future