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.8k
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
760
Recherche Géospatiale dans MongoDB
hugocrd
0
96
Other Decks in Programming
See All in Programming
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
5
720
高セキュリティ・高耐障害性・サブシステム化。そして2億円
tasukulab280
2
550
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
100
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
180
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
0
370
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
180
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
160
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
710
ニックトレイン登壇資料
ryotakurokawa
0
120
アーキテクトと美学 / Architecture and Aesthetics
nrslib
11
2.7k
PromptyによるAI開発入門
ymd65536
1
330
Goで作るChrome Extensions / Fukuoka.go #21
n3xem
2
2.5k
Featured
See All Featured
Visualization
eitanlees
146
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
690
Docker and Python
trallard
44
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Code Review Best Practice
trishagee
67
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
430
Making the Leap to Tech Lead
cromwellryan
133
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Six Lessons from altMBA
skipperchong
27
3.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
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 hugo@melusyn.com ♥
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 hugo@melusyn.com or @HugoCrd ♥
This template is from SlidesCarnival