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
310
Reactive Programming with RxJS
hugocrd
4
770
Recherche Géospatiale dans MongoDB
hugocrd
0
97
Other Decks in Programming
See All in Programming
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
680
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
iOS開発スターターキットの作り方
akidon0000
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
580
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
0
350
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Site-Speed That Sticks
csswizardry
10
710
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Gamification - CAS2011
davidbonilla
81
5.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
189
11k
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