Primeros pasos con Elm Language

Instalación

Para comenzar el desarrollo con Elm, debe instalar un conjunto de herramientas llamado elm-platform.

Incluye: elm-make, elm-reactor, elm-repl y elm-package.

Todas estas herramientas están disponibles a través de CLI, en otras palabras, puede usarlas desde su terminal.

Elija uno de los siguientes métodos para instalar Elm:

Usando el instalador

Descargue el instalador del sitio web oficial y siga el asistente de instalación.

Usando npm

Puede usar Node Package Manager para instalar la plataforma Elm.

Instalación mundial:

$ npm install elm -g

Instalación local:

$ npm install elm

Se puede acceder a las herramientas de la plataforma Elm instaladas localmente a través de:

$ ./node_modules/.bin/elm-repl  # launch elm-repl from local node_modules/

Usando homebrew

$ brew install elm

Cambiar entre versiones con elm-use

Instalar elm-uso

$ npm install -g elm-use

Cambiar a una versión de elm más antigua o más nueva

$ elm-use 0.18  // or whatever version you want to use

Otras lecturas

Aprende a [Inicializar y compilar][8] tu primer proyecto.

[8]: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Inicializar y compilar

Inicializar y compilar

Debe tener la plataforma Elm instalada en su computadora, el siguiente tutorial está escrito asumiendo que está familiarizado con la terminal.

Inicialización

Cree una carpeta y navegue hasta ella con su terminal:

$ mkdir elm-app
$ cd elm-app/

Inicialice el proyecto Elm e instale las dependencias principales:

$ elm-package install -y

Las carpetas elm-package.json y elm-stuff deberían aparecer en su proyecto.

Cree el punto de entrada para su aplicación Main.elm y pegue el ejemplo Hello World en él.

Construyendo el proyecto

Para construir su primer proyecto, ejecute:

$ elm-make Main.elm

Esto producirá index.html con el archivo Main.elm (y todas las dependencias) compilado en JavaScript e integrado en el HTML. ¡Prueba y ábrelo en tu navegador!

Si esto falla con el error No puedo encontrar el módulo 'Html', significa que no está utilizando la última versión de Elm. Puede resolver el problema actualizando Elm y rehaciendo el primer paso, o con el siguiente comando:

$ elm-package install elm-lang/html -y

En caso de que tenga su propio archivo index.html (por ejemplo, cuando trabaje con puertos), también puede compilar sus archivos Elm en un archivo JavaScript:

$ elm-make Main.elm --output=elm.js

Más información en el ejemplo Incrustación en HTML.

1: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Hola Mundo 2: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Incrustación en HTML

Hola Mundo

Vea cómo compilar este código en Inicializar y compilar

import Html

main = Html.text "Hello World!"

1: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Inicializar y compilar

Editores

Átomo

  • https://atom.io/packages/language-elm
  • https://atom.io/packages/elmjutsu

Mesa ligera

  • https://github.com/rundis/elm-luz

Texto sublime

  • https://packagecontrol.io/packages/Elm%20Language%20Support

#Vim #

  • https://github.com/ElmCast/elm-vim

#Emacs #

  • https://github.com/jcollard/elm-mode

IDEA de IntelliJ

  • https://plugins.jetbrains.com/plugin/8192

Soportes

  • https://github.com/tommot348/elm-soportes

Código VS

  • https://marketplace.visualstudio.com/items?itemName=sbrink.elm

Guía de estilo y formato elm

La guía de estilo oficial se encuentra en la página de inicio y generalmente incluye:

  • legibilidad (en lugar de compacidad)
  • facilidad de modificación
  • diferenciales limpios

Esto significa que, por ejemplo, esto:

homeDirectory : String
homeDirectory =
  "/root/files"


evaluate : Boolean -> Bool
evaluate boolean =
  case boolean of
    Literal bool ->
        bool

    Not b ->
        not (evaluate b)

    And b b' ->
        evaluate b && evaluate b'

    Or b b' ->
        evaluate b || evaluate b'

se considera mejor que:

homeDirectory = "/root/files"

eval boolean = case boolean of
    Literal bool -> bool
    Not b        -> not (eval b)
    And b b'     -> eval b && eval b'
    Or b b'      -> eval b || eval b'

