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
Rxjs
Search
Danila Marchenkov
September 13, 2017
Education
0
98
Rxjs
Danila Marchenkov
September 13, 2017
Tweet
Share
More Decks by Danila Marchenkov
See All by Danila Marchenkov
angular6
sprit3dan
0
71
angular5
sprit3dan
0
50
angular#4
sprit3dan
0
160
angular#3
sprit3dan
0
42
angular#2
sprit3dan
0
33
Angular#1
sprit3dan
0
51
HTML 5 Canvas
sprit3dan
0
43
Angular #6
sprit3dan
0
67
Angular #5
sprit3dan
0
120
Other Decks in Education
See All in Education
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
2
500
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
180
AIの時代こそ、考える知的学習術
yum3
2
160
第1回大学院理工学系説明会|東京科学大学(Science Tokyo)
sciencetokyo
PRO
0
3.8k
プログラミング教育する大学、ZEN大学
sifue
1
530
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
240
IMU-00 Pi
kanaya
0
360
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
200
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
kzkmaeda
1
210
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
9.3k
ふりかえり研修2025
pokotyamu
0
1.2k
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
110
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Code Reviewing Like a Champion
maltzj
524
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building an army of robots
kneath
306
45k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Six Lessons from altMBA
skipperchong
28
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Being A Developer After 40
akosma
90
590k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Transcript
ReactiveX Marchenkov Danila, Software Developer
None
RxJS RxJava Rx.NET RxScala RxSwift RxClosure RxCpp RxGo RxGroovy RxJRuby
RxPHP RxPY Rx.rb RxDart RxLua
FRP Asynchronous - Observables Synchronous - Iterators
Observable
DOM-events Async operations Any data flow within app
Api?
• audit • auditTime • filter • last • buffer
• bufferWhen • catch • combine • combineAll • combineLatest • concat • count • debounce • delay • distinct • do • every • exhaust • expand • findIndex • find • forEach • groupBy • isEmpty • lift • map • mapTo • max • merge • mergeAll • min • multicast
const obs = Observable.from([1, 2, 3, 4]); obs.subscribe(it => console.log(‘obs’
+ it)); >obs1 >obs2 >obs3 >obs4
const obs = Observable.from([1, 2, 3, 4]); obs .map(val =>
`obs${val}`) .subscribe(it => console.log(it)); >obs1 >obs2 >obs3 >obs4
let emitter; const obs: Observable<number> = new Observable(e => emitter
= e); [1, 2, 3, 4].forEach(it => emitter.next(it)); obs.subscribe(it => console.log(it));
let emitter; const obs: Observable<number> = new Observable(e => emitter
= e); [1, 2, 3, 4].forEach(it => emitter.next(it)); obs.subscribe(it => console.log(it)); >ERROR TypeError: Cannot read property 'next' of undefined
let emitter; const obs: Observable<number> = new Observable(e => emitter
= e); obs.subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >1 >2 >3 >4
import { Observable } from ‘rxjs/Rx'; export class Service {
private stream: Observable<T> = new Observable(obs => this.emitter = obs) private emitter; public get onSteamEvent() { return this.steam; } private someMethod() { . . . this.emitter.next({someData}); } }
import { Observable } from ‘rxjs/Rx'; export class Service {
private stream: Observable<T> = new Observable(obs => this.emitter = obs).share(); private emitter; public get onSteamEvent() { return this.steam; } private someMethod() { . . . this.emitter.next({someData}); } }
HOT vs COLD Observables
var cold = new Observable((observer) => { var producer =
new Producer(); // have observer listen to producer here }); COLD
HOT var producer = new Producer(); var hot = new
Observable((observer) => { // have observer listen to producer here });
Multicasting
const obs: Observable<number> = new Observable(e => emitter = e);
obs.subscribe(it => console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it));
const obs: Observable<number> = new Observable(e => emitter = e);
obs.subscribe(it => console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >2 >3 >4 >5
const obs = new Observable<number>(e => emitter = e).share(); obs.subscribe(it
=> console.log(it)); obs.map(it => it + 1).subscribe(it => console.log(it)); [1, 2, 3, 4].forEach(it => emitter.next(it)); >1 >2 >2 >3 >3 >4 >5
Profit over Promise?
Observable > Promise • Observable is reusable • Observable is
cancellable • A lot of powerful operators • Hot & Cold observables • Merging a lot of observables • Multiple pipeline instead of only .then, .catch • Obs can become Promise :3
Subject
or BehaviourSubject AsyncSubject AnonymousSubject ReplaySubject
Every Subject is an Observable. Every Subject is an Observer.
let subj = new Subject(); subj.next(1); subj.subscribe(it => console.log(it)); subj.next(2);
>2
let lastNOperations = Infinity; let subj = new ReplaySubject(lastNOpearions); subj.next(1);
subj.subscribe(it => console.log(it)); subj.next(2); >1 >2
let subj = new BehaviorSubject(1); subj.subscribe(it => console.log(it)); subj.next(2); >1
>2
Careful
Subject will NOT be disposed after all subscribers disconnected Use
Subjects only in place, where two-way data flow is certainly needed!
Useful operations except map, reduce, filter, find
Distinct
Reduce
Repeat
Partition
Concat
Merge