Reactive programming with RxJS - Taiwan

Tracy Lee
See you in 2019!
https://2018.angular.tw/
@ladyleet

The Magic of
Reactive Programming:
With RxJS
Tracy Lee
Taiwan 2018
@ladyleet

@ladyleet
Reactive
Programming

@ladyleet
How many of you practice
Reactive Programming?

@ladyleet
Tracy Lee | @ladyleet
Co-Founder, This Dot Labs
● Google Developer Expert
● RxJS Core Team
● Community Rel, Node.js @ Node
Foundation
● JavaScript Developer - all the things
● Vue Vixens Board Member
● Google Women Techmakers Lead
● Modern Web Podcast
● Google Developer Group, Silicon Valley &
Triangle

@ladyleet
台灣的食物
太好吃了!!!

@ladyleet
如果有地方我應該去吃的話就
DM me on twitter @ladyleet!

@ladyleet
Back to important things

@ladyleet
So what is Reactive
Programming really?

@ladyleet
Wikipedia says…
Reactive programming is a programming
paradigm concerned with data streams and
the propagation of change.

@ladyleet
Wikipedia says…
This means that it becomes possible to
express static or dynamic data streams with
ease via the employed programming language

@ladyleet
Wikipedia says…
and that an inferred dependency within the
associated execution model exists, which
facilitates the automatic propagation of the
change involved with data flow.

@ladyleet
● Dealing with sets of events over time
● Automatic, implicit (not explicit),
propagation of change
● Each step doesn't know or care about the
previous step
● Each step performs an action when it
reacts to the incoming change
In Layman’s terms...

@ladyleet
In Layman’s terms...

@ladyleet
Reactive programming in standards
Reactive programming in frameworks & libraries
How to think reactively
What is RxJS?
How reactive programming makes development easier
Things we’ll talk about today

@ladyleet
TC39
● Promises
● Observables
WHATWG
● EventTarget Observable
Reactive programming in
standards

@ladyleet
● Added to browsers ~2014
● Added to Node.js ~2015
● ECMAScript 2015
● Push-based
● Single value
● Always async
● Eager
● Stateful
● Simple base API
● Simple transformation options (then, catch)
Promises

Promises
fetch('fruitsnacks.json')
.then(resp => resp.json())
.then(fruitsnacks => console.log('I have fruit snacks!'));

@ladyleet
● TC39 Proposal - Stage 1 https://github.com/tc39/proposal-observable
● RxJS is a reference implementation
● Simple base API
● Push-based
● Multiple values
● Sync or async
● Generally stateless
● Lazy
● Many transformation options OOTB (via RxJS)
Observable

Observable (RxJS)

import { ajax } from ‘rxjs/ajax’;
ajax.getJSON(‘fruitsnacks.json’)
.subscribe(fruitsnacks => console.log(fruitsnacks));

@ladyleet
● WHATWG Proposal - http://github.com/whatwg/dom/issues/544
● Add method called “on” to EventTarget
● Comes with operators (map, filter, first, TakeUntil)
EventTarget Observable

EventTarget Observable

