Otra vez, la Arquitectura Elm

 Se acuerdan de este post, puede que te resulte más fácil ver cómo encajan en el diagrama que vimos en otro post anterior:

Elm comienza mostrando el valor inicial en pantalla. A partir de ahí, entras en este bucle:

1. Esperar la entrada del usuario.
2. Enviar un mensaje para actualizar.
3. Producir un nuevo modelo.
4. Llamar a la vista para obtener el nuevo HTML.
5. Mostrar el nuevo HTML en pantalla.
6. ¡Repetir!

Esta es la esencia de la arquitectura Elm. Cada ejemplo que veamos a partir de ahora será una ligera variación de este patrón básico.

Ejemplo de una Aplicación en Elm

Nuestro primer ejemplo es un contador que se puede incrementar o decrementar:

-- Press buttons to increment and decrement a counter.

--

-- Read how it works:

--   https://guide.elm-lang.org/architecture/buttons.html

--

import Browser

import Html exposing (Html, button, div, text)

import Html.Events exposing (onClick)

-- MAIN

main =

  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model = Int

init : Model

init =  0

-- UPDATE

type Msg  = Increment  | Decrement

update : Msg -> Model -> Model

update msg model =

  case msg of

    Increment ->  model + 1

    Decrement ->  model - 1

-- VIEW

view : Model -> Html Msg

view model =  div []

    [ button [ onClick Decrement ] [ text "-" ]

    , div [] [ text (String.fromInt model) ]

    , button [ onClick Increment ] [ text "+" ]

    ]

Ahora que has explorado un poco el código, puede que tengas algunas preguntas. ¿Qué hace el valor principal? ¿Cómo se integran las diferentes partes? Analicemos el código y hablemos de ello.

El código utiliza anotaciones de tipo, alias de tipo y tipos personalizados. El objetivo de esta sección es familiarizarse con la arquitectura de Elm, así que no los abordaremos hasta más adelante. 

El main es especial en Elm. Describe lo que se muestra en pantalla. En este caso, inicializaremos nuestra aplicación con el valor init, la función de vista mostrará todo en pantalla y la entrada del usuario se introducirá en la función de actualización. Considérelo la descripción general de nuestro programa.

El modelado de datos es fundamental en Elm. El objetivo del modelo es capturar todos los detalles de la aplicación como datos.

Para crear un contador, necesitamos registrar un número que sube y baja. Esto significa que nuestro modelo es muy pequeño esta vez:

type alias Model = Int

Solo necesitamos un valor entero para registrar el conteo actual. Podemos verlo en nuestro valor inicial:

init : Model

init =  0

El valor inicial es cero y aumentará y disminuirá a medida que las personas presionen diferentes botones.

Tenemos un modelo, pero ¿cómo lo mostramos en pantalla? Esa es la función de vista:

view : Model -> Html Msg

view model =

  div []

    [ button [ onClick Decrement ] [ text "-" ]

    , div [] [ text (String.fromInt model) ]

    , button [ onClick Increment ] [ text "+" ]

    ]

Esta función toma el Modelo como argumento. Genera HTML. Por lo tanto, indicamos que queremos mostrar un botón de decremento, el conteo actual y un botón de incremento.

Observa que tenemos un controlador "onClick" para cada botón. Este indica que, al hacer clic, se genera un mensaje. El botón "+" genera un mensaje de incremento. ¿Qué es y adónde va? ¡A la función de actualización!

La función de actualización describe cómo cambiará nuestro modelo con el tiempo.

Definimos dos mensajes que podría recibir:

type Msg = Increment | Decrement

A partir de ahí, la función de actualización simplemente describe qué hacer cuando recibes uno de estos mensajes.

update : Msg -> Model -> Model

update msg model =

  case msg of

    Increment ->

      model + 1

    Decrement ->

      model - 1

Si recibe un mensaje de Incremento, incrementa el modelo. Si recibe un mensaje de Decremento, lo decrementa.

Así que, cada vez que recibimos un mensaje, lo ejecutamos mediante la función de actualización para obtener un nuevo modelo. Luego, llamamos a la vista para determinar cómo mostrar el nuevo modelo en pantalla. ¡Y luego repetimos! La entrada del usuario genera un mensaje, actualiza el modelo, lo visualiza en pantalla, etc.

La Arquitectura Elm

La Arquitectura Elm es un patrón para diseñar programas interactivos, como aplicaciones web y juegos.

Esta arquitectura parece surgir de forma natural en Elm. En lugar de que alguien la inventara, los primeros programadores de Elm seguían descubriendo los mismos patrones básicos en su código. ¡Era un poco inquietante ver a gente terminar con código bien diseñado sin planificación previa!

Así que la Arquitectura Elm es sencilla en Elm, pero útil en cualquier proyecto front-end. De hecho, proyectos como Redux se han inspirado en la Arquitectura Elm, así que quizás ya hayas visto derivados de este patrón. La cuestión es que, incluso si aún no puedes usar Elm en el trabajo, obtendrás mucho de su uso e internalización.

