Elm Setup

Installation und das erste Projekte bauen

Nachdem ich im vorigen Artikel die Werbetrommel für Elm gerührt habe, soll es nun etwas praktischer werden: Wie installiert man Elm und was für Tools benötigt man, um ein erstes Projekt zu bauen? Anschließend sehen wir uns an, wie die Toolchain für ein Projekt aussehen kann, wenn es über das einfache Hello World hinausgeht …

Elm installieren

Als Erstes müssen die Hauptkomponenten Compiler, Paketmanager, REPL und der Entwicklungsserver Reactor installiert werden. Für OS X und Windows gibt es dafür fertige Installationspakete, unter Linux lässt sich Elm mit npm installieren.

Ist dies getan, kann man mit dem Kommandozeilen-Befehl elm-make -h herausfinden, ob alles geklappt hat - das Ergebnis sollte die Versionsnummer, sowie ein paar Befehle zum Kompilieren einer Elm-Datei sein.

$ elm-make -h
elm-make 0.16 (Elm Platform 0.16.0)

Auf der offiziellen Installationsseite finden sich auch Links zu Plugins für die gebräuchlichsten Editoren. Zum Entwickeln mit Elm nutze ich entweder Atom oder Visual Studio Code. Letzterer ist insofern ganz nett, weil das VS Code Plugin für Elm schon erste IDE-Features bereitstellt und Reactor und REPL dort integriert sind.

Das erste Elm-Projekt

Da ich in einem weiteren Artikel näher auf Syntax, Aufbau, etc. eingehen werde, begnügen wir uns erstmal mit einem simplem Hello World-Beispiel und sehen uns an, wie man dies bis zur Anzeige im Browser bekommt. Dazu legt man eine Datei (bspw. Main.elm) mit folgendem Inhalt an:

import Html


main = Html.text "Hello World"

Wie man sieht wollen wir HTML-Output erzeugen – dafür benötigen wir gleich das erste zu installierende Paket elm-html, das die Funktionen zum Rendern von HTML über ein Virtual DOM bereitstellt. Eine dieser Funktionen ist Html.text, mit der wir innerhalb der Funktion main den Output generieren.

Um das Paket Html importieren zu können, müssen wir es über die Kommandozeile installieren:

$ elm-package install evancz/elm-html

Der Paketmanager teilt uns daraufhin mit, was genau installiert wird und welche Abhängigkeiten benötigt werden. Bei der Installation des ersten Pakets wird die Datei elm-package.json angelegt, die quasi das Elm-Äquivalent zur package.json in JavaScript-Projekten ist. Die installierten Pakete werden im Ordner elm-stuff abgelegt, was etwa dem node_modules-Ordner entspricht.

Nun haben wir alles, um die Datei zu bauen und im Browser auszuführen. Dafür starten wir den Entwicklungsserver Reactor mit folgendem Befehl:

$ elm-reactor

Unter der URL http://localhost:8000/Main.elm sollte man nun den Text Hello World sehen können. Reactor ist für die Entwicklung ein sehr nützliches Tool und unterstützt den Time Travel Debugger sowie Hot Swapping, so dass sich Änderungen des Codes auch direkt ohne Reload des Browsers zeigen sollten – letzteres läuft allerdings in Version 0.16.0 noch nicht stabil.

Reactor stellt ebenso den Boilerplate-Output bereit, den man ansonsten selbst erzeugen müsste, nämlich eine HTML-Datei, in deren Kontext das Programm eingebettet wird. Um diese Datei selbst zu erzeugen, lässt sich elm-make nutzen:

$ elm-make Main.elm --output index.html

Die Datei index.html enthält die Elm-Runtime, sowie den eigenen Code plus ein wenig Gluecode, um das Ganze im Kontext der HTML-Seite auszuführen. So kann man die Datei nun beispielsweise hochladen und seinen Eltern zeigen, dass man jetzt auch Elm programmieren kann.

Größere Elm-Projekte bauen

Aktuell ist es noch etwas umständlich, Reactor eigenes HTML und CSS zu geben, mit dem die Seite erzeugt wird. Ebenso erfordern umfangreichere Projekte ein Setup mit eigenen Buildprozess. Nachdem ich zunächst meine ersten kleinen Elm-Projekte mit Gulp gebaut habe, bin ich mittlerweile beim Build mit Webpack gelandet. Dies scheint sich auch als Standard zu etablieren und mit dem elm-webpack-loader gibt es auch ein Tool, was dies schon gut unterstützt.

Webpack erfordert eine etwas umfangreichere Konfiguration, als gute Ausgangsbasis kann aber das elm-webpack-starter Projekt dienen, bei dem ich mir auch das Setup für meine erste, etwas komplexere Elm-Anwendung abgeguckt habe.

Im nächsten Artikel sehen wir uns das Modulsystem in Elm genauer an.