Elm in 7 minutes
We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.
[00:01] Let's expand this "Hello, World" example into a simple To-do app. We'll follow the Elm architecture and divide our app into three main sections -- a model, update, and view.
[00:16] We can create a view that has an input box and a button, so we could submit our new to-do. As we could see here, HTML elements are represented by functions that take in two parameters -- a list of attributes and a list of children. Let's call our view "From Main," but first, we need to import the HTML attributes.
[00:46] Now we can save and refresh our browser. We see our input and our button, but they don't do anything. We need to add a few more things to our app before we can start capturing to-dos.
[00:58] Let's start by creating a model that will describe our data. We've used type alias to create a model with one property, to-do, and that will be a string. Let's actually create a model value so we have some data when we start our app.
[01:23] Now that we have a model, what do we do with it? We can move to the update section and create a message that describes what our app can do. Within our message type, we've defined one type of message that our application can respond to.
[01:44] Now we'll need an update function so we can handle things like "Update text." It will take in a message and our model. Within our case expression, we're looking for "Update text," and now we need to update the model.
[02:03] What will happen here is Update text will return a new model for us. Since Elm is immutable, we can't actually mutate the model. Before we can call Update text from our view, we need to import Beginner Program.
[02:26] HTML.beginnerprogram will help us to wire everything together. It takes a record that's looking for three properties -- a model, an update, and a view. We can match it to ours.
[02:40] We're almost there. What we need to do is now import an event so when we type into the input, it will get updated in the model.
[02:52] Now we can update our view to dispatch Update text. Now that we're using Beginner Program, it's going to pass a model into our view, and we combine that model to the value of our input.
[03:09] We can verify everything works. We could add a value into our input and click to-do, but we need to verify that it's working. We could do this by adding a Div that shows us the text as we're typing in.
[03:31] We have the basic structure in place. Let's expand on our app by updating our model. To-dos will be a list of strings. Now let's add a message called Add Item. Now we can define what we want to happen with that item.
[03:53] In this case, we want to add whatever is in our input box into our To-dos list. We want our model.todo to go on the front of our model.todo's list. We could do that by using the double colon -- pronounced cons.
[04:14] We can add an on-click event to our button, and we can't forget to import it. Whatever we have inside of our input when we click the button, it will get added on top of our to-do list, but we're currently not displaying it. Let's do that by creating a to-do list function.
[04:37] What we want to do is return an unordered list, so we need to map over each item in our to-dos list. Using a Let allows us to keep our work scope locally. I purposely left the first parameter in the map, empty [inaudible] , because I actually want to create a to-do item.
[05:06] Finally, let's call to-do list from our view, and pass in to-dos from our model.
[05:12] Let's verify that's working. If I expand our browser window, we see that we have an error. OM has a great compiler. As you can see here, it gives us the line number and shows us where our error is, and also, it gives us a recommendation how we might want to fix it.
[05:36] Time to add items to our list. Everything seems to be working, and we can add items to our list, but we're missing one last feature -- how to remove items. Again, we'll follow the same pattern to remove items.
[06:00] Here, we can use Filter to create a new list that's excluding the to-do we want to remove. We'll create an anonymous function. We start that by using the backslash. Forward slash and equals is the "Not equals" operator.
[06:21] Finally, let's add a way to remove the item from our view, and let's just pass in the to-do with our Remove Item.
[06:34] Whoops, I noticed a typo, and I should probably shorten these to "T." Now let's try.
[06:51] We have our simple To-do app.