ReactiveX - escolha sua plataforma

Apresentação sobre duas libs de RX: RxJava e RxJS

Transcript

1. ReactiveX Escolha sua plataforma
3. Porque usar Rx?
4. 5 motivos 1. Intuitivo 2. Expansível 3. Código limpo 4. Concorrencia 5. Resolução de problemas
6. Analogia
7. Observable val waterObservable = Observable.just("rain water", "river water", "lake water")
8. Operator val cleanWater = waterObservable.map { water -> "Clean $water" }
9. Subscriber cleanWater.subscribe{ cleanWater -> Log.i("TAG", "Drink $cleanWater") }
10. 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") }
11. Com Rx Observable.fromIterable(waterSource) .withIndex() .filter { it.value != "" } .subscribe({ Log.i("checkin", "value: " + it) })
12. Exemplo de refatoração
13. 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("") } })
14. RxJava/RxBinding editText.textChanges().subscribe({ if (it.length != 0) editText.setText("") })
15. Principais Operadores
16. • Map • Zip • Filter • FlatMap • Take • Skip • Buffer • Concat • Replay • Merge
17. RxJava 2.0
18. Disposable/CompositeDisposable Representa um recurso descartável. Com composite podemos utilizar o mesmo objeto para vários recursos.
19. 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()
20. Flowable Trata problemas com grandes quantidades de dados.
21. 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") }
22. Single Um tipo de observável que trabalha apenas com onSuccess e onError.
23. Exemplo Single .getUsers() .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe({ Log.i("", "success") }, { Log.i("", "error") })
24. Completable O completable não precisa implementar um tipo de objeto para observar.
25. Exemplo interface APIClient { @PUT("my/api/updatepath") fun updateMyData(@Body data: MyData): Completable } apiClient.updateMyData(myUpdatedData) .subscribe({ // handle completion }, { throwable -> // handle error })
26. Maybe Semelhante ao Single e Completable, a diferença é que seu consumidor vai receber apenas 0 ou 1.
27. Exemplo Maybe.just(1) .map { v -> v + 1 } .filter { v -> v == 1 } .defaultIfEmpty(2) .test() .assertResult(2)
28. RxJS
29. Introdução O RxJS é uma biblioteca que nos permite criar e manipular facilmente fluxos de eventos e dados.
30. Exemplos
31. Event listeners var button = document.querySelector('button'); button.addEventListener('click', () => console.log('Clicked!'));
32. Event listeners var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click').subscribe(() => console.log('Clicked!'));
33. 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(); }});
34. 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`));
35. Gostou?
36. Vamos usar um Observable
37. Vamos imaginar o consumo de um web service bem comum.
38. Codigo em Angular getUsers(): Promise<User[]>{ return fetch(myApiUrl) .then(res=>res.json()) .catch(err=>{ throw new Error(err.message); }); }
39. Com Rx @Injectable() class UserService { ... getUsers(): Observable<User[]> { return this.http.get(myApiUrl) .map(res=>res.json()) .catch(err=>{ throw new Error(err.message); }); } … }
40. Ok, mas qual a vantagem?
41. Operadores
42. Subscribe getUsers() { this.userService.getUsers() .subscribe( users => this.users = users, error => /* Tratamos erros aqui */);
43. Criando Observables var observable = Rx.Observable.create(function subscribe(observer) { var id = setInterval(() => { observer.next('hi') }, 1000); });
44. Inscrevendo-se para Observables observable.subscribe(x => console.log(x));
45. 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 } });
46. Cancelando assinatura var observable = Rx.Observable.from([10, 20, 30]); var subscription = observable.subscribe(x => console.log(x)); subscription.unsubscribe();
47. 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));
48. Map var clicks = Rx.Observable.fromEvent(document, 'click'); var positions = clicks.map(ev => ev.clientX); positions.subscribe(x => console.log(x));
49. Agora é só estudar e aplicar
50. 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
51. Obrigado! @ruitermatos55