Recomendados
Más contenido relacionado
Similar a Rx js
Similar a Rx js (20)
Más de Germán Küber
Más de Germán Küber (20)
Último
Último (20)
Rx js
- 1. ¿Programación reactiva? ¿Qué es RxJs? @germankuber http://germankuber.com.ar http://net-baires.com.ar
- 2. ¿Qué es ReactiveX? • Una API para la programación asíncrona con flujos observables • Patrón OBSERVER • Patrón ITERATOR • Programación funcional con Colecciones
- 3. ¿Por qué Observables? • Tratar flujo de eventos asincrónicos con las mismas operaciones que tratamos colecciones • Código mas legible • Código menos propenso a errores • Soportar emisión de valores futuros
- 4. Soporte • Java: RxJava • JavaScript: RxJS • C#: Rx.NET • C#(Unity): UniRx • Scala: RxScala • Clojure: RxClojure • C++: RxCpp • Lua: RxLua • Ruby: Rx.rb • Python: RxPY • Go: RxGo • Groovy: RxGroovy • JRuby: RxJRuby • Kotlin: RxKotlin • Swift: RxSwift • PHP: RxPHP • Elixir: reaxive • Dart: RxDart
- 5. Registro de eventos tradicional var button = document.querySelector('button’); button.addEventListener('click', () => console.log('Clicked!')) var button = document.querySelector('button’); Rx.Observable.fromEvent(button, 'click’) .subscribe(() => console.log('Clicked!') Registro de eventos con RxJs
- 6. Funciones impuras var count = 0; var button = document.querySelector('button'); button.addEventListener('click', () => console.log(`Clicked ${++count} times`)); var button = document.querySelector('button’); Rx.Observable.fromEvent(button, 'click’) .scan(count => count + 1, 0) .subscribe(count => console.log(`Clicked ${count}`)); Funciones puras
- 7. Marble diagrams 1 4a2 10 20 multiplyByTen
- 8. Conceptos • Observable • Observer • Subscription • Operators • Subject • Schedulers
- 9. Observable Representa la idea de una colección con valores futuros var observable = Rx.Observable.create(function (observer) { observer.next(1); observer.next(2); observer.next(3); setTimeout(() => { observer.next(4); observer.complete(); }, 1000); }); 1 432
- 10. Pull • El consumer decide cuando recibe la información del producer • El producer no sabe cuando entregara los datos al consumer • Todas las funciones implementan un Pull System • ES2015 introdujo Generator Function y Iterators
- 11. Push • El producer determina cuando le enviar la información al consumer • El consumer no sabe cuando va a recibir la información • Promesas es el sistema Push mas usado hoy en día
- 12. Push Vs Pull Single Multiple Pull Function Iterator Push Promise Observable Producer Consumer Pull Pasivo: produce datos cuando se solicita Activo: decide cuándo se solicitan los datos. Push Activo: produce datos a su propio ritmo. Pasivo: reacciona a los datos recibidos.
- 13. Observer Sabe como escuchar los valores retornados por el observable console.log('Antes de suscribirme’); observable.subscribe({ next: x => console.log('Valor : ' + x), error: err => console.error('Error: ' + err), complete: () => console.log('Completo'), }); console.log('Despues de suscribirme’); 1 432
- 14. Observable + Observer 1 432 Antes de suscribirme Valor : 1 Valor : 2 Valor : 3 Despues de suscribirme Valor : 4 Completo
- 15. var observable = Rx.Observable.from([10, 20, 30]); var subscription = observable.subscribe(x => console.log(x)); // Mas tarde: subscription.unsubscribe(); Subscription Representa la ejecución de un Observable, es principalmente útil para cancelar la ejecución.
- 16. Subject Es el equivalente a un EventEmitter, y la única forma de difundir un valor o evento entre múltiples observadores. var subject = new Rx.Subject(); subject.subscribe({ next: (v) => console.log('observerA: ' + v) }); subject.subscribe({ next: (v) => console.log('observerB: ' + v) }); subject.next(1); subject.next(2);
- 17. Operators • Funciones que permiten un estilo de programación funcional • Podemos manipular colecciones • No cambian la instancia observable existente. En su lugar, devuelven un nuevo Observable • Son métodos del tipo Observable, como .map (...), .filter (...), .merge (...), etc.
- 18. Creation Operators • ajax • bindCallback • bindNodeCallback • create • defer • empty • from • fromEvent • fromEventPattern • fromPromise • generate • interval • never • of • repeat • repeatWhen • range • throw • timer
- 19. Transformation Operators • buffer • bufferCount • bufferTime • bufferToggle • bufferWhen • concatMap • concatMapTo • exhaustMap • expand • groupBy • map • mapTo • mergeMap • mergeMapTo • mergeScan • pairwise • partition • pluck • scan • switchMap • switchMapTo • window • windowCount • windowTime • windowToggle • windowWhen
- 20. Filtering Operators • debounce • debounceTime • distinct • distinctKey • distinctUntilChanged • distinctUntilKeyChang ed • elementAt • filter • first • ignoreElements • audit • auditTime • last • sample • sampleTime • single • skip • skipUntil • skipWhile • take • takeLast • takeUntil • takeWhile • throttle • throttleTime
- 21. Operador - Merge A CB merge ED F A CB ED F
- 22. Operador - Filter 0 321 filter(x => x % 2 === 1) 4 1 3
- 23. Operador - Skip 0 321 skip(3) 4 43
- 24. ¿ Y ahora ?
- 25. Recursos 30 días con RxJS https://medium.com/@jorgeucano Reactivex http://reactivex.io/rxjs/manual/overview.html Slack http://slack.meetupjs.com.ar/
Notas del editor
- What makes RxJS powerful is its ability to produce values using pure functions. That means your code is less prone to errors.
- Es una colección de callbacks que “sabe” escuchar los valores entregados por el Observable
- Representa la ejecución de un Observable, es principalmente útil para cancelar la ejecución.
- Es el equivalente a un EventEmitter, y la única forma de multi-difundir un valor o evento a varios observers.