Functional front-end programming with Elm

Who am I?

Jørn Ølmheim, SUB Well Planning and Integrity

  • Close to 20 years experience
  • Software craftsman
  • Polyglot programmer
  • Leading Advisor, Corporate IT


Elm basics

History

  • Written by Evan Czaplicki in 2012
  • Some of the goals of the new language was:
    • No runtime exceptions
    • Strong typing
    • Functional style - immutability, idempotency
    • Simplicity and speed
    • Compiles to JavaScript

Repl demo

Excercise

Play around a bit in the repl with the basics and functions.

Elm Architecture

Or if you would prefer code...


              import Html exposing (..)

              -- MODEL
              type alias Model = { ... }

              -- UPDATE
              type Msg = Reset | ...

              update : Msg -> Model -> Model
              update msg model =
              case msg of
                Reset -> ...
                ...

              -- VIEW
              view : Model -> Html Msg
              view model =
              ...

Our first web-app


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

main =
  Html.beginnerProgram { model = model, view = view, update = update }

-- MODEL
type alias Model = Int

model : Model
model =
  0

-- UPDATE
type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

-- VIEW
view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

Excercise

Add a button and functionality to reset the counter to the page.

Test driven development

FizzBuzz in Elm

Demo

Resources and further reading