Looking for elm Answers? Try Ask4KnowledgeBase
Looking for elm Keywords? Try Ask4Keywords

Elm LanguageEmpezando con Elm Language


Observaciones

[Elm] [1] es un lenguaje de programación funcional amigable que compila a JavaScript. Elm se enfoca en GUIs basadas en navegador, aplicaciones de página única.

Los usuarios generalmente lo elogian por:

Versiones

Versión Fecha de lanzamiento
0.18.0 2016-11-14
0.17.1 2016-06-27
0.17 2016-05-10
0.16 2015-11-19
0.15.1 2015-06-30
0.15 2015-04-20

Editores

Átomo

Mesa ligera

Texto sublime

Empuje

Emacs

IntelliJ IDEA

Soportes

Código VS

Incrustar en HTML

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

Incrustar en la etiqueta del cuerpo

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

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

ADVERTENCIA : a veces algunas extensiones de chrome se meten con <body> que puede provocar que su aplicación se interrumpa en la producción. Se recomienda siempre incrustar en un div específico. Más información aquí .

Incrustar en una 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 trabajador y comunicarse a través de los puertos :

<!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>
 

Hola Mundo

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

import Html

main = Html.text "Hello World!"
 

Inicializar y construir

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

Inicialización

Crea una carpeta y navega hacia ella con tu terminal:

$ mkdir elm-app
$ cd elm-app/
 

Inicialice el proyecto de Elm e instale dependencias principales:

$ elm-package install -y
 

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

Cree el punto de entrada para su aplicación Main.elm y pegue el ejemplo de 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 insertado en el HTML. Intenta abrirlo en tu navegador!

Si esto falla con el error, I cannot find module '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 .

Instalación

Para iniciar el desarrollo con Elm, necesita instalar un conjunto de herramientas llamadas 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 desde el sitio web oficial y siga el asistente de instalación.

Usando npm

Puede usar Node Package Manager para instalar la plataforma Elm.

Instalación global:

$ npm install elm -g
 

Instalación local:

$ npm install elm
 

Las herramientas de la plataforma Elm instaladas localmente son accesibles 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-use

$ npm install -g elm-use
 

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

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

Otras lecturas

Aprende a inicializar y construir tu primer proyecto.

Servidor de compilación local (Elm Reactor)

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

La ejecución de 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
 

REPL

Una buena manera de aprender sobre Elm es intentar escribir algunas expresiones en el REPL (Read-Eval-Print Loop). Abra una consola en su carpeta de elm-app (que ha creado en la fase de Inicialización y compilación ) y pruebe 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. Supongamos que crea un archivo Test.elm dentro de su carpeta de elm-app con el siguiente código:

module Test exposing (..)


a = 1


b = "Hello"
 

Ahora, vuelve a tu REPL (que se ha mantenido 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 nuevamente la Test , la nueva definición estará disponible de inmediato:

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

Es realmente conveniente cuando desea escribir expresiones que abarquen 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
 

Guarda y vuelve 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 cualquier cosa, se recompila 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 a la 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
>
 

Guía de estilo y formato olmo.

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
  • limpiar los dif

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'
 
0.16

La herramienta elm-format ayuda al formatear su código fuente automáticamente (normalmente en guardar), en una línea similar al gofmt de Go language. Una vez más, el valor subyacente es tener un estilo coherente y guardar argumentos y flamewars sobre diversos temas como pestañas y espacios o sangría .

Puede instalar elm-format siguiendo las instrucciones en el repositorio de Github . Luego configure su editor para formatear los archivos Elm automáticamente o ejecute elm-format FILE_OR_DIR --yes manualmente.