Programación Reativa con RxJS

Ejemplos: https://stackblitz.com/edit/taller-rxjs

Transcript

1. Programación Reactiva con RxJS WordCamp San José 2019 Alfredo Bonilla - @brolag
2. Hola Soy Alfredo Bonilla. Desarrollador de Software. Co-organizdor de Angular Costa Rica. Colaborador en GDG Pura Vida. Quejas y sugerencias -> @brolag
3. Manejo de llamados asíncronos Callbacks Promises Async / Await
4. Callbacks • Un calback es una función que toma como argumento otra función y la ejecuta.
5. Callbacks • Sin embargo tienen varios inconvenientes…
6. Promises • Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. • Tienen 3 posibles estados: • Pending • Fulfilled • Rejected
7. Promises • Sin embargo las promesas presentan un problema: solo producen un valor único. • En un escenario complejo donde existan eventos recurrentes, o flujos de datos, ya que es necesario manejar por separado cada evento.
8. Async / Await • Para usar async/await debe mos declarar una función con el modificador async. • Esto nos permite añadir el modificador await dela nte de la expresión asíncrona en dicha función, deteniendo la ejecución hasta que se resuelva la expresión.
9. ¿Qué es la programación reactiva? • Es un paradigma de programación que se preoucupa por los flujos de datos y la propagación del cambio. • Según el reactive manifesto, los sistemas reactivos deben ser: • Responsivos. • Resilientes. • Elásticos. • Orientados a mensajes.
10. ¿Qué son los streams? • Un stream podría definirse como una colección de elementos futuros. • La diferencia consiste en que los streams no están disponibles de forma síncrona y tampoco podemos predecir su tamaño. • Un stream puede provenir de varias fuentes: • Eventos del DOM. • Animaciones. • HTTP Requests. • WebSockets.
11. ¿Qué es RxJS? • RxJS es una implementación para JavaScript de las Reactive Extensions. • Desarrolladas por Erik Meijer en Microsoft en el 2009. • Es una librería para trabajar con streams mediante el uso de observables. • “El Lodash de los eventos asíncronos”
12. Patrones de diseño en RxJS
13. Patrón Observador
14. Patrón Observador
15. Patrón Iterador
16. Observables • Soporte para enviar mensajes entre publishers y subscribers. • Ofrecen beneficios significativos para manejar la asincronía. • Los observables son lazy (perezosos). No comienzan a emitir datos hasta que te suscribes a ellos. • Un observable puede indicar cuándo se completa la secuencia. • Nos permiten declarar cómo reaccionar a una secuencia de elementos, en lugar de tener que reaccionar a los elementos de forma individual.
17. Observable
18. Subscripciones
19. Visualización de Obsevables https://rxmarbles.com/
20. Operadores
21. create
22. from
23. fromEvent
24. filter
25. filter
26. map
27. map
28. mergeMap
30. mergeMap
31. concatMap
33. concatMap
34. switchMap
36. switchMap
37. Recursos • Ejemplos de código: • https://stackblitz.com/edit/taller-rxjs • https://github.com/brolag/taller-rxjs-starter • Referencias • https://softwarecrafters.io/javascript/introduccion-programacion-reactiva- rxjs • https://pablomagaz.com/blog/combinando-observables-en-rxjs • https://medium.com/@nicowernli/diferencias-entre-map-flatmap-y- switchmap-en-rxjs-64662e90f701 • Herramientas • https://www.learnrxjs.io/ • https://rxviz.com/ • https://rxmarbles.com/