#elmlang – Navigating the pages – part 3 View

So far we have seen the Model and Update part of the navigation application. In this blog we complete the whole project by connecting the final missing piece View.  First let’s look at the output

First two line on the screen are the two links. One to ‘All Time Best’ and another to ‘Login’. By default ‘All Time Best’ is set as Home and if we pass any routes other than ‘Login’ all routes will be routed to ‘All Time Best’. On page load the page will look like the following; It loads ‘All Time Best’ view

image

When you click ‘Login’, it will display the following

image

In this example if you notice, we have two sections, one is the top section, which contains hyperlinks to navigate and then the view right below it to show the content of the page. For sake of simplicity, we call the top section as header and the second part as body. So view will contain the header and body

view: Model –> Html Msg

view model =

    div []

           [ header

           . body model

           ]

As like all the Elm application, view takes model as input and generates the Html that can generate messages. Model has two functions, first one is header and second one is body which takes model as parameter.

Let’s review header function first.

header: Html Msg

header =

     div []

            [ h3 []

                    [ a [ href “#alltimebest” ] [ text “All Time Best “ ]

                    , a [ href “#login” ] [ text “ Login” ]

                    ]

           ]

header function takes no parameter but generates Html. This function creates two hyperlink (a tag). Only thing we need to pay attention to is the first parameter to href function. This string must match the strings in update function.

case (hash) of
       “#alltimebest” ->
           AllTimeBest

      “#login” ->
           Login

Next let’s define the body function

body:Model –> Html Msg

body model =

     case (model.page) of

             AllTimeBest –>

                   alltimebest model

             Login –>

                   login model

As you can imagine we need to make sure we display appropriate body based on the page requested. During update function all we did was to change the page to appropriate page in the model but we did not display anything. In view we need to make sure based on the page information in the model we need to render appropriate content.

Based on the output we saw earlier, the alltimebest and login function has nothing but a text to show page change happened. The function definitions of the pages are below

alltimebest: Model –> Html Msg

alltimebest model =

       h1 [] [ text “All Time Best” ]

login: Model –> Html Msg

login model =

    h1 [] [ text “Login “]

Events leading up to view are

  • When someone wants to change a page, they click on the hyperlink
  • when hyper link is clicked, elm generates navigation message (UrlChange)
  • The message triggers update function
  • In update function based on the urlchange request, we create new model with the page type requested
  • On completion of model change, view function is called
  • view will turn around and call the body function with current model
  • In body function, we check the model’s page type. If the page type is AllTimeBest then we call ‘alltimebest’ function to create Html otherwise we call Login

In summary, navigation is very easy and simple in Elm. The things we need to know are

  • Use Navigation.program to connect Model, Update and View
  • Have Model with the field which can hold current page
  • In update handle Urlchange event with location parameter to change the Model
  • In view, use the Model’s current page to render the page in question
Advertisements

#elmlang – Navigating the pages – part 2 Update

In our previous blog we looked at the model side of the application when building SPA with navigation. In this blog we will look at the update.

To summarize the model changes, when building SPA with navigations are

  • The model need to know the current page
  • Instead of representing the page as string, in Elm explicitly state the page by union type
  • Setup initial page that we need to load during application start up

In update, there are two things we need to do

  • Define all the events our application is going to support
  • Define the actions when the events occur

Defining events:

In our navigation program, we moved away from beginnerProgram and now we are using Navigation.program. As mentioned in the previous blog, this function has all the goodies of beginnerProgram and more. When we use Navigation.program, one of the things it does when ever there is a change in url, it will trigger an event called UrlChange with location details. Since we removed all the noise in the application, UrlChange is the only event we are interested in. So let’s define the events

type Msg

    = UrlChange Navigation.Location

Anytime when a user clicks a hyperlink in a program which triggers a url change, Navigation function will trigger UrlChange event with all the information regarding the new url and its attributes. Everything regarding how to fire the event are all wrapped up in the Navigation package.

Define actions:

When a user clicks a hyperlink to go to a new page, on clicking a hyperlink, navigation function will create a event called UrlChange with the new location the user wants to go to. Anytime a new event is fired, our update function will be called first and there we need to satisfy user request. Update is where we act on the url change request. Let’s take a moment to talk about what are the things we would need to display a new page

  • in Elm architecture, one will not call render page directly
  • In Elm architecture, you modify the model which will trigger rendering a page
  • In update all we need to do is identify the page user is intending to go and modify the current page with page user’s requested page

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
     case msg of
         UrlChange location –>
             ({ model | page = (findpage location.hash) },  Cmd.none )

As usual we are updating the model with appropriate value in update. When someone clicks on the hyperlink, the clicked hyperlink string will be available in the location.hash we will use that to identify the page user wants to navigate to. Identifying the page user wants to navigate is encapsulated in the findpage function as shown below

findpage: String –> Page

findpage hash =

    case (hash) of

         “#alltimebest” –>

                 AllTimeBest

          “#login” –>

                  Login

            – ->

                  AllTimeBest

This is a very simple function, which takes url location as input string and returns the page union type.

In summary, when using Navigation.Program,

  • one clicks a navigation link, elm will trigger UrlChange event with the url link user clicked
  • when an event is fired, elm will call programs update function
  • in update function identify the page user wants to navigate to and update the model with page name
  • when a model is update rendering page will be triggered by calling view

In the next blog we will see how to modify the view to handle page navigation

#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 =

    AllTimeBest

  | 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

#Elmlang – Displaying a list

Continuing our project, in the last blog we took our initial step at displaying a single best opening credit with a simple model. In this blog we will see how do we go about displaying list of opening credits.

Let’s start with model. In the previous example, what we had was just one record with title and url. Now to show a collection, we need to create list of records. Let’s see how would we define the list of records

type alias Model = List

   {  title: String

    , url: String

   }

All we did in this definition compared to previous one was to add ‘List’ in the definition. Even though this definition is all and good, there will be times where you will need to pass just a single record between functions, like displaying one record. So we need to split the definition to represent a record and list of record. With that refactoring the definition would look like this

type alias Model = List

     Record

type alias Record =

      {  title: String

        , url : String

       }

Here we defined a single record definition as record and then created a Model which is list of records.

Next we modify the initial data to hold more than one best opening credits. So I added True Detective season 2 opening credits.

initData : Model
initData =
     [ { title = “Game of Thrones”
       , url = https://www.youtube.com/embed/s7L2PVdrb_8
       }
     , { title = “True Detective Season 2”
       , url = https://www.youtube.com/embed/GJJfe1k9CeE
       }
     ]

There will be no change to update function as there are no user interactions yet.

View is going to be interesting. So far all the controls we have created are all just single controls never displayed anything that is a collection.  How do we go about doing this?

Let’s look at the view from previous blog

view : Model -> Html Msg
view model =
     div []
         [ h1 [] [ text initData.title ]
         , iframe [ width 420, height 315, src initData.url ] []

        ]

The above view function takes Model and creates the view for Elm to render. Now that we modified the Model to List, we need to modify the definition to be Record instead of Model to just display single record.

view : Record-> Html Msg
view record=
     div []
         [ h1 [] [ text record.title ]
         , iframe [ width 420, height 315, src record.url ] []

        ]

This can not be the view, because view needs to generate all the records to display, so let’s change the name of view to a different name to represent what it does, it displaying a single record

displayLine : Record -> Html Msg
displayLine record =
     div []
         [ h1 [] [ text record.title ]
         , iframe [ width 420, height 315, src record.url ] []
         ]

Now we need to modify the view to call this function for every record in the list, that is it. In Elm, there is no iteration or loop instead we will call map function.

view : Model -> Html Msg
view model =
     div []
         (List.map displayLine model)

Let’s look at the view definition closer. View definition states, it takes Model (which is list of records) and generate the HTML view for Elm to render. The view function definition has just one function call that is div. As stated in the previous blog, view function takes two arguments. First set of arguments are the function attributes and second set of arguments are list of children.  In the above definition, the second parameter is (List.map displayLine model), what does it mean?

Let’s look at the definition from left to right. There are three words in the statement. ‘List.map’, ‘displayLine’ and ‘model’.  We know the last two, ‘displayLine’ is a function which takes a record and display the records title and url. The last parameter is ‘model’, which is list of record. So it looks like we are calling List.map function, with two parameters. 

List.map’s first argument is a function which takes list as a parameter and produces list as result.

With that if you look at our call, List map call displayLine for every record in the model and generates one line display for the given record. List.map function always returns a list. Like all HTML function calls, Div function expects the second argument to be list of children and List.map returns the list of displayLine.

If you run the application, you should see a result similar to the following

image

You can find the latest  code @ https://github.com/ksunair/bestopeningcredits

Let’s work on displaying single best opening credit – Elm

Continuing our project to display the best opening credits, let’s jump in start displaying hardcoded single best opening credit.

Before we start coding, let’s refresh quickly on the anatomy of Elm architecture. In Elm application, you have three separate parts each doing its one task and one task only. The three components are

  • Model: This defines the data store and it also defines the initial state of an application.
  • Update: This section defines what are all the actions/events application supports and what do with the state of the application.
  • View: This defines the view of the application based on the state of the application.

Elm architecture is a very simple one. In Elm, all the application state is maintained separately in the model.  On application start, Elm runtime will render the view using the initial state of the model. In the view we define what are all the events a user will be able to initiate. When a user initiate an action or trigger an event, Elm run time will call update function and pass in the incoming event/message and current state of the model.Update will act on the current state based on the event and create a new state, the new state of the application will then trigger view to render new view with updated state of the data.

Now with basics under our belt, let’s write a code which displays single best opening credits.

Like all the application, let’s create model first. There is always two question we need to ask when defining model (there are more but for creating trivial application, two is enough)

1. What is definition of the model? What fields do we need? For this simple application all we need is ‘title’ and link youtube video of the opening credit

type alias Model =
     { title : String
     , url : String
     }

2. Now we know what is data definition, let’s create the initial data that we want to display.

initData : Model

initData =
     { title = “Game of Thrones”
     , url = https://www.youtube.com/embed/s7L2PVdrb_8
     }

There are two things I want to call out, first the idea of using comma in the beginning of the line instead of the end. When we look at it seems a good coding practice but in Elm it is more than that. Since Elm is functional programming language if you miss a comma, the way a function being called will be different.

Second thing is the type definition, even though Elm can infer the types, I would strongly recommend being explicit in your code and declare the types. It helps for future code refactoring and maintenance.

Next Update. Since this is a trivial application with no user interaction, we will define a dummy update function. Again we will continue to ask the same two questions.

  1. What are the events are we expecting?

type Msg
     = DoNothing

This is a dummy event to satisfy the beginnerProgram function,

2. What to do when a update function is called?

update : Msg -> Model -> Model
update msg model =
     initData

Since there are no events to start with we are not acting on any events.

Finally the view. In the view, we are displaying just one record. The title will be bold and then link to yourtube video.

view : Model -> Html Msg
view model =
     div []
         [ h1 [] [ text initData.title ]
         , iframe [ width 420, height 315, src initData.url ] []

        ]

Our view has main ‘div’ with two children, one is h1 and another one is iframe.

h1 does not have any attributes but has a child text which displays the title.

iframe has attributes of heigh, width and the url source.

That is it,

the final component which connects all together is main

main =
     beginnerProgram { model = initData, view = view, update = update }

run the elm reactor which will start the localhost:80 and selecting Main.elm will produce the following result

image

Starting Opening Credit Project in Elm & Horizon

Finally I found some time to start the project. I am doing this project in a way to learn Elm.  To do full end to end development with focus on front end development, I wanted some light weight backend service. Initially I was thinking of doing it with nodejs but I came to find out there is a better one for especially for these purposes like rapid development. Horizon is meant for that. I do not know much about it yet. I am planning to use this project to learn both of them.

Created the base line for the project at https://github.com/ksunair/bestopeningcredits 

For this project, I am using Atom editor.  I am using following packages

git-plus – to better integrate with Git

elm-format

language-elm – Syntax highlighting and auto completion

linter-elm-make – Lint Elm

The main objectives of this projects are

  1. User should be able to login to the site using social media logins
  2. Each user should be able to nominate any of their favorite opening credits
  3. Every user gets to vote for their top 10
  4. Show all time top 10 based on all user votes
  5. Show last week, month top 10

With this project, I intent to look at the following

  • Creating modules to separate the concerns
  • Create unit tests
  • Make http calls
  • Manage routing and navigation

The base project is setup and next blog we will see how we can create a simple page to allow user to nominate the opening credits.

Basic debugging in Elm

This blog purely focus on very basic debugging. No time travel or anything fancy. Simple debugging features.

We will start with our baisc code which takes first name and last name in two different input field and when user pressed ‘FullName’ button, it displays the firstname + lastname in Full Name: label.

image

The program I started out is here in the Gist. With that code, when you run the application and enter the first name and last name like the following

image
and press FullName, you get the following result

 image

The last name is missing and the first name is added twice. (It is easy to fix but for the sake of debugging, we will continue as if we do not know the reasons).  So how do we go about debugging in the Elm?

For starters, when you run the elm in elm-reactor mode, the application runs in debug mode. When the application running in the browers, you will see small box at the bottom right hand side of the screen something like the following

image

If you click to open the window you will see two sections

One on the left, shows all the events that triggered. The one on the right side shows the current state of the model.

image

This will be great means to see all the events that get fired and also for each event how the model changes.

The second approach is the age old logging. Elm provides a mean to log messages to the browser console. We will start with the first problem, that is, the result of first name and last name shows first name twice.

We have following code for Add message

Add ->
           { model
               | fullName = model.firstName ++ model.firstName
               , firstName = “”
               , lastName = “”
           }

even though it is very clear that, we are adding firstName field twice, for the sake of showing logging, we will add logs. To add logs in Elm, you need to import Debug package, which is already part of the Core package you have installed.

1. Import Debug

2. Add log messages to see what is the value of the two fields we are adding

Adding log is pretty simple and very original. Before adding the log the Add event function was

Add ->

{ model

| fullName = model.firstName ++ model.firstName

, firstName = “”

, lastName = “”

}

To log you do not need to create a seperate line statement. You can do it inline like the following

Add ->
     { model
         | fullName = (log “first name : ” model.firstName) ++ (log “last name : ” model.firstName)
         , firstName = “”
         , lastName = “”
     }

Log function take two parameters, first one is string message and second parameter can be anything. Here is an interesting thing, in elm when you have log statement like this, log function logs the message but the underlying function (the original) executes normally. So in reality, the before and after program statement is same.

Open the developer console and execute the code and you will see the first and last name both are first name. So looking at the code we know the insted of adding the last name we were adding the first name.

image

Change the first name field to last name and run the code with the log and now we get different message. Instead of repeating the first name twice, now it displays only the first name and not the last name.

image

You can find the code with logs here in this Gist. Now let’s look why are we not getting the last name. We are going to use, time trave/history tab to see what is happening.  When a user enters a value in the input, for every keystroke onInput event fired. So let’s start there. We need to check and see if appropriate action event fired.

Based on the update event,

type Msg
     = Add
     | Clear
     | InputFN String
     | InputLN String

We expect InputLN event fired. Let’s open the tab and monitor the events.

First I typed ‘unni’ and you can see blow, InputFN fired for each keystroke and when I clicked FullName, you can see the Add event fired as well.

image

With this much information first thing we need to do is to check, do we have the view wired up properly to fire the events on data entry.

, input [ onInput InputFN ] []
, input [] []

The error is obvious, for the second input box, we do not have an onInput event.

Adding the onInput and running the code gives the expected answer.

image

This is the first stab at the debugging in Elm. You can find the final version of code here in this Gist.