Everything open source
May 16–17, 2016: Training & Tutorials
May 18–19, 2016: Conference
Austin, TX

Folding time with signals in Elm

David Crespo (Braintree)
4:20pm–5:00pm Wednesday, 05/18/2016
The New Stuff
Location: Ballroom A Level: Intermediate
Average rating: *****
(5.00, 3 ratings)

Prerequisite knowledge

Attendees should have a general understanding of using map to apply a function to a list (in any language), as well as using reduce (called "fold" in some languages).


Every programming language can represent values that change over time. If you update a counter on each iteration of a loop or each time the user clicks, that’s a variable that changes over time. But from the language’s point of view, that variable just happens to change over time. The language doesn’t know that; only you know that.

Elm is a functional language for interactive web apps that compiles to JavaScript—think Haskell, but for humans. With its signal abstraction, Elm is able to represent values that change over time at the level of its powerful type system. By making time (and indeed all input) explicit, Elm lets you write purely functional, stateless UI code that’s easy to reason about and hard to break. This idea—coding UI as pure functions on a stream of input—is sometimes called functional reactive programming, and a version of it powers popular web frameworks like React. But Elm’s version of FRP is much stronger: unlike in JavaScript, all values are immutable and all functions are pure. But if that’s true, how can you actually do anything? Any interesting program has to have some kind of persistent state.

With Elm, we can have our cake and eat it too. Just as fold (aka reduce) lets us turn a pure function (like addition) into a quasi-stateful operation (like adding up a list of numbers), we can use fold on signals to manage state over time while keeping the rest of our logic pure. And because the Signal abstraction is so well chosen and well implemented, the code to make that all work is both elegant and familiar.

David Crespo uses live coding and a tour of Elm to guide you to Elm’s aha moment: folding time.

Photo of David Crespo

David Crespo


David Crespo is a frontend engineer working on commerce at Braintree.

Comments on this page are now closed.


Picture of David Crespo
David Crespo
05/18/2016 3:21am CDT

There were some big changes to Elm last week and this talk has been updated to reflect them.

Also, the prereq knowledge isn’t as strict as it sounds! Knowledge of map and/or reduce will be useful but not required.