Un langage que tout
le monde Elm !

@JoGrenat #elmlang

Jordane Grenat

2003

2008-2009

2014

Impératif -> Déclaratif

Virtual DOM

One-way data flow

Impératif -> Déclaratif

const numbers = [1, 2, 3, 4, 5];
let squares = [];

for (const i = 0, length = numbers.length; i < length; i++) {
    squares.push(numbers[i] * numbers[i]);
}
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n);

Impératif -> Déclaratif

ES2015

ES5

Typage

Immutabilité

Programmation Fonctionnelle

One-way data flow

Components

Virtual DOM

Je suis désolé...

DISCLAIMER

"Elm est un langage fonctionnel typé qui compile en JavaScript"

JS Interop

Runtime
Exception

Bonnes perfs

Versions fiables

La syntaxe

The Elm Architecture (TEA)

Communication avec 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 avec 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);
}

Tests

module Tests exposing (..)

import Test exposing (..)
import Expect
import App exposing (update, Msg(CoinFlipped), CoinState(Heads))


all : Test
all =
    describe "A CoinFlipped should start a new game"
        [ test  <|
            \() ->
                Expect.equal (update (CoinFlipped Heads) NoGame) (Game Heads)
        ]

Questions ?

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

Made with Slides.com