Los programas Elm siempre se ven así:

El programa Elm produce HTML para mostrar en pantalla y luego el ordenador envía mensajes de respuesta sobre lo que está sucediendo. "¡Han pulsado un botón!"

Pero ¿qué sucede dentro del programa Elm? Siempre se divide en tres partes:

• Modelo: el estado de la aplicación
• Vista: una forma de convertir el estado a HTML
• Actualización: una forma de actualizar el estado según los mensajes

Estos tres conceptos son la base de la arquitectura Elm.

Tuplas en Elm

Las tuplas son otra estructura de datos útil. Una tupla puede contener dos o tres valores, y cada valor puede ser de cualquier tipo. Un uso común es cuando se necesita devolver más de un valor de una función. La siguiente función recibe un nombre y envía un mensaje al usuario:

> isGoodName name =

|   if String.length name <= 20 then

|     (True, "name accepted!")

|   else

|     (False, "name was too long; please limit it to 20 characters")

| 

<function>

> isGoodName "Tom"

(True, "name accepted!")

>  

Listas en Elm

Las listas son una de las estructuras de datos más comunes en Elm. Contienen una secuencia de elementos relacionados, de forma similar a los arrays en JavaScript.

Las listas pueden contener muchos valores. Todos estos valores deben ser del mismo tipo. A continuación, se muestran algunos ejemplos que utilizan funciones del módulo Lista:

> names =

|   [ "Alice", "Bob", "Chuck" ]

| 

["Alice","Bob","Chuck"]

> List.isEmpty names

False

> List.length names

3

> List.reverse names

["Chuck","Bob","Alice"]

> numbers =

|   [4,3,2,1]

| 

[4,3,2,1]

> List.sort numbers

[1,2,3,4]

> increment n =

|   n + 1

| 

<function>

> List.map increment numbers

[5,4,3,2]

¡todos los elementos de la lista deben tener el mismo tipo!

  

If en ELM

Para lograr un comportamiento condicional en Elm, se usa una expresión if.

Creemos una nueva función de saludo que sea apropiadamente respetuosa con el presidente Abraham Lincoln:

> greet name =

|   if name == "Abraham Lincoln" then

|     "Greetings Mr. President!"

|   else

|     "Hey!"

| 

<function>

> greet "Tom"

"Hey!"

> greet "Abraham Lincoln"

"Greetings Mr. President!"

  

Funciones en Elm

Una función transforma valores. Toma un valor y genera otro.

Por ejemplo, aquí hay una función de saludo que toma un nombre y dice hola:

> greet name =

|   "Hello " ++ name ++ "!"

| 

<function>

> greet "Alice"

"Hello Alice!"

> greet "Bob"

"Hello Bob!"

Los valores pasados ​​a la función se llaman comúnmente argumentos, así que podrías decir "saludar es una función que toma un argumento".

Bien, ahora que ya hablamos de saludos, ¿qué tal una función de madlib que toma dos argumentos?

> madlib animal adjective =

|   "The ostentatious " ++ animal ++ " wears " ++ adjective ++ " shorts."

| 

<function>

> madlib "cat" "ergonomic"

"The ostentatious cat wears ergonomic shorts."

> madlib ("butter" ++ "fly") "metallic"

"The ostentatious butterfly wears metallic shorts."

Se debe usar paréntesis para agrupar "butter" ++ "fly". Cada argumento debe ser un valor primitivo como "cat" o debe estar entre paréntesis.

Quienes usan lenguajes como JavaScript podrían sorprenderse de que las funciones se vean diferentes aquí:

madlib "cat" "ergonomic"                  -- Elm

madlib("cat", "ergonomic")                // JavaScript

madlib ("butter" ++ "fly") "metallic"      -- Elm

madlib("butter" + "fly", "metallic")       // JavaScript

Esto puede resultar sorprendente al principio, pero este estilo termina usando menos paréntesis y comas. ¡Hace que el lenguaje se sienta realmente limpio y minimalista una vez que te acostumbras!

¡Comencemos por familiarizarnos con el código Elm!

El componente más pequeño de Elm se llama valor. Esto incluye valores como 42, Verdadero y "¡Hola!".

Comencemos analizando los números:

> 1 + 1

2

Hacer cálculos matemáticos está bien, pero es sorprendentemente poco común en la mayoría de los programas. Es mucho más común trabajar con cadenas como esta:

> "hola"

"hola"

> "butter" ++ "fly"

"butterfly"

>

¡Estos valores primitivos se vuelven más interesantes cuando empezamos a escribir funciones para transformarlos! Por lo tanto en proximos post veremos funciones. 

Cómo instalar Elm en Ubuntu

Si te interesa la programación funcional y te atrae la idea de crear interfaces web robustas y sin errores, Elm puede ser una excelente elección. 

Elm es un lenguaje de programación funcional y fuertemente tipado que compila a JavaScript. Se usa principalmente para construir interfaces web confiables, sin errores en tiempo de ejecución.

