Hello World

Let us start with the customary Hello World program written in Elm. This books is written with a view to present some of the ideas, idioms and patterns related to functional programming as represented in Elm, to a newcomer to functional programming. For the experienced programmer with a functional programming background much of this material should be very familiar, apart from specifics of the syntax of Elm and some details in the idioms of Elm which are slightly different. We will discuss those in detail.

Let us start with the customary Hello World program. In this program we write out a string to HTML which can be displayed in the browser.

import Html

main =
   Html.text "Hello, World!"

You can just enter this code in the online editor/runner. This way you can run all the code samples without getting side tracked into an install at this time. Once it becomes essential, I will provide notes and you can install/run elm locally.

Let us go over the program written above and see if we understand it. The first statement imports a package elm-html which defines a set of functions that enable us to write code that creates/manipulates HTML.

Html.text : String -> Html

Html.text is a function defined in the package elm-html that converts text into HTML and attaches it to the DOM tree.

You will find all the documentation of the core libraries on the Elm website. And finally if you need additional packages or info on packages you can find it here.. I also encourage you to read the documentation and examples on the Elm site.

Now let us consider a second example, by including the Html.Attributes module you can control the attributes of the HTML elements as follows:

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

astyledMessage =
  div [Html.Attributes.style[("font-style", "bold")
      ,("font-size", "50px")
      ,("color", "blue")
      ]]
      [text "Hello World"]

main =astyledMessage

As you can see the HTML attributes are encoded as tuples with key/value strings in it. This closely matches the structure of HTML attributes. If you are familiar with HTML you will find it easy to translate your knowledge of the HTML attributes to Elm.

Exercises

• Try to change the properties of the hello world text using html attributes and get comfortable with setting different html text properties.

Finally, since we have access to HTML images a picture is worth a thousand words! How about a different kind of Hello World program?

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

astyledMessage =
  div [Html.Attributes.style[("font-style", "bold")
      ,("font-size", "50px")
      ,("color", "blue")
      ]]
      [text "Hello World"]

helloWorldPic =
  img [src "http://sourcefed.com/wp-content/uploads/2014/12/world.jpg"
   ,style
     [("width",  "400px")
        ,("height", "400px")
     ]
  ][]

main =div[][astyledMessage, helloWorldPic]

This brief chapter should have given you some flavor of the representation of HTML within ELM. For those who know HTML this should all be easy. I hope that these examples motivate you to continue your journey. As you can see Elm provides you with the tools to generate and manipulate HTML and the DOM tree programmatically. In a later section on Building Web Applications we will take full advantage of these capabilities. But first let us get familiar with Elm the Language.