Elm Lang Tutorial, Part 2

Key Takeaways

Hi everybody, this is Tensor from the Tensor Programming Blog. Today we're going to continue our tutorial of Elm Lang. This is the second video in our tutorial. We're going to look at primitive types in Elm. We're going to look at complex types in Elm. We're going to look at functions, basic syntax in Elm. And we're going to look at the Elm ripple. And finally, we're going to create an application that can increment and decrement a number inside of a browser. It's a lot to do, so let's get started. All right, so what we're looking at right here is what's called the sublime ripple. A ripple quite simply is a read a val print loop. That's what it stands for. Basically, you input something into it and it outputs it as though you were running it inside of the program. So for example 1 + 1 + 1 equals 2 and it outputs two as a number type. So as you can see we input the function it gives us the output and it gives us the type in this case it's number. So we have addition in elm we have subtraction in elm. So 2 minus 3 is negative 1. We have multiplication in Elm and we have two types of division in Elm. We have division by so normal division. It creates a float and then we have division that creates an int. Normally it would be 16.5 but in this case it's returning 16 as an int. So this doesn't round the number up or down. It just removes the decimal point. We also have strings in Elm. So strings are followed by double quotes. So here's a very simple string and as you can see it returns type string. We have string concatenation which is double plus in Elm. We also have what are called lists in Elm. Lists in Elm are basically like arrays in JavaScript or arrays in Python. They're made by square brackets. And all of the elements inside of a list are the same. So for example, if we wanted to make a list of strings, we can make a list of numbers too. We also have shorthand. If we want to make a list that's in a range. So let's say we wanted to make a list in range 1 to six. The short hand with the double dots allows it to expand. So we get one two three four five and six. We can do various uh operations on lists. We can concatenate lists. So for example a list two to four and we can concatenate that with a list of say five to 9 and we'll get two to nine. We also have the cons operator which allows us to pop a element into the front of a list. Say we wanted to put one into our two to four list. We use the cons operator which is these two colons. We also have list.head which gives us the head element of a list. So let's say 1 to 10. It'll return just one. Now this syntax just one and the maybe maybe type we will go over at some other point but for now just keep those in mind. Maybe is sort of like null and undefined in Elm though it's completely different. It's just Elm's version of nothing. We also have list.tail which will in this case give us the rest. So two through 10 instead and remove Elm also has booleans so true and false. We have a negation function so not true which of course will produce false. We have conditionals instead of using a uh exclamation point for not true in this we or not equal we use a forward slash. So one is not equal to one is false. Of course we have greater than, less than, greater than and equal to or less than and equal to. And of course they follow normal syntax. We also have what are called tupless in Elm. Now tupils are interesting. They're made with parentheses and they have two or more elements in them and the elements don't have to be the same. So for example, we could have a string, a number, and a boolean. Tupils are typically used for when you want to have multiple return values from a function. Now, because Elm is a functional language, all functions have return values. We also have records in Elm. Now records are sort of like objects in other programming languages like JavaScript and Python. For example, if I want to make a person record person equals let's give it a name John and an age element. Now these elements are what are called fields. They're not called variables and they're not called elements. They're called fields. So we have the name field and the age field. We can access these fields by denoting the dot syntax. We can also do this inversely. So name person will give us also John as well. the string. We're not allowed to do destructive changes in our variables because they are not mutable. So, and that's the same for of course records. Records are immutable. So, if we wanted to change a value in our record person, say we want to change the age to a number 55, we can do that. But what we're doing is we're actually creating a new record. This is very efficient. It may not seem efficient to create a whole new uh object every time we need to create a new record. But the reality is it's quite efficient. Okay. So now let's look at functions. Let's say we wanted to make an add function. We can do add a of b. So the two parameters or arguments being passed in are a and b. And here's the function body which is a plus b. This also acts as the return statement. And as you can see this function takes in a number and another number and returns a number. So I I know this arrow syntax can get a little can be a tiny bit confusing for a new person to Elm, but the final statement on the arrow is the return statement and then every statement before it are the arguments of the function. So add we can invoke add say 40 + 50 and that'll give us 90. We can partially use add. So say we wanted to create a function that adds two to something. We can invoke add and then two and then we can do add two 10 and that'll give us 12. So we partially invoke the function. We can actually use this to map it to a list. So for example add two and list of 1 to 10 will give us all the elements of the list added by two. We can also invoke anonymous functions with this map. And the way that we write an anonymous function is with parenthesis. Then we write what the argument would be. So in this case we only have one argument being passed and then that argument in this case times two and then we give us the list and there we go. So the anonymous function with no name simply add multiplies everything by two. We can also call functions recursively. So in this case, this is a Fibonacci sequence. As I'm writing this Fibonacci sequence, you can see I'm using an if then statement as well. And here is the recursive call. So we're calling fib itself inside of itself. There we go. There's our Fibonacci. And of course, we can map this to a list as well. Let's say we want the first five Fibonacci numbers. There we go. Okay. So, here's a blank Elm document called increment. Elm. It's storing an error because there's nothing in here. So, let's start by importing what we need. We're going to need the HTML library because we're dealing with HTML. We're going to need the HTML.Events library. The reason we need this is because we're going to have two buttons with two onclick events. We're also going to need the HTML.app library or a function rather. What this does is it allows us to follow the pattern of the controller view model pattern that I was talking about in the first tutorial. So let's split our function or our application up into view model and update. update is our controller quoteunquote controller and then the model and the view are pretty self-explanatory. So in this application we are going to take a number and we're going to increment it by one or decrement it by one based on what the user does. So the application will be a number and then it'll have two buttons. If you hit one button, it increments it. You hit another button, it decrements it. So let's start by typing out what this application. First, let's type the model. So we can write what's called a type alias, which allows us to create a complex type. So in this case, we're creating a type called model. And this type called model is just an int because all we're using in the model is just an integer. So the model function itself takes in a model and outputs a model. It takes in nothing rather and outputs a model or or update type rather is a message. So we're going to take a message from the view and we're going to use that to update the model. So the view is going to tell us whether or not we increment or decrement. Then the update is going to use that increment or decrement to decide what exactly to do. So type of message is either increment or decrement. That's our update type. And our update function is going to take in the message then the model and then output our new model. I know it's throwing all kinds of errors, but that's because we have no data in here yet. Now, let's look at our view. The view is pretty simple. It's going to take in a model and output HTML and a message. So, now let's start backwards and let's create our view. So in Elm you have so I'm creating a function here that takes in a model called view and in Elm you have functions uh that represent HTML. So we have a div function and the div function takes two lists. The first list allows us to classify things like the class, the type, uh, onclick events and stuff like that. And the second list allows us to classify things inside of this actual function or not function but attribute. So in this case, this div is going to wrap around our entire application and inside of it, we're going to have a button and this button is going to have an onclick event. or decrement and it's going to have text of a negative sign. Our next part is going to be another div and this div is going to have our model in text format. So we need to use two string and then we're going to have another button. This button is going to have an on click event for increments and it's going to have text of a plus sign on it. There we go. And when the user clicks on one of these, it shoots up to the message which then updates the model. So the next thing we need to do is look at how our update will be. Our update function will use pattern matching. So update message model these two things get passed into update or case message of increment and all that's going to do is it's going to add one to our model decrement. All it's going to do is subtract one from our model. And that's all we do for the update function. So finally let's get to our model. And this is very easy. Our model just equals zero. All right. So the last thing we need to do to make this application work is to use our main function. So the main function is like the output. In this case we imported app here. So our main is going to be equal to app dot beginner program. and it outputs all this crazy type information that we don't really need right now. And it's going to take in a record. And this record is just an initialization function. The view is going to equal the view. The model equals the model. And the update equals the update. And the reason why we write this function is so that the application understands that we're using a view model and update. There are no errors or anything. So let's run Elm reactor. Take a look at what we have. And there we go. An application where we can increment and decrement just by pushing these buttons. Let's take a look at the source code here. As you can see in the head, there's some simple styling that gets done through Elm. We can change the styling with other functions, but for now, we'll just use the simple styling. And then the body is just a button, a div, and another button. And none of them have on click events or anything. As we click these buttons, you can see that only the div is changing. So, it's a bit like React in that it's got a shadow DOM of sorts. Every time we click a button, the update function is being called and it's changing the model accordingly. Anyway, thank you for watching this video. If you liked it, please like it. If you hated it, please dislike it. And if you have a question, please may leave a comment. Anyway guys, I'll see you guys next time.