[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:
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 |
Hay tres posibilidades para insertar el código Elm en una página HTML existente.
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í .
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>
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>
Vea cómo compilar este código en Inicializar y compilar
import Html
main = Html.text "Hello World!"
Debe tener la plataforma Elm instalada en su computadora; el siguiente tutorial está escrito con el supuesto de que está familiarizado con el terminal.
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.
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 .
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:
Descargue el instalador desde el sitio web oficial y siga el asistente de instalación.
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/
$ brew install elm
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
Aprende a inicializar y construir tu primer proyecto.
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
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
>
La guía de estilo oficial se encuentra en la página de inicio y generalmente incluye:
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 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.