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
ReactiveX - escolha sua plataforma
Search
Ruiter Matos
December 08, 2017
Technology
1
37
ReactiveX - escolha sua plataforma
Apresentação sobre duas libs de RX: RxJava e RxJS
Ruiter Matos
December 08, 2017
Tweet
Share
More Decks by Ruiter Matos
See All by Ruiter Matos
Multi Módulos em projetos Android
ruiter
1
21
Android: Passado, presente e futuro.
ruiter
1
37
Other Decks in Technology
See All in Technology
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
PO初心者が考えた ”POらしさ”
nb_rady
0
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
100
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
240
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
370
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
180
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
140
OPENLOGI Company Profile for engineer
hr01
1
34k
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Visualization
eitanlees
146
16k
Producing Creativity
orderedlist
PRO
346
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Rails Girls Zürich Keynote
gr2m
94
14k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A better future with KSS
kneath
239
17k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Docker and Python
trallard
44
3.5k
Transcript
ReactiveX Escolha sua plataforma
None
Porque usar Rx?
5 motivos 1. Intuitivo 2. Expansível 3. Código limpo 4.
Concorrencia 5. Resolução de problemas
None
Analogia
Observable val waterObservable = Observable.just("rain water", "river water", "lake water")
Operator val cleanWater = waterObservable.map { water -> "Clean $water"
}
Subscriber cleanWater.subscribe{ cleanWater -> Log.i("TAG", "Drink $cleanWater") }
Esqueça (for, while, if else… bla,bla) val waterSource = arrayListOf("rain
water", "river water", "lake water") for (water in waterSource) { Log.i("TAG", "Drink clean $cleanWater") }
Com Rx Observable.fromIterable(waterSource) .withIndex() .filter { it.value != "" }
.subscribe({ Log.i("checkin", "value: " + it) })
Exemplo de refatoração
Código Android editText.addTextChangedListener(object : TextWatcher { override fun afterTextChanged(s: Editable)
{} override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {} override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) { if (s.length != 0) editText.setText("") } })
RxJava/RxBinding editText.textChanges().subscribe({ if (it.length != 0) editText.setText("") })
Principais Operadores
• Map • Zip • Filter • FlatMap • Take
• Skip • Buffer • Concat • Replay • Merge
RxJava 2.0
Disposable/CompositeDisposable Representa um recurso descartável. Com composite podemos utilizar o
mesmo objeto para vários recursos.
Exemplo val disposable = Single .getUsers() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe({ Log.i("",
"success") }, { Log.i("", "error") }) disposable.dispose() var copositeDisposable = CompositeDisposable() copositeDisposable.add(Single .getUsers() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe({ Log.i("", "success") }, { Log.i("", "error") })) copositeDisposable.clear()
Flowable Trata problemas com grandes quantidades de dados.
Exemplo Flowable.create<Any>({ subscriber -> var count = 0 while (true)
{ count++ subscriber.onNext(count.toString() + "\n") } }, BackpressureStrategy.DROP) .observeOn(Schedulers.newThread(), false, 3) .subscribe( { `val` -> Thread.sleep(1000) println(`val`) }, { err -> println("error ") err.printStackTrace() } ) { println("completed") }
Single Um tipo de observável que trabalha apenas com onSuccess
e onError.
Exemplo Single .getUsers() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe({ Log.i("", "success") }, {
Log.i("", "error") })
Completable O completable não precisa implementar um tipo de objeto
para observar.
Exemplo interface APIClient { @PUT("my/api/updatepath") fun updateMyData(@Body data: MyData): Completable
} apiClient.updateMyData(myUpdatedData) .subscribe({ // handle completion }, { throwable -> // handle error })
Maybe Semelhante ao Single e Completable, a diferença é que
seu consumidor vai receber apenas 0 ou 1.
Exemplo Maybe.just(1) .map { v -> v + 1 }
.filter { v -> v == 1 } .defaultIfEmpty(2) .test() .assertResult(2)
RxJS
Introdução O RxJS é uma biblioteca que nos permite criar
e manipular facilmente fluxos de eventos e dados.
Exemplos
Event listeners var button = document.querySelector('button'); button.addEventListener('click', () => console.log('Clicked!'));
Event listeners var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click').subscribe(() => console.log('Clicked!'));
Flow var count = 0; var rate = 1000; var
lastClick = Date.now() - rate; var button = document.querySelector('button'); button.addEventListener('click', () => { if (Date.now() - lastClick >= rate) { console.log(`Clicked ${++count} times`); lastClick = Date.now(); }});
Em RxJS var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .throttleTime(1000) .scan(count
=> count + 1, 0) .subscribe(count => console.log(`Clicked ${count} times`));
Gostou?
Vamos usar um Observable
Vamos imaginar o consumo de um web service bem comum.
Codigo em Angular getUsers(): Promise<User[]>{ return fetch(myApiUrl) .then(res=>res.json()) .catch(err=>{ throw
new Error(err.message); }); }
Com Rx @Injectable() class UserService { ... getUsers(): Observable<User[]> {
return this.http.get(myApiUrl) .map(res=>res.json()) .catch(err=>{ throw new Error(err.message); }); } … }
Ok, mas qual a vantagem?
Operadores
Subscribe getUsers() { this.userService.getUsers() .subscribe( users => this.users = users,
error => /* Tratamos erros aqui */);
Criando Observables var observable = Rx.Observable.create(function subscribe(observer) { var id
= setInterval(() => { observer.next('hi') }, 1000); });
Inscrevendo-se para Observables observable.subscribe(x => console.log(x));
Executando Observables var observable = Rx.Observable.create(function subscribe(observer) { try {
observer.next(1); observer.next(2); observer.next(3); observer.complete(); } catch (err) { observer.error(err); // delivers an error if it caught one } });
Cancelando assinatura var observable = Rx.Observable.from([10, 20, 30]); var subscription
= observable.subscribe(x => console.log(x)); subscription.unsubscribe();
Mais exemplos function multiplyByTen(input) { var output = Rx.Observable.create(function subscribe(observer)
{ input.subscribe({ next: (v) => observer.next(10 * v), error: (err) => observer.error(err), complete: () => observer.complete() }); }); return output; } var input = Rx.Observable.from([1, 2, 3, 4]); var output = multiplyByTen(input); output.subscribe(x => console.log(x));
Map var clicks = Rx.Observable.fromEvent(document, 'click'); var positions = clicks.map(ev
=> ev.clientX); positions.subscribe(x => console.log(x));
Agora é só estudar e aplicar
Referencias • http://reactivex.io/ • https://github.com/balamaci/rxjava-walkthrough • http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map • https://medium.com/tableless/entendendo-rxjs-observable-com-angular-6f607a9a6a00
Obrigado! @ruitermatos55