[001.5] Elm Weekly Drip #1 and Exercise: Counter Extended

Links getting a bit further introduced to the Elm ecosystem, and an exercise to expand upon the Counter application we started in the last episode.

Subscribe now

Elm Weekly Drip #1 and Exercise: Counter Extended [05.10.2016]

This week, we:

  • Installed Elm
  • Learned about packages
  • Created our first Elm Application

Today we're going to introduce our first Exercise. These are self-directed exercises - we aren't going to be checking up on one another, but we provide the solution in the first episode from the next week of content. This ideally provides you sufficient time to spend some time trying to solve it on your own before you look at our solution.

First, though, we tend to provide a list of links from the community, exploring what's happening and trying to keep you up to date. So on to the links!

This week's links will be fairly light, as we're presently still focusing on learning the basics. To that end:

try elm

An online editor for Elm! Write and compile code online.


String API docs

I wanted to link to the String API documentation because it seems like an easy first package to read the docs for, and because I'm hoping it will encourage you to go clicking around through the core documentation.


elm-lang/html

This is the source code for the Html package that we used this week. You can also read the documentation on the package site.


An Introduction to Elm

Evan Czaplicki is Elm's creator, and this is his work-in-progress gitbook on the language. It's updated as the language advances, and it's pretty fantastic.


Html.beginnerProgram

The beginnerProgram function that makes it easy to get started with an Elm-Architecture application.


DailyDrip

The site behind the Elm DailyDrip and this newsletter.

Exercise

This week we learned how to make our first HTML app with Elm - a basic counter. For this week's exercise, try to extend it to do the following:

  • Add 2 H3 elements below the existing content.
  • In the first H3 element, show the number of times the Increment button has been clicked.
  • In the second H3 element, show the number of times the Decrement button has been clicked.

Html.beginnerProgram Exploration

I also wanted to just include this brief further exploration of beginnerProgram so that I make sure it's clear.

So yesterday we used Html.beginnerProgram to make it easy to build our first Elm HTML application. Let's have a look to see what exactly it provides.

Model

The model is a piece of data that fully describes your application. This is the one place where anything stateful about your application lives. Moving to functional programming, I found it very pleasant that I ended up with a piece of every application that truly laid out all of the bits of data that could possibly change in the application.

In my typical object-oriented applications prior to this, all of the possible states of the application were implicit and hidden throughout various interacting objects. This made reasoning about the application unbelievably hard, in retrospect - at the time, though, it felt natural.

Update

The update function takes in a message and your model, and returns an updated model. This is the place where all reasoning about how your application changes over time takes place. Html.beginnerProgram does the work of routing the messages that your view produces into this function.

View

The view function knows about the model. It renders the user-visible content representing the application, based on the model. It also allows users to emit messages into the system.

Exploration Summary

So in summary, an Elm application starts off with an initial model. Messages are handled by the application. Those messages are routed through the update function to return a new model. That's really everything there is to know about Html.beginnerProgram.