Elm Language Tutorial
Erste Schritte mit Elm Language

Bemerkungen

Versionen

Installation

Um mit der Entwicklung mit Elm zu beginnen, müssen Sie eine Reihe von Tools namens elm-platform installieren.

Es umfasst: Ulmen-Hersteller , Ulmen-Reaktor , Ulmen-Replik und Ulmen-Paket .

Alle diese Tools sind über CLI verfügbar, dh Sie können sie von Ihrem Terminal aus verwenden.

Wählen Sie eine der folgenden Methoden, um Elm zu installieren:

Verwenden des Installationsprogramms

Laden Sie das Installationsprogramm von der offiziellen Website herunter und folgen Sie dem Installationsassistenten.

Npm verwenden

Sie können den Node Package Manager verwenden , um die Elm-Plattform zu installieren.

Globale Installation:

$ npm install elm -g

Lokale Installation:

$ npm install elm

Auf lokal installierte Elm-Plattform-Tools kann über Folgendes zugegriffen werden:

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

Homebrew verwenden

$ brew install elm

Wechseln Sie zwischen Versionen mit Ulmenutzung

Installieren Sie elm-use

$ npm install -g elm-use

Wechseln Sie zu einer älteren oder neueren Ulmenversion

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

Lesen Sie weiter

Erfahren Sie, wie Sie Ihr erstes Projekt initialisieren und erstellen .

Hallo Welt

Informationen zum Kompilieren dieses Codes finden Sie in Initialize and Build

import Html

main = Html.text "Hello World!"

Redakteure

Atom

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

Leuchttisch

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

Erhabener Text

• 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

Klammern

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

VS-Code

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

Initialisieren und bauen

Sie sollten die Elm-Plattform auf Ihrem Computer installiert haben. Im folgenden Tutorial wird davon ausgegangen, dass Sie mit dem Terminal vertraut sind.

Initialisierung

Erstellen Sie einen Ordner und navigieren Sie mit Ihrem Terminal zu ihm:

$ mkdir elm-app
$ cd elm-app/

Initialisieren Sie das Elm-Projekt und installieren Sie die Kernabhängigkeiten:

$ elm-package install -y

elm-package.json Ordner elm-package.json und elm-stuff sollte in Ihrem Projekt elm-package.json .

Erstellen Sie den Einstiegspunkt für Ihre Anwendung Main.elm und fügen Sie das Beispiel " Hello World" ein .

Projekt aufbauen

Führen Sie zum Erstellen Ihres ersten Projekts Folgendes aus:

$ elm-make Main.elm

Dadurch wird index.html mit der Main.elm Datei (und allen Abhängigkeiten) erstellt, die in JavaScript kompiliert und in den HTML-Code eingebettet ist. Versuchen Sie es und öffnen Sie es in Ihrem Browser!

Wenn dies mit dem Fehler fehlschlägt, kann I cannot find module 'Html'. Dies bedeutet, dass Sie nicht die neueste Version von Elm verwenden. Sie können das Problem entweder durch ein Upgrade von Elm lösen und den ersten Schritt wiederholen, oder mit dem folgenden Befehl:

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

Falls Sie über eine eigene index.html Datei verfügen (z. B. beim Arbeiten mit Ports), können Sie Ihre Elm-Dateien auch in eine JavaScript-Datei kompilieren:

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

Mehr dazu im Beispiel Einbetten in HTML .

Style Guide und Ulmenformat

Der offizielle Styleguide befindet sich auf der Homepage und gilt in der Regel für:

• Lesbarkeit (statt Kompaktheit)
• leichte Modifikation
• saubere Unterschiede

Dies bedeutet zum Beispiel Folgendes:

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'

ist besser als:

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'

Einbetten in HTML

Es gibt drei Möglichkeiten, Elm-Code in eine vorhandene HTML-Seite einzufügen.

In den Body-Tag einbetten

Angenommen, Sie haben das Hello World- Beispiel in elm.js Datei elm.js kompiliert, so können Sie Elm das <body> -Tag wie elm.js übernehmen lassen:

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

WARNUNG : Manchmal führen einige Chrome-Erweiterungen zu <body> was dazu führen kann, dass Ihre App in der Produktion ausfällt. Es wird empfohlen, immer in ein bestimmtes div einzubetten. Mehr Infos hier .

In ein Div (oder einen anderen DOM-Knoten) einbetten

Alternativ kann durch Angabe eines konkreten HTML-Elements Elm-Code in diesem bestimmten Seitenelement ausgeführt werden:

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

Als Web-Worker einbetten (keine Benutzeroberfläche)

Ulmencode kann auch als Worker gestartet werden und über Ports kommunizieren:

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

Eine gute Möglichkeit, etwas über Elm zu lernen, besteht darin, einige Ausdrücke in die REPL (Read-Eval-Print Loop) zu schreiben. Öffnen Sie eine Konsole in Ihrem elm-app Ordner (den Sie in der Initialisierungs- und Erstellungsphase erstellt haben ) und versuchen Sie Folgendes:

$ 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 ist eigentlich ein ziemlich mächtiges Werkzeug. Test.elm , Sie erstellen eine Test.elm Datei in Ihrem elm-app Ordner mit dem folgenden Code:

module Test exposing (..)


a = 1


b = "Hello"

Nun kehren Sie zu Ihrer REPL (die geöffnet bleibt) zurück und geben Folgendes ein:

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

Noch beeindruckender ist es, wenn Sie Ihrer Test.elm Datei eine neue Definition Test.elm , z

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

Speichern Sie Ihre Datei, gehen Sie noch einmal zu Ihrer REPL zurück, und ohne erneuten Test zu importieren, ist die neue Definition sofort verfügbar:

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

Dies ist sehr praktisch, wenn Sie Ausdrücke schreiben möchten, die viele Zeilen umfassen. Es ist auch sehr nützlich, um Funktionen, die Sie gerade definiert haben, schnell zu testen. Fügen Sie Ihrer Datei Folgendes hinzu:

f x =
  x + x * x

Speichern Sie und gehen Sie zurück zur REPL:

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

Jedes Mal, wenn Sie eine importierte Datei ändern und speichern, und Sie zur REPL zurückkehren und versuchen, etwas zu tun, wird die vollständige Datei neu kompiliert. Daher werden Sie über Fehler in Ihrem Code informiert. Füge das hinzu:

c = 2 ++ 2

Versuch das:

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


> 

Zum Abschluss dieser Einführung in REPL elm-repl wir hinzufügen, dass elm-repl auch über die Pakete elm-repl , die Sie mit elm package install . Zum Beispiel:

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

Lokaler Build-Server (Ulmenreaktor)

Ulmenreaktor ist das unverzichtbare Werkzeug für das Prototyping Ihrer Anwendung.

Bitte beachten Sie, dass Sie Main.elm mit Elm Reactor nicht kompilieren Main.elm , wenn Sie Http.App.programWithFlags oder Ports verwenden

Wenn Sie elm-inductor in einem Projektverzeichnis ausführen, wird ein Webserver mit einem Projektexplorer gestartet, mit dem Sie jede einzelne Komponente kompilieren können.

Alle Änderungen, die Sie an Ihrem Code vornehmen, werden beim erneuten Laden der Seite aktualisiert.

$ 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