An Introduction to Elm

Elm is a delightful language for reliable webapps.

Website: https://elm-lang.org
Hannover Meetup: Hannover Elm Language Meetup (Website)

Agenda

  • Motivation
  • Installation
  • Crowd Coding

Motivation

Elm is a language that compiles to JavaScript. Its domain is webapps and thus it compares to other popular languages and frameworks such as React, TypeScript or Reason.

Elm is reliable.
Elm guarantees that you will have no runtime exceptions in practise by using type interference to be explicit about corner cases. This helps greatly in maintaining projects even of considerable size.

Elm is beginner-friendly.
Elm's helpful error messages aid beginner's in learning the language and encourages them continually to use good coding practises.

Installation

One of us will share their screen while they install Elm and elm-format. The others can follow along and share their screen if they are stuck.

The goal is that everyone is able to write an Elm program with syntax highlighting and automatic code formatting, and to compile it.

Crowd Coding

Buttons program

One of us will share their screen while the others will guide them to evolve a hello world program into the buttons program, explaining syntax and concepts as we go.

Hello World

import Html exposing (text)

main =
    text "Hello World!"

Buttons Program

(see next page)

import Browser exposing (sandbox)
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

main =
    sandbox { init = 0, update = update, view = view }

type Msg = Increment | Decrement

update msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1

view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (String.fromInt model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]

Resources

Learn Elm
Come to the Meetup