Vamos a instalarlo!! 

Antes de instalar Elm, asegurate de tener instalado:

Node.js y npm (el gestor de paquetes de Node)

Podés instalarlos con:

sudo apt update

sudo apt install nodejs npm

Verificá la instalación:

node -v

npm -v

Podés instalar Elm de varias formas, pero la más sencilla y recomendada para Ubuntu es a través de npm:

sudo npm install -g elm

Esto instalará los siguientes comandos:

• elm (CLI principal)
• elm-repl (intérprete interactivo)
• elm-reactor (servidor de desarrollo)
• elm-make (compilador, alias de elm desde Elm 0.19)

Verificá que esté instalado correctamente:

elm --version

Deberías ver algo como: 0.19.1

Podés crear un proyecto de prueba:

mkdir hola-elm

cd hola-elm

elm init

Esto generará un archivo elm.json. Luego, podés crear un archivo src/Main.elm y escribir tu primer módulo Elm. Por ejemplo : 

module Main exposing (main)

import Browser

import Html exposing (text)

main =

    Browser.sandbox

        { init = ()

        , update = \_ model -> model

        , view = \_ -> text "¡Hola Mundo desde Elm!"

        }

Para ver tus archivos Elm directamente en el navegador, ejecutá:

elm reactor

Y abrí http://localhost:8000 para explorar tu proyecto visualmente.

Elm es un lenguaje potente con un ecosistema pequeño pero muy enfocado. Si venís de JavaScript o TypeScript, o simplemente te interesa la programación funcional, Elm te va a sorprender.

¿Por qué un lenguaje funcional como Elm?

Puedes obtener algunas ventajas de programar con un estilo funcional, pero hay cosas que solo se pueden conseguir con un lenguaje funcional como Elm:

• Sin errores de ejecución en la práctica.
• Mensajes de error intuitivos.
• Refactorización fiable.
• Control de versiones semántico automático para todos los paquetes de Elm.

Ninguna combinación de bibliotecas JS puede ofrecerte todas estas garantías. ¡Provienen del diseño del propio lenguaje! Y gracias a estas garantías, es bastante común que los programadores de Elm digan que nunca se sintieron tan seguros programando. Seguros para añadir funciones rápidamente. Seguros para refactorizar miles de líneas. ¡Pero sin la ansiedad de pensar que se te ha pasado algo importante!

Introducción a Elm: Programación Funcional para el Frontend

Elm es un lenguaje de programación funcional, tipado estáticamente, diseñado específicamente para construir interfaces web robustas y sin errores. Es conocido por su simplicidad, rendimiento y su sistema de tipos que prácticamente elimina los errores en tiempo de ejecución.

Elm es un lenguaje compilado que genera JavaScript. Fue creado por Evan Czaplicki y se enfoca en facilitar la construcción de aplicaciones web escalables y mantenibles. Entre sus características más destacadas están:

• Inmutabilidad por defecto
• Sistema de tipos fuerte y sin null
• Compilador amigable
• Arquitectura unificada (Elm Architecture)

¿Por qué usar Elm?

• Cero excepciones en tiempo de ejecución: el sistema de tipos atrapa muchos errores antes de que tu aplicación se ejecute.
• Aplicaciones web rápidas: el código generado es optimizado.
• Mantenimiento más simple: ideal para proyectos grandes gracias a su claridad y estructura.
• El compilador te guía: es uno de los mejores errores de compilación que verás.

Elm organiza las aplicaciones con un patrón simple basado en tres conceptos:

1. Model: el estado de la aplicación
2. Update: cómo cambia el estado
3. View: cómo se representa visualmente el estado

Este patrón ha influido incluso en bibliotecas como Redux en JavaScript.

Veamos un poco de código: 

module Main exposing (..)

import Browser

import Html exposing (Html, button, div, text)

import Html.Events exposing (onClick)

-- Modelo

type alias Model = Int

-- Mensajes

type Msg = Increment | Decrement

-- Estado inicial

init : Model

init = 0

-- Actualización del modelo

update : Msg -> Model -> Model

update msg model =

    case msg of

        Increment -> model + 1

        Decrement -> model - 1

-- Vista

view : Model -> Html Msg

view model =

    div []

        [ button [ onClick Decrement ] [ text "-" ]

        , div [] [ text (String.fromInt model) ]

        , button [ onClick Increment ] [ text "+" ]

        ]

-- Programa principal

main =

    Browser.sandbox { init = init, update = update, view = view }

Este ejemplo muestra un contador que incrementa y decrementa con botones, ¡todo en unas pocas líneas claras!

Herramientas y Ecosistema:

• elm repl: consola interactiva
• elm make: compila Elm a JS
• elm install: para instalar paquetes
• elm-format: para mantener código limpio y uniforme

Elm es una opción excelente para quienes quieren construir interfaces web seguras, claras y libres de errores. Su enfoque funcional y su arquitectura consistente lo convierten en un lenguaje ideal para proyectos de frontend con alta demanda de calidad.

