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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Danila Marchenkov
September 13, 2017
Education
0
100
Rxjs
Danila Marchenkov
September 13, 2017
Tweet
Share
More Decks by Danila Marchenkov
See All by Danila Marchenkov
angular6
sprit3dan
0
75
angular5
sprit3dan
0
54
angular#4
sprit3dan
0
160
angular#3
sprit3dan
0
46
angular#2
sprit3dan
0
38
Angular#1
sprit3dan
0
55
HTML 5 Canvas
sprit3dan
0
45
Angular #6
sprit3dan
0
69
Angular #5
sprit3dan
0
120
Other Decks in Education
See All in Education
【洋書和訳:さよならを待つふたりのために】第1章 出会いとメタファー
yaginumatti
0
220
HyRead2526
cbtlibrary
0
200
【ZEPホスト用メタバース校舎操作ガイド】
ainischool
0
170
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
【dip】「なりたい自分」に近づくための、「自分と向き合う」小さな振り返り
dip_tech
PRO
0
230
NUTMEG紹介スライド
mugiiicha
0
870
SJRC 2526
cbtlibrary
0
200
外国籍エンジニアの挑戦・新卒半年後、気づきと成長の物語
hypebeans
0
730
Evaluation Methods - Lecture 6 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.3k
XML and Related Technologies - Lecture 7 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
RGBでも蛍光を!? / RayTracingCamp11
kugimasa
2
370
栃木にいても「だいじ」だっぺ〜! 栃木&全国アジャイルコミュニティへの参加・運営の魅力
sasakendayo
1
140
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
432
66k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.6k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Building Applications with DynamoDB
mza
96
6.9k
A Tale of Four Properties
chriscoyier
162
24k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
300
Making Projects Easy
brettharned
120
6.6k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
730
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
120
Docker and Python
trallard
47
3.7k
Speed Design
sergeychernyshev
33
1.5k
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