Comandos y suscripciones

Hemos visto cómo manejar interacciones con mouse y teclado usando la Arquitectura Elm, pero ¿qué tal si queremos comunicarnos con un servidor? ¿O generar un número al azar?

Para responder estas preguntas, nos va a servir saber más sobre cómo funciona la Arquitectura Elm detrás de bambalinas. Vamos a ver por qué las cosas funcionan un poco diferente en comparación con otros lenguajes como JavaScript, Python, etc.

sandbox

No me he referido directamente al hecho, pero hasta ahora todos nuestros programas han usado Browser.sandbox. Le suplimos un Model inicial, y describimos cómo actualizarlo (update) y visualizarlo (view).

Podemos considerar que lo que Browser.sandbox hace es configurar un sistema así:

Nosotros operamos dentro del contexto Elm, escribiendo funciones y transformando datos. Éste se vincula con el sistema de ejecución de Elm. El sistema de ejecución decide cómo eficientemente dibujar el Html, revisando si hubo cambios y realizando la más mínima posible modificación al DOM. También escucha cuando alguien hace clic en un botón o escribe en un campo de texto. Estas acciones las convierte en mensajes Msg, y las provee a nuestro código Elm.

Al separar limpiamente toda modificación al DOM, se vuelve posible hacer optimizaciones muy contundentes. Es gran parte de por qué Elm es una de las opciones más rápidas disponibles.

element

En los próximos ejemplos vamos a usar Browser.element para crear programas. Éste introduce los conceptos comando y suscripción, que nos permiten interactuar con el mundo exterior.

Podemos considerar que Browser.element configura un sistema así:

Además de producir valores Html, nuestros programas también entregarán valores Cmd y Sub al sistema de ejecución. Bajo esta configuración, nuestros programas pueden dar comandos al sistema de ejecución para que realice solicitudes HTTP, o que genere un número al azar. También pueden suscribirse a actualizaciones del reloj.

Creo que los comandos y las suscripciones hacen más sentido cuando vemos ejemplos, así que hagamos justamente eso.

Nota 1: Algunos lectores podrán preocuparse del tamaño de los archivos producidos. “¿Sistema de ejecución? Suena pesado”. Pero en verdad, ¡no lo es! De hecho, Elm exporta archivos extremadamente pequeños si los comparamos con otras alternativas populares.

Nota 2: Vamos a usar paquetes de package.elm-lang.org en los siguientes ejemplos. Ya hemos usado un par:

• elm/core
• elm/html

Pero ahora vamos a hacer uso de algunos más complejos:

• elm/http
• elm/json
• elm/random
• elm/time

Hay muchísimos otros paquetes en package.elm-lang.org. Cuando empieces a desarrollar tus propios programas en tu entorno local, seguramente vas a ejecutar algunos comandos como estos en tu terminal:

elm init
elm install elm/http
elm install elm/random

Eso configurará un archivo elm.json con las dependencias elm/http y elm/random.

En cada uno de los siguientes ejemplos voy a nombrar los paquetes en uso, así que espero que te aporte un poco de contexto sobre cómo funciona todo esto.