What is Elm?

• Compile to Javascript
• ML Inspired
• Functional

Elm is a...

...language

Compile to Javascript

• Frontend language
• Web Assembly possible
• Serverside possible
• Native and other targets possible

ML Inspired

• Early 1970s, University of Edinburgh
• Haskell, Ocaml, F#, Elm
• Hindley-Milner type system (strongly typed)

"there is a formal proof that a well-typed ML program does not cause runtime type errors" -Robin Milner -Wikipedia

https://en.wikipedia.org/wiki/ML_(programming_language)

Functional

• Immutable data
• Pure functions!
• Side effects are grouped/isolated

Why Elm?

• User Focused Design
• Elm Architecture
• No runtime exceptions
• Time travel debugger!

User Focused Design

Usability:
"the time it takes to get [from] a novice level to actually a product that you can show your friends and be like, “Hey, check this out.”"

Helpful errors:

"[let's] change the relationship people have with the compiler from adversary to assistant”"

Gradual Learning:

"You can design the language such that as someone gets started and gets productive, slowly they realize these concepts in a way that builds upon each other in a way that works for people"

http://elm-lang.org/blog/compiler-errors-for-humans

Elm Architecture

Update:
Given the model and some message (event), how do we generate the new state?

Model:

The (only) place where the state of your application is tracked and stored

View:

Given the model, how do I render the relevant HTML DOM code? (Or PDF, SVG, etc)

Elm Architecture 2

Commands:
Tell the runtime to do something with side effects! (Generate random numbers, HTTP requests, access local storage, etc)

Subscriptions:

Listen for external events (keyboard, mouse, websockets, browser, etc)

But wait, how will anything ever happen?

Maybe?

There's no NULL, just Maybe

> type Maybe a = Nothing | Just a

> Nothing
Nothing : Maybe a

> Just
<function> : a -> Maybe a

> Just "hello"
Just "hello" : Maybe String

> Just 1.618
Just 1.618 : Maybe Float

Maybe 2?

There's no NULL, just Maybe

type alias User =
  { name : String
  , age : Maybe Int
  }

canBuyAlcohol : User -> Bool
canBuyAlcohol user =
  case user.age of
    Nothing ->
      False

    Just age ->
      age >= 21

https://guide.elm-lang.org/error_handling/maybe.html

How?

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 "+" ]
    ]