readme.md

Workshop: ELM

Skript

Mein Skript aus dem Workshop findet ihr hier

Beispiel-Apps

Taschenrechner

hier

Uhr

hier

Tests

Testframework / Benutzung hier

Ihr braucht dazu noch das elm-test Tool

Einfach im Verzeichnis

elm test

aufrufen.

Linksammlung

Elm

• Homepage
• Packages Docs
• Syntax
• Javascript -> Elm
• Elm Bootstrap

nützliche Docs

• Elm Core
• Elm Html
• Elm Bootstrap Docs

Hintergrund

• Elm Records
• the Elm Architecture

Tools

• Installation
• elm-format
• elm-oracle
• vscode-elm

Installation

Elm

Elm selbst kann unter:

• Windows entweder als Installer oder über NPM installiert werden.
• Mac ebenfalls als Installer oder NPM
• Linux über NPM

installiert werden.

Persönlich bevorzuge ich den Weg über NPM weil das überall geht:

npm install -g elm

bzw.

sudo install -g elm

Elm Format

Elm Format ist sehr nützlich (automatische Quellcodeformatierung) und ich empfehle es mit zu installieren, auch wenn es am Anfang etwas gewöhnungsbedürftig ist.

Elm Format kann man am einfachsten installieren, indem man die Binary irgendwo in seinen Pfad ablegt.

Die Binaries findet man für:

• Windows hier
• Mac hier
• Linux hier

Elm Oracle

Manche Editor-Plugins (elm-vim, atom-elm, elm-mode (Emacs), Elm.tmLanguage (Sublime), elm-light (LightTable)) benötigen Elm Oracle

Die Installation läuft über NPM:

npm install -g elm-oracle

bzw.

sudo npm install -g elm-oracle

Editorsupport

VS.code

siehe vscode-elm für elm-format kann noch VS.code elm-format installiert werden

Emacs

ist in MELPA (elm-mode) verfügbar, elm-oracle und elm-format sollten installiert sein.

hier ist der relevante Teil meiner Emacs-Config:

;; -----------------------------------------------------------------------------
;; ELM
(require 'elm-mode)
(setq elm-format-on-save t)
(add-hook 'elm-mode-hook #'elm-oracle-setup-completion)
(add-hook 'elm-mode-hook 'linum-mode)
(add-hook 'elm-mode-hook 'flycheck-mode)

;; Company Backend
(add-to-list 'company-backends 'company-elm)

;; Flycheck
(require 'flycheck-elm)
(eval-after-load 'flycheck
  '(add-hook 'flycheck-mode-hook #'flycheck-elm-setup))

außerdem habe ich folgendes in customize-mode (bzw. .gnu-emacs-custom), damit elm-format beim Speichern benutzt wird:

 '(elm-format-on-save t)

andere

siehe "Configure Your Editor" hier

Starter

Um schnell einen Startpunkt für eine eigene Anwendung zu haben, findest Du im Verzeichnis ./Starter/Demo bzw. ./Starter/Bootstrap zwei Startpunkte für eigene Projekte:

• die Elm Demo-App - einfacher Ausgangspunkt ohne Cmd/Sub
• Bootstrap Starter-App - inkl. Bootsrap mit Cmd/Sub