Chapter 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. Because JavaScript applications have . . . well . . . a different reputation, it stands to reason that Elm must be doing things differently. And so it is!

Whereas each line of code in a JavaScript application could 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 code 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, you’ll build your 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 by using declarative rendering, and manage state by using The Elm Architecture. By the end of the chapter, 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.2. Handling user input with The Elm Architecture

Summary