HTML + javascript + Haskell = ELM, parte 6

Seguimos con el post anterior.

Elm fue construido desde cero para manejar los aspectos más difíciles del desarrollo de la interfaz de usuario. Se puede utilizar para crear una aplicación comercial con controles de interfaz de usuario o un juego, debe poder reaccionar ante los eventos. De hecho, todo lo que haces es una reacción a algún evento. El programa típico de JavaScript se basa en enviar eventos a través de funciones de callbacks, lo que hace que los programas sean mucho más receptivos pero a un costo. Son demasiado difíciles de leer. Aquí hay un ejemplo típico usando la biblioteca JQuery con JavaScript que le permite tomar la posición del mouse:

$(document).ready(function () {
       var position = {'x': 0, 'y': 0};
      $(document).bind('mousemove', function(event) {
                   position = {'x': event.pageX, 'y': event.pageY};
       });
       setInterval(function () {
      // custom position code
      }, seconds * 1000);
});

Comprender ese código requiere un poco de experiencia. Cuando se carga la página, recibimos una devolución de llamada lista. En ese momento, vinculamos el evento mousemove a una función que establece una variable de posición. Luego, a intervalos específicos, tenemos otra función de callback que utiliza la posición. Tenga en cuenta que nuestro código vincula funciones anónimas a eventos. Dicho de otra manera, estamos poniendo JavaScript a cargo de la organización del código. A esta estrategia de programación de adentro hacia afuera la llamamos inversión de control.

Para una característica tan trivial, ese código es demasiado complejo, pero es una compensación. Obtenemos una mejor capacidad de respuesta ya que este programa cambiará la posición del mouse cada vez que el usuario mueva el mouse. Cambiamos la simplicidad. El problema es que realmente necesitamos ambos.

import Graphics.Element exposing (..)

import Mouse

main = Signal.map show Mouse.position

La directiva de exposición nos permite mostrar sin especificar el módulo. Luego, haga clic en el botón de compilación. Verás una salida similar a esta:

(29, 162)

Eso es mucho más simple. Importamos los módulos Graphics.Element y Mouse, y luego declaramos la función principal.

Conceptualmente, la señal Mouse.position representa los valores de xey que varían con el tiempo. Signal.map aplica una señal a una sola función.

En el código anterior, la señal Mouse.position representa una tupla que contiene la posición del mouse a lo largo del tiempo. Nuestra función es show, que se convierte en texto.

Mouse.position se "disparará" cada vez que el mouse se mueva, y Signal.map volverá a evaluar show con la nueva posición del mouse. Curiosamente, el resultado es una nueva señal!

Mirando la parte inferior de la ventana, puede ver que la principal es en realidad una señal, una que mostramos en la pantalla. Eso significa que Elm actualizará la ventana cada vez que se mueva la posición del mouse.

No hay call back ni inversión de control. Simplemente usamos una señal, la convertimos a texto y mapeamos el valor actual cuando la señal cambia.