FRAMEWORK de Programación reactiva
Quienes usan RX
ProblemA
¿Qué tan difícil es manejar datos asincrónicos?
SoluCión?
No me importa si tienes los datos o no, solo continua
No esperar a los datos y continuar procesando
Solución?
Espero que los datos lleguen pronto, esperaba que llegaran hace mucho tiempo
funciones callback
SoluCión
Te doy mi palabra que te daré un resultado, o al menos te diré si fallé al intentarlo
Promesas
SoluCión
Promesas
MultipleS veces
Observable
Cómo funciona
GENERATOR
OBSERVABLE
PROMISE
FUNCTION
Synchonous
Asynchonous
Multiple
Single
Programación reactiva
¿Qué es programación reactiva?
Microsoft's Rx terminology
KISS
Programación reactiva es programar con flujo de datos asincrónicos
ReactivA en Acción
Cadenas de eventos son en realidad un flujo de eventos asincrónicos, donde puedes observar y hacer algunos cambios
Programación reactiva es esa misma idea con esteroides
Flujo de datos
Eres capaz de crear un flujo de datos a partir de cualquier cosa
variables, entradas de usuario, propiedades, caches, estructuras de datos, etc.
funciones y más
Te dan una increíble conjunto de funciones que te permiten combinar filtrar y hacer cambios sobre cualquiera de estos flujos de datos
Conceptos IMPORTATes
-
Funciones puras:
-
El mismo resultado con los mismos parámetros dados
-
El mismo resultado con los mismos parámetros dados
-
Funciones de orden superior:
-
Recibes Funciones => Retornas Funciones
-
Recibes Funciones => Retornas Funciones
-
Iterador:
-
Acceso a datos de manera secuencial
-
Acceso a datos de manera secuencial
-
Observador:
- Notifica cambios, relación uno a muchos
Ventajas
Los Sistemas Reactivos son:
- flexibles y escalables
- altamente responsivo
- tolerante a fallos
- evolutivo
Flexible
Cuando un cambio es requerido la respuesta es manejada por nuestras herramientas
Cambios en un flujo de datos son fáciles de hacer
Responsivo
El usuario tendrá una respuesta inmediata
No hay demora entre una acción y su resultado
Evolutivo
La aplicación puede crecer y expandirse, incluyendo nuevas funcionalidades de forma rápida
Hacer el código fácil de mantener y mejorar
Overview
Overview
Overview
Overview
Overview
Overview
http://reactivex.io/documentation/operators/combinelatest.html
Rxjs marbles
http://rxmarbles.com/
RX Más que solo JS
http://reactivex.io/
RX Más que solo JS
Desventajas
Aprenderlo es difícil
Dominarlo lo es aún más
DESVENTAJAS
la master sword - empieza con poco poder
DESVENTAJAS
No sabes como usarla
solo golpeas sin pensarlo
Entrenas
(Trial of the Sword)
DESVENTAJAS
A través del entrenamiento incrementas su poder
DESVENTAJAS
La master sword se convierte el arma más poderosa que puedes usar
DESVENTAJAS
-
Solo un conjunto de herramientas no sabes como utilizarlas
-
Difícil de hacer debugging
-
Aprender require paciencia y experimentación
-
Difícil de agregar observables / programación reactiva a una aplicación en producción
What´s New
- https://github.com/tc39/proposal-observable
Version 5 vs 6
El uso de funciones sobre los flujos de datos se hace a traves de la función .pipe() (introducida en v5.5)
Solo existen dos indices de importación en la versión 6, el paquete 'rxjs' y el paquete 'rxjs/operators'
Version 5 vs 6
-
Bundles más pequeños
-
Mejora el rendimiento de versiones anteriores de RxJS
-
Da más modularidad a la estructura de archivos
- Da mejores 'call stacks' para hacer el debugging más fácil.
Sugerencias
-
Mantener los observables tan simple como sea posible
-
Mantener la consistencia de las fuentes datos
-
Crear modelos que representen los datos
- No sobrecargar los observados con demasiadas funciones
Gracias!
Referencias
- http://slides.com/santiagorodriguezsordo/functional-reactive-programming-spanish
- https://michalzalecki.com/use-rxjs-with-react/
- https://medium.com/frintjs/deep-dive-into-observed-components-with-react-js-and-frintjs-e2726eaeff2b
- https://x-team.com/blog/rxjs-observables/
- https://xgrommx.github.io/rx-book/index.html
- https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
Rxjs español
By Mateo Restrepo Restrepo
Rxjs español
Presentación acerca del framework rxjs
