Hello!
I am Hugo Cordier
Developer and CTO at Melusyn
Melusyn helps film makers to
manage and organize their
productions.
You can find me at :
@HugoCrd
We are hiring!
Drop me a line at
hugo@melusyn.com
♥
Slide 3
Slide 3 text
1.
What’s an event?
Javascript is about events
Slide 4
Slide 4 text
What’s an event?
DOM events
clicks, moves, focuses, drags events
Slide 5
Slide 5 text
What’s an event?
Async response
Ajax, Websocket events
Slide 6
Slide 6 text
What’s an event?
Timeout, interval
Time related events
Slide 7
Slide 7 text
What’s an event?
Solution
Callbacks & Promises
Slide 8
Slide 8 text
2.
What’s a stream?
Give me use-cases!
Slide 9
Slide 9 text
What’s a stream?
A stream is a
group of events
Slide 10
Slide 10 text
What’s a stream?
Double clicks
How fast can you click?
Slide 11
Slide 11 text
What’s a stream?
Keyboard
Konami code is a must have feature
Slide 12
Slide 12 text
What’s a stream?
Synchronizing
async responses
Requesting several services
Slide 13
Slide 13 text
What’s a stream?
Solution
Reactive Extensions
Slide 14
Slide 14 text
3.
What to do with it?
Slide 15
Slide 15 text
What to do with it?
Transforming
events in the Stream
Slide 16
Slide 16 text
What to do with it?
Merging, mixing
Several streams
Slide 17
Slide 17 text
What to do with it?
Dealing with time
Delaying events, creating interval, ...
Slide 18
Slide 18 text
4.
The Rx Model
Observables and Operators
Slide 19
Slide 19 text
The Rx Model
A stream is an
Observable
An Observable push down events through Operators
Slide 20
Slide 20 text
The Rx Model
Operators transform
a stream
They can be used to transform, filter and mix
events from an Observable
Slide 21
Slide 21 text
The Rx Model
Slide 22
Slide 22 text
The Rx Model
Slide 23
Slide 23 text
The Rx Model
myObservable
.map(value => value+1)
.filter(value => value > 2)
Finally some code!
Slide 24
Slide 24 text
The Rx Model
Slide 25
Slide 25 text
The Rx Model
myObservable
.merge(anotherObservable)
.map(value => value+1)
.filter(value => value > 2)
Slide 26
Slide 26 text
The Rx Model
Slide 27
Slide 27 text
The Rx Model
myObservable
.flatMap(anotherObservable)
.map(value => value+1)//Values from anotherObservable
.filter(value => value > 2)
Slide 28
Slide 28 text
There’s a whole bunch
of Operators
The Rx Model
http://reactivex.io/documentation/operators.html
Slide 29
Slide 29 text
5.
The Rx Model
Subscribing and dealing with errors
Slide 30
Slide 30 text
An Observable needs
to be subscribed
The Rx Model
The stream will flow once it has been subscribed
Slide 31
Slide 31 text
The Rx Model
myObservable
.subscribe(
value => console.log(“Event”+value),
e => console.error(e)
)
Slide 32
Slide 32 text
6.
The Rx Model
Creating Observables
Slide 33
Slide 33 text
How to create an
Observable?
The Rx Model
Slide 34
Slide 34 text
The Rx Model
Rx.Observable
.just(1)
.from([1,5,0,12,4])
.fromEvent(domElement, event)
.fromNodeCallback(nodeFct)
.fromPromise(promise)
.interval(2000)
Slide 35
Slide 35 text
The Rx Model
Rx.Observable.create(s => {
for (value in values) {
s.onNext(value)
}
s.onCompleted()
})
Slide 36
Slide 36 text
7.
In real life
Slide 37
Slide 37 text
In real life
Live search
Using Google Geocoder and RxJS
http://codepen.io/HugoCrd/pen/vOxQvM
Slide 38
Slide 38 text
In real life
Composing streams
Aggregate data from several requests
http://codepen.io/HugoCrd/pen/azGxdW
Slide 39
Slide 39 text
In real life
Realtime statistics
Ping a server each x seconds and diplay results
http://codepen.io/HugoCrd/pen/dPeaLY
Slide 40
Slide 40 text
8.
In real life
RxJS is just a library. Use it with
whatever you want
Slide 41
Slide 41 text
In real life with...
Node.js
Node uses Callbacks. They can easily be used as
a stream
var rename = Rx.Observable.fromNodeCallback(fs.rename);
rename('file1.txt', 'file2.txt')
.map(...)
.subscribe(...)
Slide 42
Slide 42 text
In real life with...
Angular.js
Angular $watch is a stream of model changes
Angular also has an eventbus system : events on
a handler are a stream
Rx.Observable.$watch(scope, 'name')
.map(...)
.subscribe(...)
Slide 43
Slide 43 text
In real life with...
Backbone.js
Binding to an object is listening to it’s changes.
This could be used as a stream.
Rx.Observable.fromEvent(object, ‘click’)
.map(...)
.subscribe(...)
Slide 44
Slide 44 text
In real life with...
JS Wokers
A worker could post messages to into stream
Rx.DOM.fromWebWorker('worker.js')
.map(...)
.subscribe(...)
Slide 45
Slide 45 text
Thanks!
Any questions?
We are hiring!
Drop me a line at
hugo@melusyn.com
or @HugoCrd
♥