2 Your First Elm Application

Elm applications are built to last. They have a reputation for being scalable, easy to refactor, and difficult to crash unexpectedly. Since JavaScript applications have...well...a different reputation, it stands to reason that Elm must be doing things differently. And so it is!

Where each line of code in a JavaScript application can potentially result in a change or effect—like “update that text!” or “send this to the server!”—the code in an Elm application builds up a description of what the program should do in response to various inputs. Elm’s compiler translates this description into the appropriate JavaScript commands for the browser to run at the appropriate times, and the end user may have no idea Elm was involved at all.

In this chapter we’ll build our first Elm application: Photo Groove, a simple photo browsing Web app where users select thumbnails to view larger versions. We’ll create a user interface using declarative rendering and manage state using the Elm Architecture. By the end, we will have a fully functioning application—and a code base we can build on for the rest of the book!

2.1   Rendering a Page

2.1.1   Describing a page using the Html Module

2.1.2   Building a Project

2.2   Handling User Input with the Elm Architecture

2.2.1   Representing Application State with a Model

2.2.2   Handling Events with Messages and Updates

2.3   Summary