Programación funcional, pros y contras

Lei un articulo y me gusto mucho, por lo tanto les dejo un resumen, al final esta el articulo original :

Como saben, los programadores son personas creativas, pero al mismo tiempo se adhieren celosamente a ciertas ideas, por ejemplo, la elección de un lenguaje de programación. PHP se considera un "lenguaje vago" y JavaScript es magia "difícil de predecir". Y en medio de la gran abundancia de lenguajes, los lenguajes funcionales están ganando cada vez más seguidores y cada vez más se están abriendo camino en la mayoría de las empresas de todo el mundo. Según la analítica RedMonk. Desde junio de 2017 y la evaluación combinada de la popularidad de los lenguajes en GitHub y Slack Overflow, los lenguajes funcionales (Elm, Elixir) están creciendo lenta pero seguramente. El gran aumento en la popularidad de JavaScript también está impulsando un mayor interés en FP. Además, los desarrolladores con experiencia en programación funcional posteriormente comenzaron a trabajar en frameworks y como resultado, tenemos Redux, React, MobX y otras librerías que usan millones de personas.

Entonces, ¿qué es la programación funcional, por qué hay tanto auge y por qué vale la pena considerar aprenderla? Vamos a resolverlo.

El mundo de JavaScript está hirviendo. Hace unos años, solo unos pocos desarrolladores entendían la programación funcional, pero en los últimos tres años, casi todas las bases de código de grandes aplicaciones han estado utilizando activamente ideas tomadas del mundo de la programación funcional. Y por una buena razón: la programación funcional le permite escribir código más conciso y predecible, y es más fácil de probar (aunque aprender desde cero no es fácil).

Las principales características distintivas del desarrollo de software con FP:

• funciones puras;
• evitar el estado compartido, datos mutables y efectos secundarios;
• La prevalencia de un enfoque declarativo más que imperativo.

La programación funcional se basa inherentemente en los principios fundamentales y definitorios enumerados anteriormente. Y para comenzar a comprenderlos, primero debe cambiar al modo "académico" y cómo debe estudiar las definiciones de términos que lo seguirán implacablemente en FP: funciones puras, composición de funciones, evitar el estado compartido, etc. Esto es más como volver a la escuela. a una lección de matemáticas, pero después de eso verás tanto la funcionalidad como la programación de una manera completamente diferente.

Profundicemos un poco más en los términos de FP y, al menos superficialmente, comprendamos lo que significan.

Las funciones puras  son funciones deterministas sin efectos secundarios. Una función determinista significa que para el mismo conjunto de valores de entrada, devuelve el mismo resultado. Para FP, las propiedades de tales funciones son muy importantes: por ejemplo, las funciones puras tienen transparencia referencial: puede reemplazar una llamada de función con su valor final sin cambiar el valor del programa.

La composición de funciones se refiere al proceso de combinar dos o más funciones para crear una nueva función o realizar cálculos.

El principal problema con los estados compartidos es que para comprender los efectos de una función, debe conocer el historial completo de cada variable compartida que utiliza la función. Por lo tanto, la programación funcional evita estados compartidos, confiando en cambio en estructuras de datos inmutables y computación sin procesar para extraer nuevos datos de los existentes. Otro matiz que surge cuando se trabaja con estados compartidos es que cambiar el orden de las llamadas a funciones puede provocar una avalancha de errores. En consecuencia, al evitar estados compartidos, también evita este problema.

Subyacente a toda la programación funcional está la inmutabilidad (inmutabilidad). Y aquí es importante no confundirse const con la inmutabilidad. const crea un enlace de nombre variable que no se puede reasignar después de la creación, pero no crea objetos inmutables. No podrá cambiar el objeto al que pertenece el enlace, pero aún puede cambiar las propiedades de este objeto const, por lo tanto , los enlaces creados no son inmutables. Los objetos inmutables no se pueden cambiar en absoluto. Esto se logra mediante la congelación profunda de las variables.

Los efectos secundarios significan que, además de devolver un valor, la función también interactúa con el estado mutable externo. ¿Por qué FP los evita? Porque de esta manera los efectos del programa son mucho más fáciles de entender y probar. Haskell, por ejemplo, usa mónadas para aislar los efectos secundarios de las funciones puras.

El punto es que el enfoque imperativo funciona según el principio de control de flujo y responde a la pregunta "cómo hacerlo". El enfoque declarativo describe el flujo de datos y responde a la pregunta "qué hacer". Además, el código imperativo a menudo se basa en instrucciones (operadores), mientras que el código declarativo se basa más en las expresiones.

Entonces, descubrimos qué es la programación funcional y qué necesita saber al respecto. Y, antes de pasar a discutir sus ventajas, propongo pasar primero por las desventajas, más precisamente, para comprender la esencia del estereotipo "la programación funcional no es natural".

