Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programación Reativa con RxJS

Programación Reativa con RxJS

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

September 07, 2019
Tweet

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

  29. None
  30. mergeMap

  31. concatMap

  32. None
  33. concatMap

  34. switchMap

  35. None
  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/