Elm

A functional language for the web

Joel Chelliah & Henrik Wingerei

Agenda

  • What is Elm?
  • Functional Reactive Programming
  • Elm 101
  • Signals
  • Making a game in Elm
  • Future of Elm

What is Elm?

Elm is a functional language that compiles to HTML, CSS, and Javascript.

Designed for functional reactive programming, Elm makes it easy to create highly interactive applications.

  • Written by Evan Czaplicki
  • Presented in his thesis Elm: Concurrent FRP for Functional GUI from 2012
  • Designed because conventional UI-programming on the web can be made easier.
  • Traditional languages like HTML, CSS and Javascript are not suited for responsive UI-programming

What about Haskell?

  • Elm is written in Haskell
  • Elm's syntax resembles Haskell's
  • Elm is installed with Cabal (Haskell's package manager)

Functional Reactive Programming

  • Think about a spreadsheet
  • a will automatically change if b or c change
  • Declarative approach to programming
  • Specify what, instead of how.
            
              a = b + c

Want to learn more?

FRP in Elm

  • Built around the idea of time-varying values, called signals
  • Some signals are:
            
Mouse.position
Mouse.isDown
Window.width
  • Works very well for interactive UI-programming with events from keyboard, mouse etc.
  • Details are left to the compiler
  • No event handlers
  • No callbacks
  • No DOM manipulation

Demo

Future of Elm

  • So far we've "just" seen games in Elm
  • What about "normal" web applications?
  • Business applications?

Interactive UI Elements

  • UI elements in Elm 0.12
  • Makes it possible to create interactive fields (buttons, inputs etc.)
  • Input form
  • Calculator

Embedding Elm

  • Not realistic to just use Elm in one applicaiton
  • But what about creating a small Elm-widget and embedding it?
            
              elm --only-js Snake.elm
            
          
                          
// get an empty div
var div = document.getElementById('snake');

// embed our Elm program in that div
Elm.embed(Elm.Snake, div);

Ports in Elm

  • Ports are used to send information to and from an Elm program
  • Makes it possible to communicate with embedded Elm-widgets from traditional Javascript

Summary

  • Elm is a functional language which compiles to HTML, CSS and Javascript
  • Designed for functional reactive programming
  • Easy to create highly interactive applications like games
  • Possible to embed Elm-widgets on any site
  • Still a young language
  • Interesting language to follow

Want to learn more?

  • http://elm-lang.org
  • http://www.infoq.com/presentations/elm-reactive-programming
  • https://groups.google.com/forum/#!forum/elm-discuss

Thank you