Tipos en Elm

Una de las principales ventajas de Elm es que, en la práctica, los usuarios no ven errores de ejecución. Esto es posible gracias a que el compilador de Elm puede analizar el código fuente rápidamente para ver cómo fluyen los valores a través del programa. Si un valor se usa de forma inválida, el compilador lo notifica con un mensaje de error intuitivo. Esto se denomina inferencia de tipos. El compilador determina qué tipo de valores entran y salen de todas las funciones.

El siguiente código define una función toFullName que extrae el nombre completo de una persona como una cadena:

toFullName person =

  person.firstName ++ " " ++ person.lastName

fullName =

  toFullName { fistName = "Hermann", lastName = "Hesse" }

Al igual que en JavaScript o Python, simplemente escribimos el código sin complicaciones. ¿Ves el error?

En JavaScript, el código equivalente genera "undefined Hesse". ¡Ni siquiera es un error! Con suerte, algún usuario te lo dirá cuando lo vea en acción. En cambio, el compilador de Elm simplemente revisa el código fuente y te dice:

-- TYPE MISMATCH ---------------------------------------------------------------

The argument to function `toFullName` is causing a mismatch.

6│   toFullName { fistName = "Hermann", lastName = "Hesse" }

                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Function `toFullName` is expecting the argument to be:

    { …, firstName : … }

But it is:

    { …, fistName : … }

Hint: I compared the record fields and found some potential typos.

    firstName <-> fistName

Detecta que toFullName recibe el tipo de argumento incorrecto. Como indica la pista del mensaje de error, alguien escribió "fist" por error en lugar de "first".

Es fantástico tener un asistente para errores sencillos como este, pero es aún más valioso cuando tienes cientos de archivos y muchos colaboradores realizando cambios. No importa cuán grandes y complejas sean las cosas, el compilador de Elm comprueba que todo encaje correctamente basándose únicamente en el código fuente.

Cuanto mejor comprendas los tipos, más fácil te resultará el compilador. ¡Así que empecemos a aprender más!

Forms en Elm

Ahora crearemos un formulario básico. Tiene un campo para tu nombre, un campo para tu contraseña y un campo para verificarla. También realizaremos una validación muy sencilla para comprobar si las contraseñas coinciden.

A continuación, incluí el programa completo:

-- Input a user name and password. Make sure the password matches.

--

-- Read how it works:

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

--

import Browser

import Html exposing (..)

import Html.Attributes exposing (..)

import Html.Events exposing (onInput)

-- MAIN

main =

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

-- MODEL

type alias Model =

  { name : String

  , password : String

  , passwordAgain : String

  }

init : Model

init =

  Model "" "" ""

-- UPDATE

type Msg

  = Name String

  | Password String

  | PasswordAgain String

update : Msg -> Model -> Model

update msg model =

  case msg of

    Name name ->

      { model | name = name }

    Password password ->

      { model | password = password }

    PasswordAgain password ->

      { model | passwordAgain = password }

-- VIEW

view : Model -> Html Msg

view model =

  div []

    [ viewInput "text" "Name" model.name Name

    , viewInput "password" "Password" model.password Password

    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain

    , viewValidation model

    ]

viewInput : String -> String -> String -> (String -> msg) -> Html msg

viewInput t p v toMsg =

  input [ type_ t, placeholder p, value v, onInput toMsg ] []

viewValidation : Model -> Html msg

viewValidation model =

  if model.password == model.passwordAgain then

    div [ style "color" "green" ] [ text "OK" ]

  else

    div [ style "color" "red" ] [ text "Passwords do not match!" ]

Esto es bastante similar a nuestro ejemplo de campo de texto, pero con más campos.

Siempre empiezo calculando el modelo. Sabemos que habrá tres campos de texto, así que sigamos con eso:

type alias Model =

  { name : String

  , password : String

  , passwordAgain : String

  }