A juzgar por lo que escribí anteriormente, los seguidores de la programación funcional ya deberían haber surgido entre los lectores. Sin embargo, a pesar de la gran cantidad de artículos laudatorios, no hay menos artículos titulados "La programación funcional es extraña y no tiene futuro" (por ejemplo). ¿Esto significa que estoy equivocado? No. ¿Hay alguna razón para pensar que la FA es extraña? Por supuesto.

Permíteme darte una cita de Internet que refleja completamente la actitud de muchos desarrolladores hacia FP:

"Escribir código funcional es como escribir al revés y la mayoría de las veces es como resolver un rompecabezas en lugar de explicar el proceso a una computadora".

De hecho, esta es una actitud bastante subjetiva hacia la FP para aquellos que no quieren dedicar suficiente tiempo para comprender los matices de la programación funcional y simplemente intentarlo. Pero, como prometí, veamos las desventajas de FP y luego veamos las ventajas.

Primero, no existe un vocabulario eficiente desordenado y configurado para lenguajes funcionales. Los diccionarios puramente funcionales son más lentos que las tablas hash, y esto puede ser crítico para algunas aplicaciones. En segundo lugar, no hay tablas hash débiles puramente funcionales, aunque para la mayoría de los desarrolladores esta falla puede pasar desapercibida.

Además, FP no es adecuado para algoritmos en gráficos (debido a su funcionamiento lento) y, en general, para aquellas soluciones que se han basado en programación imperativa durante décadas.

De acuerdo, el último punto suena más como una queja: no podemos culpar a FP por lo que no estaba destinado. Por lo tanto, propongo recurrir a lo agradable, es decir, a las ventajas de FP y su uso en proyectos reales por parte de compañías internacionales reales.

Uno de los beneficios más obvios de la programación funcional son las abstracciones de alto nivel que ocultan muchos de los detalles de las operaciones de rutina, como la iteración. Debido a esto, el código es más corto y, como resultado, garantiza menos errores que se pueden cometer.

Además, el FP contiene menos primitivas de lenguaje. Las clases bien conocidas en FP simplemente no se usan: en lugar de crear una descripción única de un objeto con operaciones en forma de métodos, la programación funcional utiliza varias primitivas básicas del lenguaje que están bien optimizadas internamente.

Además, la programación funcional permite al desarrollador acercar el lenguaje al problema, en lugar de viceversa, todo a expensas de las estructuras flexibles y la flexibilidad del lenguaje. Además, FP ofrece a los desarrolladores nuevas herramientas para resolver problemas complejos que los programadores de POO a menudo descuidan.

De hecho, es demasiado largo para enumerar todas las ventajas de la programación funcional; realmente hay muchas de ellas. Puedo decir esto: trabajar con lenguajes funcionales proporciona una escritura de código precisa y rápida, facilita las pruebas y la depuración, los programas son de nivel superior y las firmas de funciones son más informativas.

Por supuesto, uno no puede negar las ventajas de POO, pero vale la pena recordar que los lenguajes funcionales están a la par con muchos otros en términos de conveniencia y merecen su atención.

En el mundo de TI, nada sucede. Una cosa se aferra a la otra, y ahora todas las tendencias más actuales están interconectadas.

Si recordamos las tendencias más sensacionales de 2016-2017, estas, por supuesto, serán AI, IoT, Big Data y Blockchain. Están en boca de todos, todos conocen su potencial y sus características clave. Y son algunas de estas tendencias las que han catalizado la creciente popularidad de la programación funcional entre los desarrolladores.

Actualmente, el problema del procesamiento paralelo y el trabajo con grandes flujos de datos es muy grave, en otras palabras, trabajar con Big Data. Y, paralelizando el procesamiento de estos datos, puede obtener el resultado deseado en una fracción de segundo, lo cual es muy crítico en el mundo real. Además, no se olvide de la informática descentralizada (distribuida): blockchains y otras, que, en esencia, son un mecanismo bastante complejo. Y para tales cálculos, el código funcional es más adecuado debido a todos los principios de la programación funcional (como las funciones puras, por ejemplo). El uso de todas las técnicas básicas de FP facilita la ejecución y el mantenimiento de código paralelo.

Además, si la programación funcional anterior se usaba solo para resolver problemas específicos, ahora incluso se aplica a proyectos clásicos. 

Como probablemente ya haya entendido, no debe temer la programación funcional. Un poco de diligencia y curiosidad, y ahora has dominado la FP. Aquí hay algunos consejos para aquellos que han decidido probarse en un nuevo género y aprender algo radicalmente nuevo:

