Elm Architecture

Model

View

Update

Elm Architecture

Model =

the Data Structure we pass around

Model

type alias Model =
  { input : String
  , messages : List String
  }

Model

type alias Model =
  { input : String
  , messages : List String
  }

Type alias

Model

Type alias =

give name to a set of fields in a record

Record =

set of key value pairs

Model

type alias Model =
  { input : String
  , messages : List String
  }

A record (somewhat like an object in Js, but typechecked)

Model

init : (Model, Cmd Msg)
init =
  (Model "" [], Cmd.none)

Model

Type signature

init : (Model, Cmd Msg)
init =
  (Model "" [], Cmd.none)

Elm Architecture

Update =

the function that does the change of state 

Update

type Msg
  = Input String
  | Send
  | NewMessage String

Update

type Msg
  = Input String
  | Send
  | NewMessage String

Message is a Union Type

Update

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
  case msg of
    Input newInput ->
      (Model newInput messages, Cmd.none)

    Send ->
      (Model "" messages, WebSocket.send "ws://echo.websocket.org" input)

    NewMessage str ->
      (Model input (str :: messages), Cmd.none)

Update

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
  case msg of
    Input newInput ->
      (Model newInput messages, Cmd.none)

    Send ->
      (Model "" messages, WebSocket.send "ws://echo.websocket.org" input)

    NewMessage str ->
      (Model input (str :: messages), Cmd.none)

Pattern Matching

Update

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
  case msg of
    Input newInput ->
      (Model newInput messages, Cmd.none)

    Send ->
      (Model "" messages, WebSocket.send "ws://echo.websocket.org" input)

    NewMessage str ->
      (Model input (str :: messages), Cmd.none)

Constructor

Update

Side Effects

update : Msg -> Model -> (Model, Cmd Msg)
update msg {input, messages} =
  case msg of
    Input newInput ->
      (Model newInput messages, Cmd.none)

    Send ->
      (Model "" messages, WebSocket.send "ws://echo.websocket.org" input)

    NewMessage str ->
      (Model input (str :: messages), Cmd.none)

Subscription =

updates every time there is a new event

Elm Architecture

Elm Architecture

subscriptions : Model -> Sub Msg
subscriptions model =
  WebSocket.listen "ws://echo.websocket.org" NewMessage

Elm Architecture

View =

the code that renders from the Model

View

view : Model -> Html Msg
view model =
  div []
    [ div [] (List.map viewMessage model.messages)
    , input [onInput Input] []
    , button [onClick Send] [text "Send"]
    ]


viewMessage : String -> Html msg
viewMessage msg =
  div [] [ text msg ]

Main

(where you wire everything up)

Elm Architecture

Main

main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

Main

main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

Wiring up the Program

Tools

Tools

• Package Manager (elm-package)

• Automatic Recompilation (elm-reactor)

• Editor Extensions

Tools

Package Manager (elm-package)

• enforced semantic versioning

• central package repository package.elm-lang.com (also hosts the docs)

• no way to include repos outside of package.elm-lang.com

Tools

Automatic recompilation

 (elm-reactor)

• Used to be the debugger

• For 0.17 only does automatic recompilation of code

Tools

Editor Extensions

• Atom

• Emacs

• LightTable

• Sublime Text

Tools

Emacs (my setup)

• elm-mode

• flycheck

• company

• elm-oracle (broken)

Why use statically typed pure Functional languages?

Why it's worth to use new language research

No runtime exceptions

Why it's worth to use new language research

No race conditions

Why it's worth to use new language research

Better tools

Why it's worth to use new language research

Less code

Why it's worth to use new language research

Ease of parallelisation

How is Elm different from Haskell/Purescript?

How is Elm different from Haskell/Purescript?

Purescript is a new Strongly Typed Functional language that targets Javascript

How is Elm different from Haskell/Purescript?

Haskell is a Strongly Typed Functional language that targets native & more platforms

How is Elm different from Haskell/Purescript?

Elm is against higher abstractions

(e.g. no type classes)

How is Elm different from Haskell/Purescript?

Purescript has more flexible Javascript interop

How is Elm different from Haskell/Purescript?

An Elm program has to fit the Elm Architecture

(which is good if it fits, less if it doesn't. You don't have to conform to a specific architecture in Purescript/Haskell)

A few words of caution

A word of caution

Native modules

There is no path to get a library that wraps a javascript library on elm-package (e.g. elm-d3)

A word of caution

Elm is still experimental

Elm is still subject to big changes, expect to have to rewrite some of your code with a new version.

A word of caution

Elm lacks a roadmap

There are beta previews, and you can keep up by looking at the changes in the compiler

A word of caution

Your program should fit the Elm Architecture

Elm is very opinionated and going against the grain will result in pain (been there, done that)

A word of caution

The design is only up to Evan

So if you want to contribute to, say, the compiler you'll find a bottleneck there.

Once upon a time there was FRP

Once upon a time there was FRP

0.17 abandoned FRP, to obtain a better learning curve

If you see terms such as Signal, Mailbox, Address you're looking at Elm < 0.17.