Normalmente intento empezar con un modelo mínimo, quizás con un solo campo. Luego intento escribir las funciones de vista y actualización. Esto suele revelar que necesito añadir más elementos a mi modelo. Construir el modelo gradualmente de esta manera significa que puedo tener un programa funcional durante el proceso de desarrollo. Puede que aún no tenga todas las funciones, ¡pero casi las tiene!

A veces se tiene una idea bastante clara de cómo se verá el código básico de actualización. Sabemos que necesitamos poder cambiar nuestros tres campos, por lo que necesitamos mensajes para cada caso.

type Msg

  = Name String

  | Password String

  | PasswordAgain String

Esto significa que nuestra actualización necesita un caso para las tres variantes:

update : Msg -> Model -> Model

update msg model =

  case msg of

    Name name ->

      { model | name = name }

    Password password ->

      { model | password = password }

    PasswordAgain password ->

      { model | passwordAgain = password }

Cada caso utiliza la sintaxis de actualización de registros para garantizar que se transforme el campo correspondiente. Esto es similar al ejemplo anterior, pero con más casos.

Esta función de vista utiliza funciones auxiliares para hacer las cosas un poco más organizadas:

view : Model -> Html Msg

view model =

  div []

    [ viewInput "text" "Name" model.name Name

    , viewInput "password" "Password" model.password Password

    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain

    , viewValidation model

    ]

En ejemplos anteriores, usábamos input y div directamente. ¿Por qué dejamos de hacerlo?

Lo bueno de HTML en Elm es que input y div son funciones normales. Toman una lista de atributos y  una lista de nodos secundarios. Como usamos funciones normales de Elm, ¡tenemos todo el poder de Elm para ayudarnos a crear nuestras vistas! Podemos refactorizar código repetitivo y convertirlo en funciones auxiliares personalizadas. ¡Eso es exactamente lo que estamos haciendo aquí!

Así que nuestra función de vista tiene tres llamadas a viewInput:

viewInput : String -> String -> String -> (String -> msg) -> Html msg

viewInput t p v toMsg =

  input [ type_ t, placeholder p, value v, onInput toMsg ] []

Esto significa que escribir viewInput "text" "Name" "Bill" Name en Elm se convertiría en un valor HTML como <input type="text" placeholder="Name" value="Bill"> al mostrarse en pantalla.

La cuarta entrada es más interesante. Es una llamada a viewValidation:

viewValidation : Model -> Html msg

viewValidation model =

  if model.password == model.passwordAgain then

    div [ style "color" "green" ] [ text "OK" ]

  else

    div [ style "color" "red" ] [ text "Passwords do not match!" ]

Esta función primero compara las dos contraseñas. Si coinciden, se muestra texto verde y un mensaje positivo. Si no coinciden, se muestra texto rojo y un mensaje útil.

Estas funciones auxiliares empiezan a mostrar las ventajas de que nuestra biblioteca HTML sea código Elm normal. Podríamos incluir todo ese código en nuestra vista, pero crear funciones auxiliares es totalmente normal en Elm, incluso en el código de la vista. 

Records en Elm

Un registro puede contener muchos valores, y cada valor está asociado a un nombre.

Aquí se muestra un registro que representa al economista británico John A. Hobson:

> john =

|   { first = "John"

|   , last = "Hobson"

|   , age = 81

|   }

| 

{ age = 81, first = "John", last = "Hobson" }

> john.last

"Hobson"

Hemos definido un registro con tres campos que contienen información sobre el nombre y la edad de John.

También puedes acceder a los campos del registro mediante una función de acceso a campos como esta:

> john = { first = "John", last = "Hobson", age = 81 }

{ age = 81, first = "John", last = "Hobson" }

> .last john

"Hobson"

> List.map .last [john,john,john]

["Hobson","Hobson","Hobson"]

>  

A menudo es útil actualizar valores en un registro:

> john = { first = "John", last = "Hobson", age = 81 }

{ age = 81, first = "John", last = "Hobson" }

> { john | last = "Adams" }

{ age = 81, first = "John", last = "Adams" }

