Hot reloading

Optimierung des Arbeitsablaufs

Besonderen Komfort kannst du erreichen, wenn du ein Tool nutzt, das dein Elm-Programm bei Änderungen automatisch übersetzt und das Ergebnis automatisch im Browser aktualisiert. Man bezeichnet diese Technik (auch außerhalb von Elm) als "hot reloading". Bei entsprechender Konfiguration können sogar Benutzereingaben und der aktuelle Zustand des Programmablaufs erhalten werden, obwohl das Programm neu übersetzt wurde.

Das Video gibt dir einen ersten Eindruck zum möglichen Komfort. Besonders interessant wird das bei fortgeschritteneren Programmen, die auch Benutzereingaben und einen Zustand des Programmablaufs enthalten. Jedes mal, wenn der Elm-Code (mit Ctrl-S) gespeichert wird, wird das Programm neu übersetzt und automatisch die Darstellung im Browser aktualisiert.

elm-live

Ein Programm, das diese Funktionalität bereitstellt, ist elm-live. Du findest hier eine kurze Einführung zur Installation und Benutzung. Weitere Informationen und Optionen findest du unter www.elm-live.com.

Zuerst musst du elm-live installieren. Das geht am einfachsten mit dem Node-Package-Manager (npm). Dazu gibst du im Terminal folgendes ein:

npm install elm-live -g

Statt den Elm-Compiler mit elm make aufzurufen, wird dann elm-live benutzt, das im Hintergrund den Compiler aufruft und einen lokalen Webserver startet. Du startest den Prozess mit

elm-live src/Main.elm

für die Variante mit einer einzigen HTML-Datei oder mit

elm-live src/Main.elm -- --output=elmapp.js

für die Variante mit separater Javascript-Datei.

In beiden Fällen öffnest du nicht direkt die HTML-Datei über den Dateimanager, sondern musst über den lokal gestarteten Webserver darauf zugreifen. Diesen erreichst du unter der Adresse localhost:8000 Beenden kannst du den Server mit Ctrl-C.

Bei beiden Varianten wird der Browser automatisch aktualisiert, um die Änderungen im Elm-Code zu berücksichtigen. Allerdings wird das Programm dabei jedes Mal neu gestartet. Um den Zustand der Anwendung - soweit möglich - zu erhalten, kannst du die Option --hot verwenden.

elm-live src/Main.elm --hot -- --output=elmapp.js

vite und elm-watch

Noch etwas komfortabler wird es mit vite und elm-watch. Ein Vorteil ist z.B. dass du bei Fehlern im Elm-Code eine Fehlermeldung im Browser erhältst, auf die du direkt klicken kannst, um zur entsprechenden Stelle im Elm-Code in Visual Studio Code zu springen. Weitere Informationen findest du unter github.com/ryan-haskell/vite-plugin-elm-watch oder im Video auf YouTube, das der Autor des Plugins dazu erstellt hat. Das Video ist übrigens Teil einer ganzen Serie, die sich mit Elm beschäftigt und durchaus sehenswert ist.