Elm: Functional Frontend

Frontend web programming presents an interesting challenge for Haskell developers. Ultimately, browsers run on HTML, CSS, and Javascript. This means that whatever you program in, you’d better be able to compile it down to those languages. There are a few pure Haskell approaches out there. For instance, Yesod uses Template Haskell to make HTML splices where you can subsitute variables. Reflex FRP uses GHCJS to compile Haskell to Javascript.

But there are other options as well. In this series, we explore the Elm language. It has a very similar syntax to Haskell and shares many of the same functional principles. We’ll get a lot of the type safety and purity we want from Haskell, in a package that compiles more easily to Javascript.

Part 1: Language Basics

In part 1, we’ll start by exploring the basics of the Elm language. We’ll see some basic syntax, as well as the chief differences between Elm and Haskell. We’ll demonstrate some of the basics of building web elements.

Part 2: Making a Simple Web App

In part 2 of the series, we’ll get into more depth with Elm’s architecture. We’ll build a simple Todo list application, and see how we can combine many different elements and how we pass information around.

Part 3: Incorporating Effects

In the third part of this series, we’ll expand the complexity of our system a bit. We’ll see how to incorporate effects in Elm. Specifically, we’ll introduce randomness into our application and learn to send HTTP requests.

Part 4: Navigation

In the final part, we conclude our series by looking at the basics of a navigation. We’ll have a simple multi-page application, and examine how we create links, and how to hook into those links from our Elm code.