> { john | age = 22 }

{ age = 22, first = "John", last = "Hobson" }

Si quisieras decir estas expresiones en voz alta, dirías algo como: "Quiero una nueva versión de John cuyo apellido sea Adams" o "John cuya edad sea 22".

Ten en cuenta que al actualizar algunos campos de John, creamos un registro completamente nuevo. No sobrescribe el existente. Elm optimiza este proceso compartiendo la mayor cantidad de contenido posible. Si actualizas uno de los diez campos, el nuevo registro compartirá los nueve valores sin cambios.

Una función para actualizar las edades podría verse así:

> celebrateBirthday person =

|   { person | age = person.age + 1 }

| 

<function>

> john = { first = "John", last = "Hobson", age = 81 }

{ age = 81, first = "John", last = "Hobson" }

> celebrateBirthday john

{ age = 82, first = "John", last = "Hobson" }

Text Fields en Elm

Vamos a crear una aplicación sencilla que invierte el contenido de un campo de texto.

import Browser

import Html exposing (Html, Attribute, div, input, text)

import Html.Attributes exposing (..)

import Html.Events exposing (onInput)

-- MAIN

main =

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

-- MODEL

type alias Model =

  { content : String

  }

init : Model

init =

  { content = "" }

-- UPDATE

type Msg

  = Change String

update : Msg -> Model -> Model

update msg model =

  case msg of

    Change newContent ->

      { model | content = newContent }

-- VIEW

view : Model -> Html Msg

view model =

  div []

    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []

    , div [] [ text (String.reverse model.content) ]

    ]

Este código es una ligera variación del ejemplo anterior. Se configura un modelo. Se definen algunos mensajes. Se indica cómo actualizar. Se crea la vista. La diferencia radica simplemente en cómo se completó este esqueleto. 

Siempre empiezo por adivinar cuál debería ser mi modelo. Sabemos que debemos registrar lo que el usuario escribe en el campo de texto. Necesitamos esa información para saber cómo representar el texto invertido. Así que lo hacemos así:

type alias Model =

  { content : String

  }

Esta vez representamos el modelo como un registro. El registro almacena la entrada del usuario en el campo de contenido.

¿para qué molestarse en tener un registro si solo contiene una entrada? ¿No se podría usar la cadena directamente? ¡Claro! Pero empezar con un registro facilita la adición de más campos a medida que nuestra aplicación se vuelve más compleja. Cuando llegue el momento en que necesitemos dos entradas de texto, tendremos que hacer muchos más ajustes.

Ya tenemos nuestro modelo, así que normalmente procedemos a crear una función de vista:

view : Model -> Html Msg

view model =

  div []

    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []

    , div [] [ text (String.reverse model.content) ]

    ]

Creamos un <div> con dos hijos. El hijo interesante es el nodo <input>, que tiene tres atributos:

• placeholder es el texto que se muestra cuando no hay contenido.
• value es el contenido actual de este <input>.
• onInput envía mensajes cuando el usuario escribe en este nodo <input>.

Al escribir "bard", se generarían cuatro mensajes:

1. Change "b"
2. Change "ba"
3. Change "bar"
4. Change "bard"

Estos se incorporarían a nuestra función de actualización.

Solo hay un tipo de mensaje en este programa, por lo que nuestra actualización solo tiene que manejar un caso:

type Msg

  = Change String

update : Msg -> Model -> Model

update msg model =

  case msg of

    Change newContent ->

      { model | content = newContent }

Cuando recibimos un mensaje indicando que el nodo <input> ha cambiado, actualizamos el contenido de nuestro modelo. Por lo tanto, si escribiera "bard", los mensajes resultantes generarían los siguientes modelos:

1. { content = "b" }
2. { content = "ba" }
3. { content = "bar" }
4. { content = "bard" }

Necesitamos registrar esta información explícitamente en nuestro modelo; de lo contrario, no habría forma de mostrar el texto invertido en nuestra función de vista.

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.