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!

(╯°□°）╯︵ ✨💖✨

Made with Slides.com