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:
- No hay excepciones de tiempo de ejecución.
- Los mejores errores del compilador
- La facilidad de refactorización.
- Sistema de tipo expresivo
- The Elm Architecture , de la que se inspira Redux.
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'
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.
