Friendly Functional Programming for the Web

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

@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
    }