- Beginning Elm

Let’s get a little taste of Elm before we get properly introduced to it. We will be building a simple web page using just HTML and CSS first. Later we will rebuild the same page with Elm to see the difference between two approaches.

Building a Simple Page with HTML

Create a new directory called beginning-elm. It doesn’t matter where you create it. Inside that directory, create a file named homepage.html and add the following code to it.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      .jumbotron {
        background-color: #e6ffe6;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="jumbotron">
      <h1>Welcome to Dunder Mifflin!</h1>
      <p>
        Dunder Mifflin Inc. (stock symbol <strong>DMI</strong>) is
        a micro-cap regional paper and office supply distributor with
        an emphasis on servicing small-business clients.
      </p>
    </div>
  </body>
</html>

It’s a simple web page with a welcome message and a short description of one of our beloved companies. The page is styled with Bootstrap, a CSS framework. It also contains some inline style.

Note: Don’t worry if you aren’t familiar with Bootstrap. We are using it here to make the page look slightly better. Later it will serve as an example for how to load an external CSS framework in Elm.

Open the homepage.html file in a browser. It should look something like this:

Next, we will rebuild the home page for Dunder Mifflin with Elm.

Building a Simple Page with Elm

Create a new Elm project by running the following command from the beginning-elm directory in terminal.

$ elm init

We are greeted with the following message.

Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.0/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]:

The creators of Elm have gone to great lengths to make it a very friendly language. Consequently, Elm often tries to gently nudge us in the right direction with just the amount of information we need at the moment. Go ahead and press Y. All elm init does is create the elm.json file and an empty directory called src.

elm.json - Elm uses this file to determine which packages our project depends on. More on this later.

src - This directory is where all of our Elm files will be stored. Create a new file called HomePage.elm inside the src directory and add the following code to it.

module HomePage exposing (main)

import Html exposing (..)
import Html.Attributes exposing (..)


view model =
    div [ class "jumbotron" ]
        [ h1 [] [ text "Welcome to Dunder Mifflin!" ]
        , p []
            [ text "Dunder Mifflin Inc. (stock symbol "
            , strong [] [ text "DMI" ]
            , text <|
                """ 
                ) is a micro-cap regional paper and office 
                supply distributor with an emphasis on servicing 
                small-business clients.
                """
            ]
        ]


main =
    view "dummy model"

Don’t worry about understanding the code above for now. We will cover how an Elm application works in detail later. All this code does is implement the exact same home page we built with plain HTML and CSS above. Run the following command from beginning-elm directory in terminal to compile HomePage.elm to JavaScript.

$ elm make src/HomePage.elm --output elm.js

Note: The output file doesn’t have to be elm.js. You can call it anything you want. If you do name it something else, make sure to change the name in the HTML code below too.

If you look inside the beginning-elm directory, you should see the elm.js file and a new directory called elm-stuff which contains the build artifacts. Create one more file called index.html inside beginning-elm and add the following code to it.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      .jumbotron {
        background-color: #e6ffe6;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="elm-app-is-loaded-here"></div>
    
    <script src="elm.js"></script>
    <script>
      var app = Elm.HomePage.init({
        node: document.getElementById("elm-app-is-loaded-here")
      });      
    </script>
  </body>
</html>

The code inside <head> is exactly the same as before. The <body>, however, looks different. We created a div and gave it an id. We then loaded the elm.js file that was generated as an output when we ran this command earlier: elm make src/HomePage.elm --output elm.js. That command compiles our Elm code and puts it in the elm.js file. Finally, we used the Elm.HomePage.init function to load our Elm app inside the elm-app-is-loaded-here div.

Note: Don’t worry if some of this doesn’t make sense yet. We will cover the mechanics of creating and embedding an Elm app in detail later.

Open the index.html file in a browser. It should look exactly like the one we built with just HTML and CSS.

Building a simple web page with Elm took a bit more effort than doing it with just HTML and CSS. If all you are building is a bunch of static pages, Elm is probably not the right tool for that. But if you need to build a highly interactive web application that will continue to grow in size and complexity over time then Elm is a fantastic tool for that.

The rest of this book is dedicated to getting ourselves familiarized with Elm and understanding how its architecture helps us build incredibly robust front-end web applications.

2.3

Building a Simple Web Page

Building a Simple Page with HTML

Building a Simple Page with Elm

Introduction

Syntax & Semantics

Architecture