Elm-moi tendre
Elm-moi vrai
1. What
2. Why
3. How
1. What
Wait what
I 💘
- Language/framework
- Released in 2012
- Functional (immutable)
- Compiles to JS
- Used to create webapps
2. Why
1. Write some JS code
2. Save your file
3. Reload the page
4. TypeError: undefined is not a function
5. Try to identify the bug
6. TypeError: undefined
1. Write some Elm code
2. Save your file
3. Check compiler errors
4. Go to step 1
No runtime exceptions
= robust apps
Compiler hints
Excellent intro to functional programming
Goodbye OOP
Simple architecture
No magic
Time travelling debugger
More on that later
3. How
Language basics
-- Function definition
sayHello name =
"Hello " ++ name ++ "!"
-- Function call
sayHello "Liip"
-- Variables
nameLength name =
let
nameLengthStr = String.fromInt (String.length name)
in
"Your name " ++ name ++ " is " ++ nameLengthStr ++ " characters long."
-- Lists
List.map nameLength [ "Alice", "Bob", "Cédric" ]Language basics
-- Conditions
isAllowedToDrive name vehicleType =
name == "Cédric" && vehicleType == "bulldozer"
if isAllowedToDrive "Cédric" "car" then
"Go ahead."
else
"You're not allowed to drive"
-- Type safety: compiler error
isAllowedToDrive "Cédric" 27
-- Type safety: compiler error
nameLength name =
let
nameLengthStr = String.length name
in
"Your name " ++ name ++ " is " ++ nameLengthStr ++ " characters long."
Language basics
-- Annotations
isAllowedToDrive : String -> String -> Bool
isAllowedToDrive name vehicleType =
name == "Cédric" && vehicleType == "bulldozer"
-- Types
type VehicleCategory
= Bulldozer
| Car
| Truck
| Motorcycle
-- Pattern matching
isAllowedToDrive : String -> VehicleCategory -> Bool
isAllowedToDrive name vehicleCategory =
case vehicleCategory of
Bulldozer ->
return name == "Cédric"
-- Omitting this would result in a compiler error
_ ->
False
The Elm Architecture
Your first Elm app
module Main exposing ( main )
import Browser
import Html exposing ( div, button, text )
import Html.Events exposing ( onClick )
type Msg
= Increment
| Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, text (String.fromInt model)
, button [ onClick Increment ] [ text "+" ]
]
main =
Browser.sandbox { init = 0, update = update, view = view }
1
2
3
4
5
Your second Elm app
(if we have time)
guide.elm-lang.org
ellie-app.com
elmprogramming.com
elmlang.slack.com
Now go and build something!
(╯°□°）╯︵ ✨💖✨
Elm-moi tendre, Elm-moi vrai
By Sylvain Roflmao