• Relájate :) Al principio será muy complicado, teniendo en cuenta que tendrás que dejar atrás lo que sabes y aprender nuevos enfoques y principios. Y eso esta bien. Piense en la primera vez que aprendió a codificar. Nada malo sucederá.
• Comience con micro tareas para tenerlo en sus manos.
• Comience a aprender Haskell y luego pase a Scala (o F #) para comenzar a comprender los principios de programación funcional (y al mismo tiempo comenzar a pensar más "funcional").

Dada la prevalencia de la programación funcional, puede estar seguro de su futuro profesional (con la debida diligencia), ya que seguramente puede usar sus habilidades recién adquiridas. ¡No tengas miedo de intentarlo!

Dejo link: https://dou.ua/lenta/articles/functional-programming/

HTML + javascript + Haskell = ELM, parte 11

Este es el ultimo post de esta serie de posts. Por supuesto vamos a seguir jugando con ELM.

Lo más interesante de ELM es su capacidad de dibujar, por lo tanto vamos a hacer una pequeña aplicación donde se dibujan 2 botones y un circulo. Y los botones cambian la posición del circulo :

--Importo todo lo necesario.
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Html.Events exposing (onClick)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

-- Definimos una app con una vista y una función update.
main =
  Browser.sandbox { init = 50, update = update, view = view }
   
type Msg = Increment | Decrement

update msg m =
  case msg of
    Increment ->
      m + 10

    Decrement ->
      m - 10

-- La vista dibuja los botones y el circulo.
view model =
  div []
    [ button [ onClick Decrement ] [ Html.text "-" ]
    , 
       svg
       [ viewBox "0 0 400 400"
       , width "400"
       , height "400"
       ]
       [ circle
        [ cx (String.fromInt model)
        , cy "50"
        , r "40"
        , fill "red"
        , stroke "black"
        , strokeWidth "3"
        ]
        []
       ]
    , button [ onClick Increment ] [ Html.text "+" ]
    ]

Si quieren probarlo pueden hacerlo acá : https://elm-lang.org/try

Y creo que esta es la frutilla de la torta.

Dejo link : https://guide.elm-lang.org/

HTML + javascript + Haskell = ELM, parte 10

En Elm, podemos dibujar en el lienzo con una biblioteca gráfica completa. Comenzamos con un collage con dimensiones establecidas, y luego construimos formas. Podemos transformar las formas al moverlas, escalarlas o rotarlas.

La figura muestra un auto simple. Lo describiremos en términos de funciones. Como era de esperar, utilizaremos una combinación de estructuras de datos y funciones para hacer lo que queramos.

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)

carBottom = filled black (rect 160 50)
carTop =
 filled black (rect 100 60)
 tire = filled red (circle 24)

main = collage 300 300
        [ carBottom
        , carTop |> moveY 30
        , tire |> move (-40, -28)
        , tire |> move ( 40, -28) ]

Primero, definimos algunas formas básicas. Definiremos las dimensiones básicas de las formas y, de forma predeterminada, se mostrarán en el medio del lienzo. main es solo un collage, que toma un ancho, una altura y una lista de formas, llamadas formas en Elm. Cada elemento de la lista es solo una forma. Por ejemplo, carTop |> moveY 30 es solo un rectángulo movido 30 píxeles verticalmente.

En este ejemplo particular, la figura es estática. Con Elm, animar esa figura es casi trivial. Digamos que tenemos un rectángulo con una forma que se ve así:

filled black (rect 80 10)

Podemos animar la paleta mapeando Mouse.x en la función que dibuja esta paleta, así:

import Color exposing (..)

import Graphics.Collage exposing (..)

import Graphics.Element exposing (..)

import Mouse

import Window

import Signal

drawPaddle w h x =

   filled black (rect 80 10)

     |> moveX (toFloat x - toFloat w / 2)

     |> moveY (toFloat h * -0.45)

display (w, h) x = collage w h

     [ drawPaddle w h x ]

main = Signal.map2 display Window.dimensions Mouse.x

En Elm solo nos preocupamos por dibujar la paleta en este momento y dejar que la entrada del usuario determine dónde moverla. 

HTML + javascript + Haskell = ELM, parte 9

Los lenguajes funcionales son excelentes para transformar texto. Elm también es excelente para capturar texto. Aquí hay un ejemplo que toma algo de entrada, lo manipula y lo pone en la pantalla, usando un flujo HTML:

import String
import Html exposing (Html, Attribute, text, toElement, div, input)
import Html.Attributes exposing (..)
import Html.Events exposing (on, targetValue)
import Signal exposing (Address)
import StartApp.Simple as StartApp

--Importamos las bibliotecas que necesitaremos. String nos permite manipular cadenas, y Html nos da
-- acceso a varios aspectos de HTML, incluidos eventos, divs y campos de entrada.

 main = StartApp.start { model = "", view = view, update = update }

--Nuestra función principal de una línea inicia nuestra aplicación, inicializando con una cadena
--vacía, presentando una vista y manejando actualizaciones con nuestra función de actualización, que
--se llamará cada vez que cambie nuestro campo de entrada.

 update newStr oldStr = newStr

--A continuación, nuestra función de actualización trivial simplemente devuelve el nuevo valor del
--campo de entrada cada vez que el campo de entrada se actualiza.

 shout text = String.toUpper text
 whisper text = String.toLower text
 echo text = (shout text) ++ " " ++ (whisper text)

--A continuación, definimos un par de funciones simples para trabajar con texto, las funciones de
--grito y susurro. Los usamos para construir una función de eco para transformar el texto. Estas
--funciones no saben nada sobre las interfaces de usuario. Solo funcionan en datos de cadena sin
--procesar.

 view address string =
