Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Dealing with streams using RxJs
Hugo Cordier
June 05, 2015
Programming
8
2.3k
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
210
Reactive Programming with RxJS
hugocrd
4
740
Recherche Géospatiale dans MongoDB
hugocrd
0
77
Other Decks in Programming
See All in Programming
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
520
LetsTry
maimux2x
0
100
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
560
Edge Side Frontend という新領域
mizchi
24
10k
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
140
kintone × LINE Bot で餃子検定Botを作った話
naberina
0
350
Isar勉強会
hoddy3190
0
580
動画合成アーキテクチャを実装してみて
satorunooshie
0
570
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
180
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
400
パラメタライズドテスト
ledsun
0
220
SwiftUI+TCAに挑戦!NewsPicks iOSアプリのリアーキテクチャ/re-architecture-newspicks-ios-app-with-swiftui-and-tca
takehilo
0
420
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
506
37k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
Become a Pro
speakerdeck
PRO
3
910
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Testing 201, or: Great Expectations
jmmastey
21
5.5k
Support Driven Design
roundedbygravity
87
8.6k
Automating Front-end Workflow
addyosmani
1351
200k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Embracing the Ebb and Flow
colly
73
3.4k
What the flash - Photography Introduction
edds
63
10k
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