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
Un langage que tout le monde Elm !
By ereold
Un langage que tout le monde Elm !
- 2,972