nytimes-video-search

Each step of the tutorial is tagged.

step1

Run elm init to create a new project. I would strongly encourage you to read the Official Guide. Create a Main.elm.

First we declare a new module named Main that will expose a single function main and we import a few other modules for Main to use:

module Main exposing (main)

import Browser
import Html

Next we add a custom type Msg that describes all of the possible messages our app will respond to. ChangedSearchTerm String means "Hey, a user entered the search term, here it is."

type Msg
    = ClickedSearch
    | SetDate String
    | EnteredSearchTerm String

Next we begin modeling the application state. We create an alias Model to a record with a single field searchTerm which must be a string. Then we describe what the initial data actually is in the initModel value.

type alias Model =
    { searchTerm : String
    }


initModel : Model
initModel =
    { searchTerm = "Hello World"
    }

Now that we've described the messages and data model of our application we describe how they interact. First we create a Browser.element that takes a record with fields set to 4 important functions and returns a type Program () Model Msg. (These type annatations are optional but useful. If you have a function named length it can be made more understandable with an annotation length : String -> Int indicating it returns the number of characters in a string.)

main : Program () Model Msg
main =
    Browser.element
        { init = always ( initModel, Cmd.none )
        , view = view
        , update = update
        , subscriptions = always Sub.none
        }

always is a function that is imported by default along with other functions and types from elm/core. We won't cover flags) or subscriptions in this tutorial.

Finally we have the meat of our application. The all important functions view and update; Both of which interact with the Elm Runtime in what we call "The Elm Architecture". Below we have the function view which transforms a Model into Html that can emit messages. In this case our view is text from our internal data model. Then we have the update function which transforms a Msg and a Model into a new Model with zero or more commands to run (For things like Http or getting random numbers). It returns a tuple (Model, Cmd Msg) and for the case it gets the ClickedSearch message it returns a new model with searchTerm set to "testing 1 2 3" and zero commands. It does nothing for all other cases (_ is a wild card that fell over).

view : Model -> Html.Html Msg
view model =
    Html.text model.searchTerm


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ClickedSearch ->
            ( { model | searchTerm = "testing 1 2 3" }, Cmd.none )
        _ ->
            ( model, Cmd.none )

Like words and pictures? Then you'll like gifs!

For a high level overview of this, read The Elm Architecture part of the guide.

Run elm reactor to view your creation.