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
29
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
14
Android: Passado, presente e futuro.
ruiter
1
30
Other Decks in Technology
See All in Technology
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
130
On Your Data を超えていく!
hirotomotaguchi
2
730
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
140
Azureの基本的な権限管理の勉強会
yhana
1
1.6k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
5
1.1k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
470
ルーターでプレゼンする
puhitaku
1
3k
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.3k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
580
require(ESM)とECMAScript仕様
uhyo
4
910
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
130
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
6
1.3k
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Producing Creativity
orderedlist
PRO
338
39k
Documentation Writing (for coders)
carmenintech
61
4k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Ruby is Unlike a Banana
tanoku
96
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Six Lessons from altMBA
skipperchong
22
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Adopting Sorbet at Scale
ufuk
69
8.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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