Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Tame the frontend with Elm

Jeremy Fairbank (Test Double)
11:00am–11:40am Wednesday, June 21, 2017
Future JS & Functional
Location: 210 BF
Secondary topics:  Functional Programming (Elm, ClojureScript, Erlang)
Average rating: ***..
(3.67, 6 ratings)

Who is this presentation for?

  • Frontend developers

What you'll learn

  • Explore Elm's syntax and constructs, such as function definitions, pipe operator, union types, and case expressions, and its benefits, such as terse code, type safety, and no runtime exceptions
  • Understand functional programming concepts such as purity, currying, and immutability and unidirectional architecture
  • Learn how to model state changes and side effects with pure functions and how to get started with development with Elm


Elm is a functional programming language that compiles to JavaScript and allows building robust and safe web apps. Jeremy Fairbank dives into Elm’s syntax and its model-view-update architecture, explaining the advantages Elm offers for developing frontend apps and how to structure a simple app with pure functions, and shares steps to getting started with Elm.

Jeremy begins by analyzing some of the pain points in the world of frontend development, such as data flow architecture, safety guarantees, and JavaScript fatigue, before exploring Elm’s syntax and the many of the benefits of Elm. Because Elm is a functional language, functions are pure and composable and therefore predictable in their output. Autocurried functions provide building blocks for highly modular and reusable code. Elm code is also terse and declarative, meaning it is easier to read and understand.

Elm is also a strong, statically typed language, preventing incorrectly typed programs from compiling and runtime exceptions from occurring. In addition to the typical data types like strings and lists, Elm offers union types that provide a powerful mechanism for representing custom types and the values they can take on. With no null data type, Elm also avoids null-reference errors by supplying built-in union types such as maybe and result that guarantee code handles null-like situations.

Jeremy then examines Elm’s architecture, which espouses a unidirectional Model-View-Update pattern. Elm applications provide a view function for displaying their state and an update function for creating new state and represent possible changes to their state via messages, which are typically implemented with union types. While this architecture sounds similar to Redux, it offers greater safety through static typing and pure functions. To better explain how Elm applications work, Jeremy walks you through creating a model, view function, and update function in a simple Elm application. He also discusses how to manage side effects such as HTTP requests in a pure manner via commands.

You’ll leave ready to start incorporating Elm into your frontend development.

Photo of Jeremy Fairbank

Jeremy Fairbank

Test Double

Jeremy Fairbank is a web developer at Test Double, where he helps improve how the world builds software. Jeremy has many years of experience in frontend and full stack development and has presented numerous times on web development at conferences such as Fluent Conf and RailsConf. He is passionate about frontend development and its future, especially in functional JavaScript and Elm, and is the author of Programming Elm from the Pragmatic Programmers.