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
Workshop - Highway to Elm!
By ereold
Workshop - Highway to Elm!
- 1,582