Un sorbo de TEA: introducción a Elm (I)

Elm

Logo de Elm
  • Lenguaje de programación funcional: esto significa que todo el código que escribes es funcional por defecto, no tienes que hacer ningún esfuerzo extra. Esto es así porque el lenguaje no es multiparadigma como JS, es decir, no puedes hacer Programación Orientada a Objetos con Elm (no hay clases u objetos), solo Programación Funcional pura.
    Es importante destacar también que al diseñar el lenguaje se puso un gran énfasis en hacerlo fácil de usar y de aprender, a diferencia de otros lenguajes funcionales la curva de aprendizaje de Elm es suave, para empezar a hacer cosas solo se necesitan ganas y disponer de un rato para jugar con los ejemplos básicos.
  • Compila a Javascript: el código Elm se convierte a Javascript en un proceso de build parecido al que se hace con ES6+, Typescript, Flow, etc.. Elm dispone de un set de herramientas basadas en npm para llevar a cabo este proceso.
  • Especialmente ideado para crear webapps: Elm nace de un trabajo de investigación realizado por su autor, Evan Czaplicki, en el que desarrolla cómo debería implementarse un lenguaje de programación para crear clientes web.
  • Robusto: Gracias a su compilador y su sistema de tipos el código Elm no produce excepciones en tiempo de ejecución.

No Runtime Exceptions

Sintaxis

https://ellie-app.com/fL2TwCtD9a1/0

Cabecera del módulo

Importar otros módulos

Funciones

nombreFuncion arg1 arg2 arg3 = cuerpoDeLaFuncion

Records

  • Son inmutables (no se pueden modificar): si quieres modificar su valor tienes que pasarlo por una función que devolverá una copia nueva del record con las modificaciones aplicadas.
  • No son extendibles: Al operar con un record no puedes añadirle o quitarle miembros. Por ejemplo no podrías añadir surname al record userRecord al operar con él en una función, menos aún intentar quitarle la propiedad name ya que para empezar no existen en Elm los conceptos de null, undefined o delete. No runtime expections, ¿recuerdas? :)
  • Sus tipos son fijos: Al operar con un record no puedes cambiar el tipo de sus miembros. Por ejemplo no podrías asignar 100 a userRecord.name porque éste espera un String y 100 es un Int.

Punto de entrada

La arquitectura Elm

Una taza de TEA calentita
  • Model: el estado de la aplicación.
  • Update: la función que actualiza el estado.
  • View: la función que renderiza el estado a Html.
https://ellie-app.com/kpyDm6Vzga1/4

Importar otros módulos (II)

Modelo

Update

  • Los mensajes
  • La función de Update

View

  • List: Las listas son parecidas a los Arrays de JS pero solo pueden contener elementos de un mismo tipo.
    También se declaran con corchetes miLista = [ 1, 2, 3 ].
  • Tuple: Una tupla es una enumeración fija de elementos de uno o varios tipos distintos.
    Se declaran entre paréntesis miTupla = ( 1, "hola", False ).
nombreTagHtml listaAtributos listaHijos
| | |
función arg1 arg2
  • listaAtributos es una lista de funciones de atributos como style , class o onClick.
  • listaHijos es una lista con funciones de otros elementos html anidados como div, span o h1.
span [ style [ ( "padding", "5px" ), ( "color", "blue" ) ] []
div [ class "col-sm" ] [ text "Hola" ]
button [ onClick Incrementar ] [ text "Incrementar contador" ]

Inicialización del programa

Recapitulando

  • Qué es Elm.
  • Sintaxis y estructura básica de un programa Elm.
  • La arquitectura Elm y sus actores / conceptos asociados.

¿Redux, reducido?

¿Qué más?

  • Mensajes parametrizados: para poder pasar datos a nuestras desde el DOM a nuestras funciones.
  • Conversiones: veremos como convertir strings a números de forma segura con Elm.
  • Tipos contenedor: Relacionado con las conversiones, introduciremos el tipo Result que forma parte de la librería standard de Elm y se usa extensivamente para encapsular resultado de operaciones que pueden fallar.

--

--

--

Web developer • λ • Barcelona

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joan Llenas Masó

Joan Llenas Masó

Web developer • λ • Barcelona

More from Medium

Linting tools as a method of improving code quality in robust systems

Calculating Time Complexity and Space Complexity

Type guards and type assertion in typescript

Moving into the subscription model