div []
     [ input
     [ placeholder "Speak"
       , value string
       , on "input" targetValue (Signal.message address)
       , myStyle
      ]
     []
  , div [ myStyle ] [ text (echo string) ]
]
myStyle = style [ ("width", "100%") ]

--La siguiente tarea es construir nuestra página HTML. Agregamos un control de entrada y un div
--que contendrá nuestro texto modificado. El control de entrada simplemente tiene los elementos
--HTML que Elm necesita para representar el control. La función on establece una señal que
--contendrá actualizaciones del campo de entrada. myStyle devuelve la hoja de estilo para nuestros
--elementos HTML. La función div crea un div HTML con los contenidos y el estilo especificados.

Puede parecer un poco extraño al principio, pero la visión del mundo de Elm es el complemento perfecto para la programación web front-end. Cada interfaz de usuario es solo un flujo de entradas de usuario transformadas

HTML + javascript + Haskell = ELM, parte 8

Seguimos con el post anterior.

Uno de los problemas más comunes de la interfaz de usuario es encontrar dónde hace clic un usuario.

Usemos la función sampleOn. Esa función nos permite muestrear una señal cuando se actualiza otra, como esta:

import Graphics.Element exposing (show)
import Mouse
clickPosition = Signal.sampleOn Mouse.clicks Mouse.position
main = Signal.map show clickPosition

Construimos dos señales, clickPosition y main. Primero, creamos una señal con sampleOn. Cuando la señal Mouse.Clicks se actualice, probaremos la posición más reciente con Mouse.position. El resultado es una nueva señal que devuelve la posición del mouse y cambia cada vez que el usuario hace clic en el mouse. Luego, simplemente construimos nuestra señal principal. Mapeamos show en nuestra señal clickPosition. Sencillo. Podemos muestrear los controles de entrada de la misma manera.

O, supongamos que está implementando el desplazamiento con una barra de desplazamiento. Necesita saber qué tan lejos está el mouse en una página, así:

import Graphics.Element exposing (show)

import Mouse

import Window

div x y = show ((toFloat x) / (toFloat y))

main = Signal.map2 (div) Mouse.y Window.height

Ejecútelo y desplácese en el lado derecho para obtener algo como esto:

0.42973977695167286

Este ejemplo usa map2. Al igual que map, esta función asigna funciones a señales, pero usa dos señales y funciones de dos argumentos. Primero, para simplificar las conversiones de tipos, creamos una versión de división que toma enteros y devuelve texto. A continuación, usamos map2 para mapear div en dos señales, Mouse.y y Window.height. Piense en cómo se vería un programa JavaScript similar. 

Monitorear las entradas del usuario es un trabajo funcional.

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.

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. 

HTML + javascript + Haskell = ELM, parte 5

Seguimos con el post anterior.

Elm incluye Pattern Matching, Puede usarlo para simplificar algunas definiciones de funciones:

> first (head::tail) = head
<function> : List a -> a
> first [1, 2, 3]
1 : number

Se deberá cubrir todos los casos o se puede tener este error:

> first []

Error: Runtime error in module Repl (on line 23, column 22 to 26):

Non-exhaustive pattern match in case-expression.

Make sure your patterns cover every case!

Como head :: tail no coincide [], Elm no sabe qué hacer con esta expresión. Usar una coincidencia de patrón no exhaustiva es una de las pocas formas en que puede bloquear un lenguaje de la familia ML y es totalmente evitable.

Elm es un lenguaje curry como Haskell :

> add x y = x + y

<function> : number -> number -> number

Observe el tipo de datos de la función. Es posible que haya esperado una función que tome dos argumentos de tipo número y devuelva un tipo de número. Así es como funciona el curry. Elm puede aplicar parcialmente add, lo que significa que puede completar uno de los dos números, así:

> inc = (add 1)

<function> : number -> number

Acabamos de crear una nueva función parcialmente aplicada llamada inc. Esa nueva función aplica uno de los argumentos para agregar. Completamos x, pero no y, así que Elm básicamente está haciendo esto:

addX y = 1 + y

Curry significa cambiar las funciones de múltiples argumentos a una cadena de funciones que cada una toma un solo argumento. Ahora, podemos manejar el curry nosotros mismos. Recuerde, las funciones currificadas no pueden tomar más de un argumento a la vez:

> add x y = x + y

<function> : number -> number -> number

> add 2 1

3 : number

> (add 2) 1

3 : number

Además de curring, puedes usar funciones parcialmente aplicadas para crear algunos algoritmos geniales. 

Elm infiere que vas a hacer aritmética con números. Elm usa el número de clase de tipo porque esa es la clase de tipo que admite el operador +. Sin embargo, no está limitado a enteros:

> add 1 2

3 : number

> add 1.0 2

3 : Float

> add 1.0 2.3

3.3 : Float

