6. @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
13. @ladyleet
Wikipedia says…
This means that it becomes possible to
express static or dynamic data streams with
ease via the employed programming language
14. @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.
15. @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...
17. @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
18. @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
26. @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
27. @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
39. @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
40. @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
41. @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
42. @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?
44. @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.
45. @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.
46. @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
47. @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
48. @ladyleet
What is RxJS?
Domain specific language (DSL) for reacting to events
The most popular reactive programming library
49. @ladyleet
Did you know there are other dialects?
RxJava, RxPhp, Rx.NET, RxRuby, RxCPP, RxSwift...
52. We call it with an observer with handlers on it
function myObservable(observer) {
}
53. We call next on the observer to emit values
function myObservable(observer) {
observer.next(1);
}
54. We call error on the observer if there's a problem
function myObservable(observer) {
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
}
55. We call complete on the observer if we're done emitting values
function myObservable(observer) {
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
observer.complete();
}
56. 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);
57. It could even return a teardown function to finalize
const teardown = myObservable({
next(value) { console.log(value); },
error(err) { console.error(err); },
complete() { console.log('done'); },
});
teardown();
59. We don't want those calls out of order
function myObservable(observer) {
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
observer.complete();
observer.next('oops');
}
60. Was there a teardown returned or not?
const teardown = myObservable({
next(value) { console.log(value); },
error(err) { console.error(err); },
complete() { console.log('done'); },
});
if (teardown) teardown();
61. What if you don't want a handler?
myObservable({
next(value) { console.log(value); },
error(err) { console.error(err); },
});
complete? where are you?!
62. Tearing down on complete and error, too
const teardown = myObservable({
next(value) { console.log(value); },
error(err) { console.error(err); if (teardown) teardown(); },
complete() { console.log('done'); if (teardown) teardown(); },
});
if (teardown) teardown();
63. We can just take our function...
function myObservable(observer) {
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
observer.complete();
}
64. … and wrap it in a class that handles that stuff
const myObservable = new Observable((observer) => {
observer.next(1);
if (someCondition) {
observer.error(new Error('end of the world'));
}
observer.complete();
});
65. Instead of calling it directly...
const teardown = myObservable({
next(value) { console.log(value); },
error(err) { console.error(err); if (teardown) teardown(); },
complete() { console.log('done'); if (teardown) teardown(); },
});
if (teardown) teardown();
71. "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...
72. 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(); },
});
});
}
73. Takes an observable and returns a new one
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(); },
});
});
}
74. Subscribes to the source...
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(); },
});
});
}
75. … and passes along the transformed value.
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(); },
});
});
}
76. … as well as sending along the other signals
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(); },
});
});
}
77. @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
78. @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
79. @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
91. @ladyleet
We could do more complex things
like multiplexing over a websocket
using RxJS.
92. @ladyleet
Multiplexing over a websocket... what?
Sending and receiving multiple independent requests and
responses concurrently over the same websocket.
100. @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 talked about today
101. @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 talked about today
102. @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 talked about today
103. @ladyleet
Things we talked about today
Reactive programming in standards
Reactive programming in frameworks & libraries
How to think reactively
What is RxJS?
How reactive programming makes development easier
104. @ladyleet
Things we talked about today
Reactive programming in standards
Reactive programming in frameworks & libraries
How to think reactively
What is RxJS?
How reactive programming makes development easier
107. @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