Hola!
Soy Luis Fernando
@ElCuy
Y esto no es Comic Sans MS
Slide 3
Slide 3 text
Agenda
✘ Introducción a la programación funcional
✘ Programación funcional en Javascript
✘ Operaciones asíncronas
✘ Preguntas
Slide 4
Slide 4 text
Programación Funcional
f(x)
Slide 5
Slide 5 text
Los programas deben ser
escritos para que la gente los
lea, y sólo incidentalmente
para que las máquinas los
ejecuten
Albert Einstein
Harold Abelson
Slide 6
Slide 6 text
Funciones
✘ Relaciona un conjunto de entrada con un conjunto de salidas
✘ Cada valor de entrada tiene exactamente un valor de salida
x y
0 0
1 1
2 4
3 9
Slide 7
Slide 7 text
Funciones en Javascript
✘ Entrada: Argumento(s) Salida: Valor de retorno
✘ Pueden estar asociadas a un nombre o ser anónimas (Lambdas)
Slide 8
Slide 8 text
Pureza
✘ Produce la misma salida siempre para una entrada específica
✘ Se puede reemplazar la llamada a la función por su valor de retorno
(transparencia referencial)
✘ No produce efectos secundarios
Slide 9
Slide 9 text
Funciones de Orden Superior
✘ Pueden recibir funciones como parámetros y/o retornar funciones
Slide 10
Slide 10 text
Inmutabilidad
Slide 11
Slide 11 text
En Resumen...
✘ Funciones pequeñas de responsabilidad única
✘ No hay efectos colaterales, menor riesgo de bugs
✘ No hay mutación, menor riesgo de bugs
✘ Facilita el refactoring
Slide 12
Slide 12 text
Javascript
Slide 13
Slide 13 text
Map
✘ Ejecuta una función sobre los elementos de una lista y devuelve una
nueva lista con el resultado
Slide 14
Slide 14 text
Filter
✘ Ejecuta una función (predicado) sobre los elementos de una lista y
conserva aquellos para los que dicha función devuelva “true”
Slide 15
Slide 15 text
Reduce
✘ Ejecuta una función sobre los elementos de una lista y guarda el valor de
retorno en un acumulador. Finalmente devuelve el valor acumulado
Slide 16
Slide 16 text
Librerías para FP en Javascript
Functional.js
Ramda.js
Lodash
Slide 17
Slide 17 text
Composición de Funciones
Slide 18
Slide 18 text
Composición de Funciones
Se puede escribir de
arriba hacia abajo
con R.pipe
Slide 19
Slide 19 text
Composición de Funciones
“Putting the Fun
in FP”
“putting-the-fun-in-fp”
Slide 20
Slide 20 text
Operaciones Asíncronas
Basado en “What the heck is the event loop anyway?” de Philip Roberts - JSConf EU 2014
Slide 21
Slide 21 text
Javascript
Es un lenguaje
de
un solo hilo,
sin interrupción,
asíncrono
y
concurrente
Tiene una
pila de ejecución,
un
bucle de eventos
una
cola de callbacks
acceso a
Otras APIs
(Y algunas otra cosas)
Slide 22
Slide 22 text
Gracias!
Slide 23
Slide 23 text
Javascript
Es un lenguaje
de
un solo hilo,
sin interrupción,
asíncrono
y
concurrente
Tiene una
pila de ejecución,
un
bucle de eventos
una
cola de callbacks
acceso a
Otras APIs
(Y algunas otra cosas)
Slide 24
Slide 24 text
Un solo hilo?
Pila de Ejecución
main()
one()
two()
three()
console.log(“Hello...”)
Slide 25
Slide 25 text
El problema es que...
Pila de Ejecución
main()
one()
two()
three()
superHeavySyncFn()
render
Slide 26
Slide 26 text
Callback
✘ Función que se pasa a otra función como argumento
✘ Es ejecutada luego de algún tipo de evento, generalmente asíncrono
Slide 27
Slide 27 text
¿Cómo funciona Javascript?
Pila de Ejecución Web APIs
document
XMLHttpRequest
setTimeout
Bucle de Eventos
Cola de Callbacks
Slide 28
Slide 28 text
Asincronía al Rescate
Pila de Ejecución Web APIs
Cola de Callbacks
main()
setTimeout(cb, 1000)
timer(...) cb
cb
cb() ↺
Slide 29
Slide 29 text
✘ Hello
✘ Goodbye
✘ Hello again
✘ Hello
✘ Hello again
✘ Goodbye
setTimeout(..., 0) ?
Slide 30
Slide 30 text
Manejo de Errores
✘ Convención de Node.js: Error first
✘ Si no existe error se procesan los datos
Slide 31
Slide 31 text
Encadenando Llamadas Asíncronas
Callback Hell
Slide 32
Slide 32 text
Promesas
Slide 33
Slide 33 text
Pro s...
… so r as
Tor t - 1977
Slide 34
Slide 34 text
Qué es una Promesa?
✘ Objeto para computación asíncrona
✘ Representa el resultado eventual de una operación asíncrona
✘ Sirve como un “placeholder” donde se pueden materializar dos
valores distintos:
○ Valor de un resultado exitoso
○ Valor de la razón del error
Slide 35
Slide 35 text
Estados de una Promesa
✘ Pendiente: Cuando el resultado todavía no se conoce porque la operación
asíncrona no ha terminado
✘ Resuelta: Cuando la operación terminó exitosamente y se tiene un valor
✘ Rechazada: Cuando la operación asíncrona falló y la promesa no se puede
completar. Incluye el motivo del error
Pendiente
Resuelta
Rechazada
Valor
Error
Slide 36
Slide 36 text
Resolviendo una Promesa
Slide 37
Slide 37 text
Obteniendo el Valor de una Promesa Resuelta
...luego de 2 segundos (aprox)
Slide 38
Slide 38 text
Encadenando Promesas
✘ La cadena continúa con .then
✘ Recibe el valor de salida de la
anterior función
✘ Similar a composición
✘ En algunas librerías existe .tap,
que permite acceder a la
salida anterior sin romper la
cadena
Slide 39
Slide 39 text
Manejo de Errores
✘ La función .catch() maneja los
errores de la cadena de
promesas.
✘ La cadena se rompe cuando
alguna promesa es rechazada
✘ Desde catch se puede obtener
el objeto de error
Slide 40
Slide 40 text
Coordinando Múltiples Promesas
Cuando necesito conocer el resultado de
todas las promesas
Promise.all
Cuando necesito conocer solo el resultado de
la primera promesa finalizada
Promise.race
Slide 41
Slide 41 text
Librerías para Promesas
Q Bluebird
Slide 42
Slide 42 text
Cuando necesito conocer el resultado de
un número fijo de promesas
Promise.join
Implementación de map para promesas. Se puede
usar en listas mixtas (Promesas / valores)
Promise.map
Slide 43
Slide 43 text
Promisify
Convierte en Promesa a una función basada en callback