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,817