Signals are the underpinning of every reactive Elm app, whether it's a canvas-based game or a web application. To react to any type of user input, you apply a function to a signal. To receive messages sent to a mailbox, you tune in to a signal. To maintain application state, you create a past-dependent signal. Communicating with JavaScript via ports? You guessed it, you use signals! Indeed, to be effective with Elm you need to master signals.

In this course, we'll look in-depth at different examples and use cases. By doing so, you'll learn not just how signals work but, equally important, when and why to use them. You'll come away from this course with an appreciation for the power of signals and you'll be ready to apply them effectively in your own projects.

Design With Signals, The Elm Way

This course is loaded with practical examples of signals used in a variety of scenarios. By seeing recurring design patterns in different contexts, you'll quickly build up a strong intuition for when and why to use signals in your own code.

We'll start by seeing various signals in action to understand what they are and how they work. Then we'll learn how to transform signals to react to inputs in more specialized ways. Applying these techniques, we'll create a simple game that responds to multiple user inputs.

Building on that foundation, the next level is understanding how to use signals as they relate to mailboxes and ports in web apps. To do that, we'll put together a simple reactive web app with JavaScript interop, without the aid of the StartApp module.

Throughout this course, you'll learn the following:

  • Reacting to user inputs: mouse, window, keyboard, time, and so on
  • Transforming and combining signals
  • Sampling and filtering signals
  • Maintaining state by folding signal values from the past
  • Mapping signals to actions
  • Implementing the model-update-view pattern from scratch
  • Designing a simple canvas-based game around signals
  • Merging multiple signals
  • Using mailboxes to create reactive web apps
  • Understanding how the StartApp module works
  • JavaScript interop using incoming and outgoing ports
  • Lots of practical examples and use cases for signals

At the end of this course, you will have mastered Elm signals and have the confidence to immediately apply these techniques and patterns to your own projects!

Elm Signals Tutorial

For Elm Programmers

This is an intermediate-level course. We assume you already have a basic understanding of functional programming with Elm. If you're new to the Elm programming language, we strongly recommend going through our introductory Elm: Building Reactive Web Apps tutorial before taking this course.

About Mike

Mike Clark got curious about Elm in late 2014, spent the holidays toying around with it, and still just can't seem to put it down. Having programmed in many languages over the past 20 years, he found Elm to be a fresh and fun way to learn the good parts of functional programming. His enthusiasm for Elm leads naturally to wanting to teach others. Together with his wife Nicole, they own and run The Pragmatic Studio.