Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dealing with streams using RxJs
Search
Hugo Cordier
June 05, 2015
Programming
8
2.7k
Dealing with streams using RxJs
Hugo Cordier
June 05, 2015
Tweet
Share
More Decks by Hugo Cordier
See All by Hugo Cordier
Reactive Programming with RxJava
hugocrd
1
300
Reactive Programming with RxJS
hugocrd
4
750
Recherche Géospatiale dans MongoDB
hugocrd
0
91
Other Decks in Programming
See All in Programming
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
100
開発を加速する共有Swift Package実践
elmetal
PRO
0
420
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
390
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
マルチモジュールにおけるテスト最適化
fxwx23
0
210
なぜアジャイルがうまくいかないのか?
yum3
1
110
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Jakarta EE meets AI
ivargrimstad
1
550
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Jakarta EE meets AI
ivargrimstad
0
390
Featured
See All Featured
Embracing the Ebb and Flow
colly
83
4.4k
The Invisible Side of Design
smashingmag
296
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
Gamification - CAS2011
davidbonilla
79
5k
Adopting Sorbet at Scale
ufuk
73
8.9k
Infographics Made Easy
chrislema
239
18k
Designing the Hi-DPI Web
ddemaree
278
34k
Side Projects
sachag
451
42k
The Cult of Friendly URLs
andyhume
76
6k
Designing with Data
zakiwarfel
98
5k
Code Reviewing Like a Champion
maltzj
517
39k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Transcript
Dealing with Streams using RxJS
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
[email protected]
♥
1. What’s an event? Javascript is about events
What’s an event? DOM events clicks, moves, focuses, drags events
What’s an event? Async response Ajax, Websocket events
What’s an event? Timeout, interval Time related events
What’s an event? Solution Callbacks & Promises
2. What’s a stream? Give me use-cases!
What’s a stream? A stream is a group of events
What’s a stream? Double clicks How fast can you click?
What’s a stream? Keyboard Konami code is a must have
feature
What’s a stream? Synchronizing async responses Requesting several services
What’s a stream? Solution Reactive Extensions
3. What to do with it?
What to do with it? Transforming events in the Stream
What to do with it? Merging, mixing Several streams
What to do with it? Dealing with time Delaying events,
creating interval, ...
4. The Rx Model Observables and Operators
The Rx Model A stream is an Observable An Observable
push down events through Operators
The Rx Model Operators transform a stream They can be
used to transform, filter and mix events from an Observable
The Rx Model
The Rx Model
The Rx Model myObservable .map(value => value+1) .filter(value => value
> 2) Finally some code!
The Rx Model
The Rx Model myObservable .merge(anotherObservable) .map(value => value+1) .filter(value =>
value > 2)
The Rx Model
The Rx Model myObservable .flatMap(anotherObservable) .map(value => value+1)//Values from anotherObservable
.filter(value => value > 2)
There’s a whole bunch of Operators The Rx Model http://reactivex.io/documentation/operators.html
5. The Rx Model Subscribing and dealing with errors
An Observable needs to be subscribed The Rx Model The
stream will flow once it has been subscribed
The Rx Model myObservable .subscribe( value => console.log(“Event”+value), e =>
console.error(e) )
6. The Rx Model Creating Observables
How to create an Observable? The Rx Model
The Rx Model Rx.Observable .just(1) .from([1,5,0,12,4]) .fromEvent(domElement, event) .fromNodeCallback(nodeFct) .fromPromise(promise)
.interval(2000)
The Rx Model Rx.Observable.create(s => { for (value in values)
{ s.onNext(value) } s.onCompleted() })
7. In real life
In real life Live search Using Google Geocoder and RxJS
http://codepen.io/HugoCrd/pen/vOxQvM
In real life Composing streams Aggregate data from several requests
http://codepen.io/HugoCrd/pen/azGxdW
In real life Realtime statistics Ping a server each x
seconds and diplay results http://codepen.io/HugoCrd/pen/dPeaLY
8. In real life RxJS is just a library. Use
it with whatever you want
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(...)
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(...)
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(...)
In real life with... JS Wokers A worker could post
messages to into stream Rx.DOM.fromWebWorker('worker.js') .map(...) .subscribe(...)
Thanks! Any questions? We are hiring! Drop me a line
at
[email protected]
or @HugoCrd ♥
This template is from SlidesCarnival