Elm

The best of functional programming in your browser

@luke_dot_js

• Functional
• Compiled to JavaScript
• Statically Typed
• Designed for user interfaces

Elm is

@luke_dot_js

• Stateless functions
• Immutable Data
• A built-in framework

Elm has

@luke_dot_js

• Runtime Errors

• null

• Typeclasses

Elm does not have

@luke_dot_js

Elm is all about the developer experience

@luke_dot_js

Community

• Guide: guide.elm-lang.org
• Slack: elmlang.herokuapp.com
• Mailing List: elm-discuss on Google Groups
• Github: github.com/elm-lang
• Chicago Elm: meetup.com/chicago-elm

@luke_dot_js

I'm Luke

@luke_dot_js

humblespark.com

@luke_dot_js

@luke_dot_js

@lukewestby

@luke

@luke_dot_js

Elm is easy to set up

Installing Elm

elm-lang.org/install

The Elm Platform

• elm-package - package manager
• elm-repl - console REPL
• elm-make - compiler
• elm-reactor - basic development server

Setting up a project

This gets us

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.5 <= v < 5.0.0",
        "elm-lang/html": "1.1.0 <= v < 2.0.0"
    },
    "elm-version": "0.17.1 <= v < 0.18.0"
}

One adjustment...

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
-       "."
+       "./src"
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.5 <= v < 5.0.0",
        "elm-lang/html": "1.1.0 <= v < 2.0.0"
    },
    "elm-version": "0.17.1 <= v < 0.18.0"
}

That's all!

We're ready to write some Elm

Elm code is maintainable

Key players in Elm apps

• values - the data
• types - what the data looks like
• functions - transform the data
• commands - send data to the outside world
• subscriptions - get data from the outside world
• programs - display the data

Values in Elm

someInteger : Int
someInteger =
    42


someString : String
someString =
    "Hello, Abstractions!"


severalStrings : List String
severalStrings =
    [ "Hello"
    , "Abstractions"
    , "!"
    ]

Functions in Elm

add : Int -> Int -> Int
add left right =
    left + right


add42 : Int -> Int
add42 =
    add 42


result : Int
result =
    add42 10

add : Int -> Int -> Int
add left right =
    left + right

Feature Team A

someValue : Int
someValue =
    42


result : Int
result =
    add 10 someValue

Feature Team B

add : Int -> Int -> Int
add left right =
    left + right

Feature Team A

- someValue : Int
- someValue =
-    42
+ someValue : String
+ someValue =
+     "42"


result : Int
result =
    add 10 someValue

Feature Team B

- add : Int -> Int -> Int
add left right =
    left + right

Feature Team A

- someValue : String
someValue =
    "42"


- result : Int
result =
    add 10 someValue

Feature Team B

add : Int -> Int -> Int
add left right =
    left + right

Feature Team A

- someValue : String
- someValue =
-    "42"
+ someValue : Int
+ someValue =
+     42


result : Int
result =
    add 10 someValue

Feature Team B

No more type errors!

Structured Data

luke : { name : String, age : Int }
luke =
    { name = "String"
    , age = 25
    }

Type equivalence is structural

luke : { name : String, age : Int }
luke =
    { name = "Luke"
    , age = 25
    }


beth : { name : String, age : Int }
beth =
    { name = "Beth"
    , age = 25
    }

luke : { name : String, age : Int }
luke =
    { name = "Luke"
    , age = 25
    }


beth : { name : String, age : Int }
beth =
    { name = "Beth"
    , age = 25
    }