button.on('click’);

@ladyleet
Reactive Programming in
Frameworks & Libraries
D3 VueAngular React

@ladyleet
Reactive Programming in Angular
Angular & RxJS are besties

@ladyleet
NgRx

@ladyleet
● RxJS is a 1st class citizen
● .OnPush change detection strategy
● Angular Router
● Reactive forms

@ladyleet
Reactive Programming in React
redux-observableReact MobX

@ladyleet
Reactive Programming in React
React MobXredux-observable

@ladyleet
Reactive Programming in Vue
Vue-Rx
https://github.com/vuejs/vue-rx

@ladyleet
Reactive is just a fancy
term to quantify a way
of programming.

@ladyleet
Reactive Programming Patterns
appear where there is a natural fit for
events to be modeled as values over
time.
Web sockets, user events, animations,
HTTP requests, network connections,
file system changes, etc

@ladyleet
Everything can be modeled as an event
All applications are event driven
Everything can be represented as a set of values over time,
even events.
How do you think reactively?

@ladyleet
Everything can be
represented as a set of
values over time, even
events.

@ladyleet
Definition of set: a set in the math sense { a, b, c }.
Current mindset: When an action happens, you get one value
back.
New mindset: Treat events as sets of values.
Example sets: { }, { 0 }, { 1, 2, 3 }
Everything can be represented as a set
of values over time, even events.

@ladyleet
If everything is a set, you can do more with your data.
You can query them, map them, filter them…
Join and combine them in different ways…
Give something a half a set of things or things with a set of
parameters.
Everything can be represented as a set
of values over time, even events.

@ladyleet
What is RxJS?
Domain specific language (DSL) for reacting to events
The most popular reactive programming library

@ladyleet
Did you know there are other dialects?
RxJava, RxPhp, Rx.NET, RxRuby, RxCPP, RxSwift...

@ladyleet
What an Observable Is
The simple, technical, nutshell version

Imagine it's just a function
function myObservable() {
}

We call it with an observer with handlers on it
function myObservable(observer) {
}

We call next on the observer to emit values
observer.next(1);
}

We call error on the observer if there's a problem
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
}

We call complete on the observer if we're done emitting values
observer.next(1);
}
observer.complete();
}

To use our observable, we call it with an observer object
const observer = {
next(value) { console.log(value); },
error(err) { console.error(err); },
complete() { console.log('done'); },
};
myObservable(observer);

It could even return a teardown function to finalize
const teardown = myObservable({
});
teardown();

@ladyleet
So why not just use functions?

We don't want those calls out of order
observer.next(1);
}
observer.next('oops');
}

Was there a teardown returned or not?
});
if (teardown) teardown();

What if you don't want a handler?
myObservable({
});
complete? where are you?!

Tearing down on complete and error, too
error(err) { console.error(err); if (teardown) teardown(); },
complete() { console.log('done'); if (teardown) teardown(); },
});

We can just take our function...
observer.next(1);
}
}

… and wrap it in a class that handles that stuff
const myObservable = new Observable((observer) => {
observer.next(1);
}
});

Instead of calling it directly...
error(err) { console.error(err); if (teardown) teardown(); },
complete() { console.log('done'); if (teardown) teardown(); },
});

...We call it via subscribe
const subscription = myObservable.subscribe({
});
subscription.unsubscribe();

@ladyleet
Observables Are Just Functions
With a lot of cool guarantees

@ladyleet
What is an "Operator"?
Just a transformation from one Observable into another

"operators" in Arrays
const arr = [1, 2, 3, 4, 5, 6, 7];
arr.filter(x => x % 2 === 0); // [2, 4, 6]
arr.map(x => x + x); // [2, 4, 6, 8, 10, 12, 14]
arr.filter(x => x % 2 === 0)
.map(x => x + x); // [4, 8, 12]

"operators" in Observables

import { of as observableOf } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const src = observableOf(1, 2, 3, 4, 5, 6, 7);
src.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
).subscribe(x => console.log(x)); // 4...8...12...

A simple map operator implementation

import { Observable } from 'rxjs';
export function map(fn) {
return (source) => new Observable(observer => {
return source.subscribe({
next(value) { observer.next(fn(value)); },
error(err) { observer.error(err); },
complete() { observer.complete(); },
});
});
}

Takes an observable and returns a new one

});
});
}

Subscribes to the source...

});
});
}

… and passes along the transformed value.

});
});
}

… as well as sending along the other signals

});
});
}

