#elmlang – Navigating the pages – part 1 Model

So far we were able to create a simple elm application which is able to display hard coded list of best opening credits. As you can imagine, when building non trivial application, we will end up with multiple views and based on user requests we may need to swap body with proper views. In olden days, every page was recreated and redrawn and in new SPA world only the portion of the DOM elements are swapped out with proper views.

In SPA, you can think of a page with header, body and footer. Every time when a user clicks some options in header the body will be swapped out with appropriate views.

In Elm, we solve this with navigation and routing. Everything I learned on navigation and routing came from the following three awesome links.

Instead of adding navigation to existing project, we will tackle navigation without any noise. So for our project, we are planning to have following user selections

  • All time best
  • Personal best
  • Trending now
  • About
  • Login

As the user select anyone of the options above we will show appropriate view.

To make this exercise simple and easy to follow, we will focus on just two of the five actions above,

  • All time best
  • Login

To get this one going, we need to add another elm-package called ‘Navigation’

elm package install elm-lang/navigation

Next, instead of using beginnerProgram as the lynch pin to connect model, view and update from now on we will use Navigation.program.

So why are we using Navigation.program instead of beginnerProgram? As the name suggests, this package wraps lot of navigation related activities in it and make our development easy. For starters

  1. Navigation.program is wrapped on top of Html.beginnerprogram (html.program) so all the things we learned to love is still there and more.
  2. Navigation notifies us every time there is a url change
  3. It also allows us to change the navigation
  4. It provides us with rich set of information to know what changed during url change

Like all our previous applications, we will start with model. For time being ignore our application aspect of it but focus on the navigation aspect. While we are navigating between pages, what is the one thing that we care about? We need to know which page we are in. So we need to capture that as a field in our model. Good start, we know our model has one field and it holds the current page name possibly. So what type it should be, traditional thinking would make us to define it to be String. But remember we are in Elm and we want to be as much explicit as possible. In that case, instead of defining it as a string, we could define it to be a union type of all known pages. So, let’s start by defining all the known pages

type Page =


  | Login

So we defined a union type that defines all the possible pages we are going to support. With that, our model should be something like the following

type alias Model =

   { page : Page


So we defined the model and obvious next step is to define initial state of the application.

initstate: Model

initstate =

   { page = AllTimeBest


So far nothing new. That is all for model part, next we will see update part.

You can find the full source code the example here are https://github.com/ksunair/bestopeningcredits/blob/master/simplenav.elm