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
290
Reactive Programming with RxJS
hugocrd
4
750
Recherche Géospatiale dans MongoDB
hugocrd
0
91
Other Decks in Programming
See All in Programming
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 07
javiergs
PRO
0
220
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
CSC307 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
Fireside Chat
paigeccino
25
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Design by the Numbers
sachag
277
18k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
A Philosophy of Restraint
colly
200
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
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