@ladyleet
There are 60+ operators in RxJS
(You probably won't need to implement your own often)
● map
● filter
● scan
● take
● reduce
● mergeMap
● concatMap
● switchMap
● takeUntil
● catchError

@ladyleet
With RxJS you can do cool things with
less code.

@ladyleet
Like drag and drop in Angular could be
easy.

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';
import { filter, mergeMap, tap, takeUntil, map } from 'rxjs/operators';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
mouseDown$ = fromEvent(document, 'mousedown');
mouseMove$ = fromEvent(document, 'mousemove');
mouseUp$ = fromEvent(document, 'mouseup');
subscription: Subscription;

targetMouseDown$ = this.mouseDown$.pipe(
filter((e: any) => e.target.matches('. '))
)

mouseDrag$ = this.targetMouseDown$.pipe(
mergeMap(({ target: draggable, offsetX: startX, offsetY: startY }) =>
this.mouseMove$.pipe(
tap((mouseMoveEvent: any) => {
mouseMoveEvent.preventDefault()
}),
map((mouseMoveEvent: any) => ({
left: mouseMoveEvent.clientX - startX,
top: mouseMoveEvent.clientY - startY,
draggable
})),
takeUntil(this.mouseUp$)
)
)

ngOnInit() {
this.subscription = new Subscription();
this.subscription.add(this.mouseDrag$.subscribe(({ top, left,
draggable }) => {
draggable.style.top = top + 'px';
draggable.style.left = left + 'px';
}));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}

@ladyleet
We could do more complex things
like multiplexing over a websocket
using RxJS.

@ladyleet
Multiplexing over a websocket... what?
Sending and receiving multiple independent requests and
responses concurrently over the same websocket.

import React from ‘react’;
import { StyleSheet, Text, View, Image, Button } from ‘react-native’;
import { webSocket } from ‘rxjs/webSocket’;
import { groupBy, mergeMap, takeUntil, finalize } from ‘rxjs/operators’;
import { timer } from ‘rxjs’;
import kenwheeler from ‘./ken_wheeler.png’;

export default class App extends React.Component {
state = { randomKens: {} };
socket$ = webSocket(‘ws://localhost:8080’);
requestKenHead() {
const msg = JSON.stringify({ type: ‘REQUEST_KEN_HEAD’ });
this.socket$.next(msg);
}

componentDidMount() {
const kenHead$ = this.socket$.pipe {
groupBy(data => data.id),
mergeMap(singleKenStream =>
singleKenStream.pipe(
takeUntil(
timer(3000),
),
finalize(() => {
const dataId = singleKenStream.key;
const randomKens = { ...this.state.randomKens };
delete randomKens[dataId];
this.setState({ randomKens });
})
)

this.subscription = kenHead$.subscribe(data => {
this.setState({
randomKens: {
...this.state.randomKens,
[data.id]: { id: data.id, x: data.x, y: data.y }
}
});
});
componentWillUnmount() {
this.subscription.unsubscribe();
}

render() {
return (
<View>
{Object.values(this.state.randomKens).map(randomKen =>
<Image
key={randomKen.id}
source={kenwheeler}
style={{
position: ‘absolute’,
left: randomKen.x,
top: randomKen.y,
}}
/>
)}
<Button
onPress={() => this.requestKenHead()}
title=”add a ken bobble”
/>
</View>
);

@ladyleet
What is RxJS?
Things we talked about today

@ladyleet
Things we talked about today
What is RxJS?

@ladyleet
Click handlers
AJAX requests
Anything async
…or just call subscribe?
Easy ways to integrate RxJS

@ladyleet
RxJS docs - come contribute!
https://github.com/reactivex/rxjs

@ladyleet
Thank you!
Come hang with me on Twitter!
http://twitter.com/ladyleet
Grumpy cat game in Angular
https://github.com/ladyleet/grumpycat-rx-ng-neww
Bobble head Ken Wheeler react native app
https://github.com/ladyleet/ken-wheeler-react-native-multi-plex-web-socket
Node.js web socket server
https://github.com/ladyleet/ws-server

Reactive programming with RxJS - Taiwan

More Related Content

What's hot (20)

Similar to Reactive programming with RxJS - Taiwan (20)

Recently uploaded (20)

Reactive programming with RxJS - Taiwan