Slide 1

Slide 1 text

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/

Slide 20

Slide 20 text

Operadores

Slide 21

Slide 21 text

create

Slide 22

Slide 22 text

from

Slide 23

Slide 23 text

fromEvent

Slide 24

Slide 24 text

filter

Slide 25

Slide 25 text

filter

Slide 26

Slide 26 text

map

Slide 27

Slide 27 text

map

Slide 28

Slide 28 text

mergeMap

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

mergeMap

Slide 31

Slide 31 text

concatMap

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

concatMap

Slide 34

Slide 34 text

switchMap

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

switchMap

Slide 37

Slide 37 text

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/