HTML + javascript + Haskell = ELM, parte 7

Seguimos con el post anterior.

Agregaremos un par de funciones para contar la cantidad de interacciones con el mouse. En lenguajes funcionales como Elm, debes aprender trucos para manejar el estado. Hemos visto cómo las señales pueden ayudar a acceder a cosas como la posición del mouse que cambia con el tiempo y cómo usamos la recursividad para procesar listas. Gestionamos el estado por la forma en que estructuramos nuestras funciones. Las funciones de folds, que quizás conozcas de Lisp o Haskell, son un buen ejemplo. Toman una función de dos argumentos, un valor inicial y una lista. Aquí hay un ejemplo de foldl en Elm:

> foldl (+)  0  [1, 2, 3]
6 : number

Esto es lo que sucede en cada paso:

• fold (+) 0 [1, 2, 3]. fold toma el valor inicial de la lista, 1, y el acumulador, 0, y los suma, devolviendo 1, y usa ese número, con el resto de la lista, llamando a fold nuevamente.
• fold (+) 1 [2, 3]. Elm toma el valor más a la izquierda de la lista, 2, y el acumulador, 1, y los pasa a la función (+), devolviendo 3.
• fold (+) 3 [3]. Llamamos (+) con el acumulador 3 y el elemento de lista más a la izquierda de 3, devolviendo 6, y hemos terminado.

Ahora, creamos una señal con foldp. Esa señal agrega el acumulador, llamado presses, al valor x de la señal de Keyboard.arrows. Luego podemos asignar ese valor a la función show. Ahora, cuando ejecute la aplicación, obtendrá un total de presses. 

Usemos el mismo principio general para contar los movimientos del mouse. Signal.map aplica una señal a una función. Signal.foldp se pliega sobre una señal:

import Mouse

import Graphics.Element exposing (show)

count signal = Signal.foldp (\_ n -> n + 1) 0 signal

main = Signal.map show (count Mouse.position)

La función de conteo toma una señal y agrega una cada vez que la señal cambia. foldp funciona igual que foldl, pero en lugar de doblar una lista desde la izquierda, foldp se pliega a través del tiempo. Nuestra función foldp toma una función anónima que agrega uno a un valor, comienza con un valor inicial de 0 y proporciona una señal. Nuestra nueva señal tendrá valores que comienzan con 0 que aumentan cada vez que se actualiza la señal. Podemos cambiar fácilmente el programa para contar los clics del mouse:

import Mouse

import Graphics.Element exposing (show)

main = Signal.map show (count Mouse.clicks)

count signal = Signal.foldp (\_ n -> n + 1) 0 signal

En este caso, la función de conteo cuenta el número de actualizaciones de señal, que son clics del mouse. Puede comenzar a ver cómo podemos escribir código que respete las reglas de la programación funcional, pero que sea reactivo y fácil de entender.

Veamos cómo funcionarían las señales del teclado:

import Graphics.Element exposing (show)

import Keyboard

main = Signal.map show Keyboard.arrows

Map actualiza el texto cuando cambia la señal, por lo que obtenemos un programa limpio que nos dice el estado de las teclas de flecha, en una forma que podemos usar fácilmente. Como podemos componer con funciones, podemos ser más sofisticados.