Y esto funciona porque Elm es polimórfico. Calcula el tipo más general que funcionará, en función de su uso de operadores. De hecho, puede ver el mismo comportamiento con el operador ++:

> concat x y = x ++ y

<function> : appendable -> appendable -> appendable

Elm asume que la función usa dos elementos anexables, como este:

> concat ["a", "b"] ["c", "d"]

["a","b","c","d"] : [String]

> concat "ab" "cd"

"abcd" : String

Eso es polimorfismo. Como es de esperar, también puede usar polimorfismo con puntos. Digamos que tengo un punto y quiero calcular la distancia al eje x. Eso es fácil de hacer:

> somePoint = {x=5, y=4}

{ x = 5, y = 4 } : {x : number, y : number'}

> xDist point = abs point.x

<function> : {a | x : number} -> number

> xDist somePoint

5 : number

La inferencia de tipos de Elm infiere que x e y son números dentro de un registro. Ahora, puedo pasarlo en cualquier punto:

> twoD = {x=5, y=4}

{ x = 5, y = 4 } : {x : number, y : number'}

> threeD = {x=5, y=4, z=3}

{ x = 5, y = 4, z = 3 } : {x : number, y : number', z : number''}

> xDist twoD

5 : number

> xDist threeD

5 : number

Alternativamente, podría usar la coincidencia de patrones, así:

> xDist {x} = abs x

<function> : { a | x : number } -> number

> xDist threeD

5 : number

Con  Pattern Matching seleccionar el campo x, y el resto del ejemplo funciona de la misma manera. El punto es que los registros también son completamente polimórficos. A Elm no le importa que los registros que utilizamos sean del mismo tipo. Solo necesita el registro para tener un campo x. Estás viendo el poder de un sistema de tipos que hará todo lo posible para detectar problemas reales, pero que se saldrá del camino cuando no haya ninguno.

HTML + javascript + Haskell = ELM, parte 4

Seguimos con el post anteriro.

Como con cualquier lenguaje funcional, la base de Elm es la función. Definir una es trivial. Veamos algunas funciones :

> add x y = x + y
<function> : number -> number -> number
> double x = x * 2
<function> : number -> number
> anonymousInc = \x -> x + 1
<function> : number -> number
> double (add 1 2)
6 : number
> List.map anonymousInc [1, 2, 3]
[2,3,4] : [number]

La sintaxis para crear funciones es muy simple e intuitiva. add es una función con nombre con dos argumentos, x e y. Las funciones anónimas expresan parámetros como \ x, y el cuerpo de la función sigue los caracteres ->.

Como Elixir, Elm tiene el operador de tubería que permite componer funciones, de esta manera:

> 5 |> anonymousInc |> double

12 : number

https://emanuelpeg.blogspot.com/2017/03/pipe-operator-de-elixir.html
Y Factor : https://emanuelpeg.blogspot.com/2019/08/factor.html

Tomamos 5 y lo pasamos como el primer argumento a anonymousInc, para obtener 6. Luego, lo pasamos como el primer argumento para duplicar. También podemos hacer que esa expresión se ejecute de derecha a izquierda:

> double <| anonymousInc <| 5

12 : number

Evan Czaplicki, creador de Elm, dice que obtuvo esta función de F#, que a su vez obtuvo la idea de las tuberías de Unix, por lo que esta idea ha existido por un tiempo, ¡pero es buena!

Al igual que con cualquier lenguaje funcional, hay muchas funciones que le permitirán trabajar con funciones de todo tipo de formas:

> List.map double [1..3]

[2,4,6] : List number

> List.filter (\x -> x < 3) [1..20]

[1,2] : List comparable

[1..3] es un rango. Puede explorar más funciones de la Lista con la biblioteca de listas.

Cuando está componiendo una solución con Elm, puede tener la tentación de codificar cada caso como un cuerpo de función separado como lo haría en Haskell, Erlang o Elixir, pero no se puede :( :

> factorial 1 = 1

<function> : number -> number'

> factorial x = x * factorial (x - 1)

<function> : number -> number

> 

RangeError: Maximum call stack size exceeded

Parece que la segunda llamada reemplazó a la primera. En cambio, debe usar el mismo cuerpo de función y dividir el problema usando mayúsculas y minúsculas o si, de esta manera:

> factorial x = \

|  if | x == 0 -> 1 \

|      | otherwise -> x * factorial (x - 1)

<function> : number -> number

> factorial 5

120 : number

Suficientemente simple. factorial 0 es 1; de lo contrario, factorial x es x * factorial (x-1). Manejaría la recursividad de la lista de la misma manera:

> count list = \

| case list of \

| [] -> 0 \

| head::tail -> 1 + count tail

<function> : [a] -> number

> count [4, 5, 6]

3 : number

La cantidad de elementos de una lista vacía es cero y la cantidad de elementos de cualquier otra lista es 1 más la cantidad del resto. Veamos cómo atacar problemas similares con la coincidencia de patrones.

Por ahora vamos bien, pero seguimos en otro post...