Programación
Reactiva con RxJS
WordCamp San José 2019
Alfredo Bonilla - @brolag
Slide 2
Slide 2 text
Hola
Soy Alfredo Bonilla.
Desarrollador de Software.
Co-organizdor de Angular
Costa Rica.
Colaborador en GDG Pura
Vida.
Quejas y sugerencias ->
@brolag
Slide 3
Slide 3 text
Manejo de llamados asíncronos
Callbacks
Promises
Async / Await
Slide 4
Slide 4 text
Callbacks
• Un calback es una
función que toma
como argumento
otra función y la
ejecuta.
Slide 5
Slide 5 text
Callbacks
• Sin embargo tienen
varios
inconvenientes…
Slide 6
Slide 6 text
Promises
• Una promesa
representa un valor
que puede estar
disponible ahora,
en el futuro o
nunca.
• Tienen 3 posibles
estados:
• Pending
• Fulfilled
• Rejected
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
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.
Slide 9
Slide 9 text
¿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.
Slide 10
Slide 10 text
¿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.
Slide 11
Slide 11 text
¿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”
Slide 12
Slide 12 text
Patrones de
diseño en RxJS
Slide 13
Slide 13 text
Patrón
Observador
Slide 14
Slide 14 text
Patrón
Observador
Slide 15
Slide 15 text
Patrón
Iterador
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
Observable
Slide 18
Slide 18 text
Subscripciones
Slide 19
Slide 19 text
Visualización de Obsevables
https://rxmarbles.com/