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
91
Rxjs
Danila Marchenkov
September 13, 2017
Tweet
Share
More Decks by Danila Marchenkov
See All by Danila Marchenkov
angular6
sprit3dan
0
67
angular5
sprit3dan
0
48
angular#4
sprit3dan
0
150
angular#3
sprit3dan
0
37
angular#2
sprit3dan
0
32
Angular#1
sprit3dan
0
49
HTML 5 Canvas
sprit3dan
0
41
Angular #6
sprit3dan
0
63
Angular #5
sprit3dan
0
110
Other Decks in Education
See All in Education
前期教育実習事前指導0221
naradai
0
130
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
執筆テーマの決め方
sapi_kawahara
1
180
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
保育とふりかえりをコネクト! / connect childcare and retrospectives!
psj59129
1
150
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Project Sprint 学生版(入門編)
copilot
PRO
0
180
[SemanaX-UFCG-2024] Guia descomplicado de entrevistas FAANG
hugaomarques
2
450
Microsoft Office 365
matleenalaakso
0
1.5k
MonacaEducation導入手引き2024年第1版
asial_edu
1
150
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Become a Pro
speakerdeck
PRO
11
4.5k
Navigating Team Friction
lara
178
13k
Infographics Made Easy
chrislema
238
18k
Designing the Hi-DPI Web
ddemaree
276
33k
Web development in the modern age
philhawksworth
202
10k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Six Lessons from altMBA
skipperchong
21
3k
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