La herramienta elm-format le ayuda formateando su código fuente automáticamente (normalmente al guardar), de manera similar a [gofmt] del lenguaje Go ](https://golang.org/cmd/gofmt/). Nuevamente, el valor subyacente es tener un estilo consistente y guardar argumentos y disputas sobre varios temas como tabulaciones versus espacios o longitud de sangría.

Puede instalar elm-format siguiendo las instrucciones en el [repositorio de Github](https://github.com/avh4/elm- formato). Luego [configure su editor] (https://github.com/avh4/elm-format#editor-integration) para formatear los archivos Elm automáticamente o ejecute elm-format FILE_OR_DIR --yes manualmente.

Incrustación en HTML

Hay tres posibilidades para insertar código Elm en una página HTML existente.

Incrustar en la etiqueta del cuerpo

Suponiendo que haya compilado el ejemplo Hello World en el archivo elm.js, puede dejar que Elm se haga cargo de la etiqueta <body> así:

<!DOCTYPE html>
<html>
    <body>
        <script src="elm.js"></script>
        <script>
          Elm.Main.fullscreen()
        </script>
    </body>
</html>

ADVERTENCIA: A veces, algunas extensiones de Chrome interfieren con <body>, lo que puede provocar que la aplicación se interrumpa durante la producción. Se recomienda incrustar siempre en un div específico. Más información aquí.

Incrustar en un Div (u otro nodo DOM)

Alternativamente, al proporcionar un elemento HTML concreto, el código Elm se puede ejecutar en ese elemento de página específico:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('app'))
        </script>
    </body>
</html>

Incrustar como trabajador web (sin interfaz de usuario)

El código Elm también se puede iniciar como un trabajador y comunicarse a través de [puertos] 2:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Worker</title>
    </head>
    <body>
        <script src="elm.js"></script>
        <script>
            var app = Elm.Main.worker();
            app.ports.fromElmToJS.subscribe(function(world) {
                console.log(world)
            });
            app.ports.fromJSToElm.send('hello');
        </script>
    </body>
</html>

1: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Hola Mundo 2: https://www.wikiod.com/es/elm/puertos-interoperabilidad-js

REEMPLAZAR

Una buena manera de aprender sobre Elm es intentar escribir algunas expresiones en REPL (Read-Eval-Print Loop). Abra una consola en su carpeta elm-app (que ha creado en la fase Inicializar y compilar) e intente lo siguiente:

$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>

elm-repl es en realidad una herramienta bastante poderosa. Digamos que creas un archivo Test.elm dentro de tu carpeta elm-app con el siguiente código:

module Test exposing (..)


a = 1


b = "Hello"

Ahora, regresa a tu REPL (que ha permanecido abierto) y escribe:

import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>

Aún más impresionante, si agrega una nueva definición a su archivo Test.elm, como

s = """
Hello,
Goodbye.
"""

Guarde su archivo, regrese una vez más a su REPL, y sin importar ‘Prueba’ nuevamente, la nueva definición estará disponible inmediatamente:

> s
"\nHello,\nGoodbye.\n" : String
>

Es realmente conveniente cuando desea escribir expresiones que ocupan muchas líneas. También es muy útil para probar rápidamente las funciones que acaba de definir. Agregue lo siguiente a su archivo:

f x =
  x + x * x

Guardar y volver al REPL:

> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>

Cada vez que modifica y guarda un archivo que ha importado, y vuelve al REPL e intenta hacer algo, se vuelve a compilar el archivo completo. Por lo tanto, le informará sobre cualquier error en su código. Agrega esto:

c = 2 ++ 2

Trata eso:

> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm

The left argument of (++) is causing a type mismatch.

22|     2 ++ 2
        ^
(++) is expecting the left argument to be a:

    appendable

But the left argument is:

    number

Hint: Only strings, text, and lists are appendable.


> 

Para concluir esta introducción al REPL, agreguemos que elm-repl también conoce los paquetes que ha instalado con elm package install. Por ejemplo:

> import Html.App
> Html.App.beginnerProgram
<function>
    : { model : a, update : b -> a -> a, view : a -> Html.Html b }
      -> Platform.Program Basics.Never
>

1: https://www.wikiod.com/es/elm/primeros-pasos-con-elm-language#Inicializar y compilar

Servidor de compilación local (Reactor Elm)

Elm Reactor es la herramienta esencial para crear prototipos de su aplicación.

Tenga en cuenta que no podrá compilar Main.elm con Elm Reactor, si está utilizando Http.App.programWithFlags o Ports

Ejecutar elm-reactor en un directorio de proyectos iniciará un servidor web con un explorador de proyectos, que le permite compilar cada componente por separado.

Cualquier cambio que realice en su código se actualizará cuando vuelva a cargar la página.

$ elm-reactor                     # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000  # launch elm-reactor on 0.0.0.0:3000

1: https://www.wikiod.com/es/elm/la-arquitectura-del-olmo#Programa con Banderas 2: https://www.wikiod.com/es/elm/puertos-interoperabilidad-js