Elm - finde ich super!

A Cure for Runtime Errors - Vortrag vom MATHEMA Campus 2018

von Martin Grotz, 2018-04-22

Ich hatte kürzlich die wunderbare Gelegenheit, auf dem MATHEMA Campus einen Vortrag über Elm zu halten. Schwerpunkt war hierbei, wie Elm dabei hilft, Laufzeitfehler in Web-Frontends zu verhindern. Daher hieß der Vortrag dann auch "A Cure for Runtime Errors - Funktionale fehlerfreie Frontends mit Elm". Ich habe die Folien zum Vortrag als HTML-Seite hochgeladen.

Die Code-Beispiele finden sich auf meinem Github-Account.

Das erste Projekt: Ein Kartenspiel

von Martin Grotz, 2018-04-18

Am einfachsten lernt man mit einer neuen Programmiersprache meiner Meinung nach umzugehen, indem man ein konkretes kleines Projekt in Angriff nimmt.

Viele der Herausforderungen zeigen sich nämlich erst, wenn man zumindest ein klein wenig über Hello World hinausgeht.

Da es aber auch nicht zu kompliziert werden soll, habe ich mich für eine Einzelspieler-Browser-only-Variante eines Kartenspiels entschieden:
Die Regeln des Spiels "Schnarch Schnarch" sind überschaubar und auch im Internet verfügbar.

Im Laufe der Entwicklung werde ich auch immer wieder mal Artikel einschieben, die jeweils Funktionalität oder Syntax von Elm erklären, die ich danach dann gebrauchen werde. So wird es nicht zu viel trockene Theorie, aber sie fällt auch nicht ganz untern den Tisch!

Jetzt ist aber erstmal nur das Anlegen des Projektskeletts dran. Hierzu verwenden wir erneut die praktischen Befehle, die uns create-elm-app zur Verfügung stellt: elm-app create schnarchschnarch-sp-elm

Anschließend wird erstmal aufgeräumt: Im public-Ordner, der die statischen Ressourcen enthält, werfen wir alles außer index.html weg.

Nun folgt noch der source-Ordner, der den eigentlichen Elm-Quellcode enthält. Hier entfernen wir in der index.js-Datei erstmal die Verbindung zum ServiceWorker durch das Löschen der Zeilen import registerServiceWorker from './registerServiceWorker'; und registerServiceWorker(); Die zugehörige Datei registerServiceWorker.js wird gelöscht.

In Main.elm - dem Einsprungpunkt jedes Elm-Programms - vereinfachen wir die view-Funktion derart, dass sie folgendermaßen aussieht:

view : Model -> Html Msg
view model =
    div [] []
Dadurch wird nurmehr eine Seite mit einem leeren div erzeugt.

Damit ist die Leinwand vorbereitet, um jetzt mit dem nächsten Schritt weitermachen zu können: Die Fachdomäne analysieren und daraus möglichst gute Typdefinitionen zu erstellen.

Elm-Schnellstart

von Martin Grotz, 2018-04-17

Die Installation von Elm ist sehr einfach. Die einzige Voraussetzung ist ein aktuelles node.js.

Anschließend kann man alle wichtigen Tools und die Programmiersprache selbst mit einem einzigen Befehl herunterladen: npm install elm elm-format create-elm-app --global Danach können wir uns schon eine erste App erzeugen und in den neu erzeugten Ordner wechseln: elm-app create hello-world
cd hello-world
Dort starten wir den Entwicklungswebserver via elm-app start Damit sind wir auch schon fertig und können uns den Output unseres Elm-Programms im Browser anschauen. Dazu rufen wir die Standard-URL des Entwicklungswebservers auf: http://localhost:3000/