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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s