Elm Language Tutorial
Iniziare con Elm Language

Osservazioni

Versioni

Installazione

Per avviare lo sviluppo con Elm, è necessario installare un set di strumenti chiamato elm-platform .

Comprende: elm-make , elm-reactor , elm-repl e elm-package .

Tutti questi strumenti sono disponibili tramite CLI, in altre parole puoi utilizzarli dal tuo terminale.

Scegli uno dei seguenti metodi per installare Elm:

Utilizzo del programma di installazione

Scarica il programma di installazione dal sito Web ufficiale e segui la procedura guidata di installazione.

Utilizzando npm

È possibile utilizzare Node Package Manager per installare la piattaforma Elm.

Installazione globale:

$ npm install elm -g

Installazione locale:

$ npm install elm

Gli strumenti della piattaforma Elm installati localmente sono accessibili tramite:

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

Utilizzando homebrew

$ brew install elm

Passa tra le versioni con elm-use

Installa l'uso di elm

$ npm install -g elm-use

Passa a una versione di olmo più vecchia o più recente

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

Ulteriori letture

Scopri come inizializzare e creare il tuo primo progetto.

Ciao mondo

Vedi come compilare questo codice in Inizializza e crea

import Html

main = Html.text "Hello World!"

Editors

Atomo

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

Tavolo luminoso

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

Testo sublime

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

Vim

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

Emacs

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

IntelliJ IDEA

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

Parentesi

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

Codice VS.

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

Inizializza e crea

Dovresti avere installata la piattaforma Elm sul tuo computer, il seguente tutorial è scritto con l'assunto che hai familiarità con il terminale.

Inizializzazione

Crea una cartella e naviga con il tuo terminale:

$ mkdir elm-app
$ cd elm-app/

Inizializza il progetto Elm e installa le dipendenze principali:

$ elm-package install -y

elm-package.json cartella elm-package.json e elm-stuff dovrebbe apparire nel tuo progetto.

Crea il punto di ingresso per l'applicazione Main.elm e incolla l'esempio Hello World in esso.

Costruire il progetto

Per creare il tuo primo progetto, esegui:

$ elm-make Main.elm

Questo produrrà index.html con il file Main.elm (e tutte le dipendenze) compilato in JavaScript e inserito nel codice HTML. Prova ad aprirlo nel tuo browser!

Se questo non riesce con l'errore I cannot find module 'Html'. significa che non stai usando l'ultima versione di Elm. Puoi risolvere il problema o aggiornando Elm e ripristinando il primo passo, o con il seguente comando:

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

Nel caso tu abbia il tuo file index.html (ad esempio quando lavori con le porte), puoi anche compilare i tuoi file Elm in un file JavaScript:

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

Maggiori informazioni nell'esempio Incorporamento in HTML .

Guida allo stile e formato elm

La guida di stile ufficiale si trova sulla homepage e generalmente si riferisce a:

• leggibilità (invece di compattezza)
• facilità di modifica
• pulito diff

Ciò significa che, ad esempio, questo:

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'

è considerato migliore di:

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'

Incorporamento in HTML

Ci sono tre possibilità per inserire il codice Elm in una pagina HTML esistente.

Incorporare nel tag del corpo

Supponendo che tu abbia compilato l'esempio Hello World nel file elm.js , puoi consentire a Elm di assumere il tag <body> modo:

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

ATTENZIONE : a volte alcune estensioni di Chrome fanno confusione con <body> che può causare l'interruzione della produzione della tua app. Si consiglia di incorporare sempre un div specifico. Maggiori informazioni qui .

Incorporare in un Div (o altro nodo DOM)

In alternativa, fornendo un elemento HTML concreto, il codice di Elm può essere eseguito in quell'elemento di pagina specifico:

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

Incorporamento come Web worker (senza interfaccia utente)

Il codice di Elm può anche essere avviato come operatore e comunicare attraverso le porte :

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

REPL

Un buon modo per conoscere Elm è provare a scrivere alcune espressioni nel REPL (Read-Eval-Print Loop). Apri una console nella tua cartella elm-app (che hai creato nella fase Initialize e build ) e prova quanto segue:

$ 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 è in realtà uno strumento piuttosto potente. Supponiamo che tu crei un file Test.elm all'interno della tua cartella elm-app con il seguente codice:

module Test exposing (..)


a = 1


b = "Hello"

Ora, torni al REPL (che è rimasto aperto) e digita:

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

Ancora più impressionante, se aggiungi una nuova definizione al tuo file Test.elm , ad esempio

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

Salva il tuo file, torna ancora al tuo REPL, e senza importare di nuovo Test , la nuova definizione è immediatamente disponibile:

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

È davvero comodo quando vuoi scrivere espressioni che abbracciano molte linee. È anche molto utile per testare rapidamente le funzioni che hai appena definito. Aggiungi il seguente al tuo file:

f x =
  x + x * x

Salva e torna alla REPL:

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

Ogni volta che si modifica e si salva un file che è stato importato e si torna al REPL e si tenta di fare qualcosa, il file completo viene ricompilato. Pertanto ti informerà di eventuali errori nel tuo codice. Aggiungi questo:

c = 2 ++ 2

Prova questo:

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


> 

Per concludere questa introduzione al REPL, aggiungiamo che elm-repl conosce anche i pacchetti che hai installato con l' elm package install . Per esempio:

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

Local Build Server (Elm Reactor)

Elm Reactor è lo strumento essenziale per la prototipazione della tua applicazione.

Si noti che non sarà possibile compilare Main.elm con Elm Reactor, se si utilizza Http.App.programWithFlags o Ports

L'esecuzione di elm-reactor in una directory di progetto avvierà un server Web con un project explorer, che consente di compilare ogni componente separato.

Ogni modifica apportata al tuo codice viene aggiornata quando ricarichi la pagina.

$ 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