What is Elm?

Elm is a programming language that compiles to JavaScript

Elm is functional

Elm is reactive

Before reactive programming

After reactive programming

Elm is statically and strongly typed

Why Elm?

It's fast

It's reliable

It's got cool stuff

The Basics

var numbers = [1, 2, 3];

var first = numbers[0];

var doubleFirst = first * 2;

numbers =
    [ 1, 2, 3 ]

first =
    List.head numbers

doubleFirst =
    first * 2

JavaScript

Elm

var numbers = [];

var first = numbers[0];

var doubleFirst = first * 2;

// doubleFirst = NaN

numbers =
    []

first =
    List.head numbers

doubleFirst =
    first * 2

-- doubleFirst = ???

JavaScript

Elm

Buuuuut.....

Elm is different

What's a maybe?

numbers = 
    []

first =
    Maybe.withDefault 0 (List.head numbers)

doubleFirst =
    first * 2

Here's how you handle it

function add(x, y) {
    return x + y;
}

function(x, y) {
    return x -y;
}


var added = add(1, 3);

add: Int -> Int -> Int
add x y =
    x + y


\x y -> x - y


added =
    add 1 2

How about some functions

var object = {
    key: 'value',
    key2: 'value2'
};

object.key;  //returns 'value'

object.key2 = 'new value';

var list = [1, 2, 3];

list[0]; // returns 1

list.length; // returns 3

record =
    { key = "value"
    , key2 = "value2"
    }

record.key  -- returns "value"

{ record | key2 = "new value" }

list = [1, 2, 3]

List.head list  -- returns Just 1

List.length list  -- returns 3

Data structures?

powerLevel > 9000 ? 'WHOA!' : 'meh'

if powerLevel > 9000 then
  "WHOA!"
else
  "meh"

If statements

import Html exposing (text)

main =
  text "Hello, World!"

Hello, World!

case aList of
    [] -> "matches the empty list"
    [x]-> "matches a list of one item, " ++ toString x
    _ -> "matches anything else"

Pattern matching

case List.head someList of
  Just x -> "The first element is " ++ toString x
  Nothing -> "The list was empty."

type Bool = True | False

value = False

case value of
    True -> "Value is true"
    False -> "Value is false"

Union types

type Maybe a = Just a | Nothing

maybe =
    Just 42

case maybe of
    Just x -> "Our maybe had the value of " ++ x
    Nothing -> "Our maybe was nothing"

Advanced stuff

Signals

Like callbacks, but not

Tasks

Like promises, but not

Tasks

Task.map 
  (\s -> s + " tasks") 
  (Task.succeed "Hello")

Task.succeed 2 
  `andThen` (\n -> Task.succeed (n + 2))

$q.resolve("Hello").then(function(string) {
    return string + " promises";
});

$q.resolve(2).then(function(n) {
    return $q.resolve(n + 2);
});

The Elm Architecture

Like a framework, but not

Questions?