What is cool about Elm?

Elm is a Functional Reactive Language for interactive applications.

• Functional Reactive Programming
• Time Travelling Debugger
• Hot code swapping
• Avoid NULL pointers
• Escape callback hell
• Compiles to Javascript/Html/CSS

- What is cool about Elm? -

Functional Reactive Programming

Elm is built around its FRP implementation

RP has been adapted to OOP but it was born as FRP in Haskell.

You don't need to learn Haskell to try FRP as it was intended.

Time Travelling Debugger

- What is cool about Elm? -

Based on Bret Victor's talk

Inventing on principle 

which also inspired LightTable.

(At 12:00 one of the bits in question)

Demo

Hot Code Swapping

- What is cool about Elm? -

If you have tried Erlang, you know the joy of not needing to recompile the whole project just to test out a tiny change.

Avoid Null Pointers

- What is cool about Elm? -

You most likely have known the pain of having to put null guards.

No more. Union Types will spare you from that.

Escape race conditions

- What is cool about Elm? -

Single assignment makes concurrency easier.

(See Erlang)

Escape callback hell

- What is cool about Elm? -

With Signals. A signal is a value that changes over time, which updates all the values that depend on it.

Compiles to Javascript/Html/CSS

The target platform is the web.

And the performance is very good.

- What is cool about Elm? -

What can you make with Elm?

FRP is well suited for GUIs and games.
If you have had to wrangle with MVC and MVVM and more of those acronyms in the past you know that UI programming is hardly solved.

What can you make with Elm?

Games

Pong

2048

What can you make with Elm?

Web Apps

ToDoMVC

DreamWriter

How to install Elm

• Try Elm website
• Elm Platform
• From source

- How to install Elm -

Just to open elm-lang.org/try in a browser. It includes an editor and a preview, it supports hot code reloading too.

Try Elm website

- How to install Elm -

Download  the installer from

elm-lang.org/Install.elm, it's available for Mac and Windows.

Elm platform

- How to install Elm -

Try your luck with Cabal.

Elm is implemented in Haskell.

From source

- How to install Elm -

• Sublime Text
• Atom
• Emacs
• Vim

Editor Support

- Hello World -

These are the 3 necessary elements of an Elm program:

• Module imports
• Type Signatures
• Main function

If you've ever tried Haskell you'll find the syntax familiar.
The type signature goes before the function.

But Elm has type inference so most of the time you'll be able to skip writing it down.

import Graphics.Element (..)

Module imports

Packages are found on:

package.elm-lang.org

Will import all functions in Graphics.Elements, you'll be able to use them without prefix.

import Graphics.Element as el

You'll be able to use them with prefix el.namefunction

- Hello World -

square : Int -> Int

Type signatures

Is the signature of a function that takes an Integer and returns an Integer.

add : Int -> Int -> Int

Is the signature of a function that takes two Integers and returns an Integer.

- Hello World -

Main function

The main function is the entry point of program execution, so you need one, or your code won't run.

- Hello World -

Fundamental Concepts

• Signals
• Union Types
• Pattern Matching
• Foldp

Signals

import Graphics.Element (..)
import Signal (Signal, map)
import Mouse
import Text (asText)

main : Signal Element
main =
  map asText Mouse.position

[from examples]

Signals are values that change over time. They are Inputs that can be transformed, merged and filtered.

In practice it's similar to how a spreadsheet works.

Simple program which shows the mouse position.

- Fundamental Concepts -

Union Types

A union type is a way to put together many different types. Somewhat a more powerful enum.

type Action
    = Increment
    | Decrement

type Action
    = Increment Int
    | Decrement Int

Plain enumeration

Enumeration + Data

- Fundamental Concepts -

Maybe Type

type Maybe Int
    = Just Int
    | Nothing

The Maybe type allows us to avoid null checks. If there is a value it will be Just value if there isn't it will be Nothing.

- Fundamental Concepts -

Pattern Matching

It's a much more powerful switch case statement. Made to be use in combination with Union Types, it will accept any type the Union Type has attached.

type alias Model = Int

update : Action -> Model -> Model
update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

type alias Model = Int

update : Action -> Model -> Model
update action model =
  case action of
    Increment value -> model + value
    Decrement value -> model - value

Plain enumeration

Enumeration + Data

- Fundamental Concepts -

Match Maybe Type

String.toInt : String -> Maybe Int

toMonth : String -> Maybe Int
toMonth rawString =
    case String.toInt rawString of
      Nothing -> Nothing
      Just n ->
          if n > 0 && n <= 12 then Just n else Nothing

- Fundamental Concepts -

Foldp

- Fundamental Concepts -

A function that is applied on a signal in time:

foldp : (a -> b -> b) -> b -> Signal a -> Signal b

Its arguments are:

• a function which takes two args
• a default value for the output signal
• an input signal

​The two args of the function are the current value of the input signal, and the past value or default value if there is no past value.

Architecture

• Model - a full definition of the application's state

• Update - a way to step the application state forward

• View - a way to visualize our application state with HTML

• Signals - the signals and inputs necessary to manage events

[example from elm-architecture]

- Architecture -

Model

A data structure which contains our state. We skipped over Records so we'll stick to a plain Int.

type alias Model = Int

- Architecture -

Update

type Action = Increment | Decrement

update : Action -> Model -> Model
update action model =
  case action of
    Increment -> model + 1
    Decrement -> model - 1

• A union type which enumerates the possible actions, with or without attached data.
• The function which by applying the action to the model creates the new model state. 

- Architecture -

View

view : Model -> Html
view model =
  div []
    [ button [ onClick (Signal.send actionChannel Decrement) ] [ text "-" ]
    , div [ countStyle ] [ text (toString model) ]
    , button [ onClick (Signal.send actionChannel Increment) ] [ text "+" ]
    ]

countStyle : Attribute
countStyle = 
  style
    [ ("font-size", "20px")
    , ("font-family", "monospace")
    , ("display", "inline-block")
    , ("width", "50px")
    , ("text-align", "center")
    ]

The function which applied to the model creates the new view state.

main : Signal Html
main =
  Signal.map view model

model : Signal Model
model =
  Signal.foldp update 0 (Signal.subscribe actionChannel)

actionChannel : Signal.Channel Action
actionChannel =
  Signal.channel Increment

- Architecture -

Inputs/Signals

The main function is driven by the Signals. It is updated every time we click on the buttons we create in the view.

Elm Tools and Workflows

• Make your project
• elm-package
• elm-reactor
• elm-make

- Elm Tools and Workflow -

Elm Try website

elm-package

- Elm Tools and Workflow -

Use elm-package to install community packages:

elm-package install user/project

elm-package is sandboxed by default. All packages are installed on a per-project basis, so all your projects dependencies are independent.

[from elm web site]

You can also put the dependencies of a project in the elm-package.json file, for convenient dependency handling.

- Elm Tools and Workflow -

elm-make

Workflow:

• compile in elm-make
• open in browser

Command:

elm-make Main.elm --output=main.html

elm-reactor

Workflow:

• edit with editor
• start elm-reactor
• open browser

- Elm Tools and Workflow -

Command:

elm-reactor

In the root of your elm files.