8 Single-Page Applications

This chapter covers

  • Working with multiple modules
  • Optimizing Performance with Html.Lazy
  • Routing
  • Parsing URLs

Our manager adores the two pages we’ve built for Photo Groove, and has a visionary idea for where to go next. “Now that we have all these pages, we need a header across the top with links so users can get between them quickly. Oh! And make sure it doesn’t do that unsightly flash of blank page when switching between them. That drives me bananas.”

Indeed, two pages is a lot more than one; a header to switch between them sounds like just what the doctor ordered!

In this chapter we’ll build a navigation header that is shared between the two pages we’ve built in the previous chapters. We’ll build the combined page using a Single-Page Application (SPA) architecture, so users can transition between the two pages without the browser performing a fresh page load.

The “single page” in “single-page application” refers to a single page load—the browser only loads the page once, but from the user’s perspective, all the usual features of multiple pages still appear to work as normal: the URL in the address bar changes when clicking links, the browser’s Back button still returns to the previous URL, and so on.

Let’s build ourselves a Single-Page Application!

8.1      Framing the Page

8.1.1                          Creating Main.elm

8.1.2                          Rendering the Header and Footer

8.1.3                          Skipping Unnecessary Renders with Html.Lazy

8.2      Routing

8.2.1                          Handling the Initial URL

8.2.2                          Parsing URL Paths

8.2.3                          Handing URL Changes

8.3      Delegating Pages

8.3.1                          Initializing Page States

8.3.2                          Initializing Page States

8.3.3                          Delegating Page Logic

8.4      Summary