elm-live

Hot reloading

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.

Dazu muss ein weiteres Programm, das sich elm-live nennt, installiert werden:

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.

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.