Highway

@JoGrenat #elmlang

to

Elm

Highway

to

Elm

Functional

programming

Immutability

Components

Types

One-way

data flow

Virtual DOM

Happiness (DX)

"​Elm is a functional language that compiles to JavaScript. [...] Elm has a very strong emphasis on simplicity, ease-of-use, and quality tooling."

JS Interop

Runtime
Exception

Great performance

Enforced Semantic Versioning

Syntax

let
  twentyFour =
    3 * 8

  sixteen =
    4 * 4
in
  twentyFour + sixteen
case myStringMaybe of
  Just myString -> myString
  Nothing -> "Empty"


case myListOfString of
  head :: tail -> head
  [] -> "no value in list"


case myNumber of
  0 -> "0"
  1 -> "1"
  _ -> "Nor 0 nor 1"

The Elm Architecture (TEA)

Cmd Msg

Communication with JS


main : Program Never Model Msg
main =
    program { view = view, init = init, update = update, subscriptions = subscriptions }

-- ...


subscriptions : Model -> Sub Msg
subscriptions model =
    usernameFromLS ReceivedUsernameFromLS

port registerUsernameToLS : String -> Cmd msg

port usernameFromLS : (String -> msg) -> Sub msg

Communication with JS

const app = Elm.Main.embed(root);

app.ports.registerUsernameToLS.subscribe(username => {
    window.localStorage.setItem('username', username)
});

if (window.localStorage.getItem('username') !== null) {
    const username = window.localStorage.getItem('username');
    app.ports.usernameFromLS.send(username);
}

Questions ?

Slides : http://slides.com/ereold/elmlang-workshop 

Links

Slides : http://slides.com/ereold/elmlang-workshop 

Official website: http://elm-lang.org

Syntax: http://elm-lang.org/docs/syntax

Feedback: http://bit.ly/2DEBZud

Made with Slides.com