Elm

Web Development with Delight

Who's Talking?

Bastian Krol

We're hiring!

What is Elm

• Purely Functional
• Static Type System
• Reactive (FRP)
• Compiles to JavaScript
• Open Source
• Makes Web Development Delightful

Why Bother?

Marketing Blurbs

• Clean syntax
• No runtime exceptions
• Blazing fast rendering
• Libraries with SemVer guarantees
• Smooth JavaScript interop
• Time-traveling debugger

Reduce Bug Hunting

Bug by Nestor Ferraro / CC BY 2.0

Everything is Stateless

Everything is Immutable

Carved Stone" by Kit Carruthers / CC BY 2.0

Compiler catches 90%

swat by Marc Dalio / CC BY-NC-ND 2.0

Ancient Elm Proverb

Once it compiles, it just works!

Fast Rendering

Speed by snapp3r / CC BY-ND 2.0

Semver Guarantees

• Change public API of library
• Try to publish as minor/bugfix
• =>Nope
• Powered by Static Typing

Syntax Basics

Hello World

import Html

main = Html.text "Hello Hamburg!"

Result

Functions

import Html

greet str = Html.text str

main =
  greet "Hello Hamburg!"

Result

Type Annotations

import Html exposing (Html)

greet : String -> Html
greet str =
  Html.text str

main : Html
main =
  greet "Hello Hamburg!"

Result

Parameter Types & Return Types

import Html exposing (Html)
import String

greet : Int -> String -> Html
greet number string =
  Html.text
    (String.repeat number string)

main : Html
main =
  greet 3 "Hello Hamburg! "

Result

Function Application
aka Data Pipelines

greet : Int -> String -> Html
greet number string =
  string
  |> String.repeat number
  |> Html.text

main : Html
main =
  greet 3 "Hello Hamburg! "

Result

Functional Reactive Programming

in Elm

Signals

import Html exposing (Html)
import Mouse

toHtml : Int -> Html
toHtml x =
  Html.text (toString x)

main : Signal Html
main =
  Signal.map toHtml Mouse.x

Result

Signals (cont.)

Signals (cont.)

Signals (cont.)

Stuff you can do with signals

• merge multiple signals
• map signals (transform each value)
• filter signals (drop events)
• ... lots of other interesting stuff ... :)

More on Signals

The Elm Architecture

(Very Condensed)

Concepts

• Unidirectional Data Flow
• Single Source of Truth
• Immutability and Statelessness
• Does this sound familiar?

Ingredients

• Model, Update, View & Actions
• Model : Just a typed value
• update : Action -> Model -> Model
• view :
  Signal.Address Action -> Model -> Html

Elm Architecture Overview

The Elm Compiler is Your Friend

...and the type system, too

The dog and his man by C. I. Ştefănescu / CC BY 2.0

Runtime Exceptions?

function repeatFirst(list) {
  var repeated = list[0].repeat(3);
  alert(repeated);
}

var list1 =
  [ 'hip', 'hop', 'hooray!' ];
...
repeatFirst(list1);
  

var list2 = [];
...
repeatFirst(list2);
  

Compile Time > Runtime

repeatFirst list =
  let elem = List.head list
  in String.repeat 3 elem

> elm-make RepeatFirst.elm --output repeat-first.html
-- TYPE MISMATCH -------------------------- RepeatFirst.elm

The 2nd argument to function repeat is causing a mismatch.

8│      String.repeat 3 elem
                        ^^^^
Function `repeat` is expecting the 2nd argument to be:
    String
But it is:
    Maybe a

Hint: I always figure out the type of arguments from left
to right. If an argument is acceptable when I check it, I
assume it is "correct" in subsequent checks. So the problem
may actually be in how previous arguments interact with the
2nd.

Corrected Version

repeatFirst list =
  let elem = List.head list |> Maybe.withDefault ""
  in String.repeat 3 elem

> elm-make RepeatFirst.elm --output repeat-first.html
Success! Compiled 1 modules.
Successfully generated repeat-first.html

Protection From Runtime Exceptions

Summary

• No runtime exceptions!
• Refactoring is easy and safe
• Coherent approach to user interaction with signals
• Fast rendering
• Can be introduced into existing JS code bases
• Uniform Structure for Apps (the Elm Architecture, not covered today)

Q. E. D.

Elm Makes

Web Development

Delightful

Links:

• http://elm-lang.org/
• Online Editor/Sandbox
• Elm Friday (Tutorial/Blog Series)

Questions?

Thank You!