elm-0.19-workshop/part1/transcript.md

Transcript

The purpose of this transcript is to:

• make the video content accessible to hearing impaired people.
• give non-english speakers a reference they can read in case they don't understand what is being said. (in some cases the speech is too fast...)
• let people run the content through a translation service when they really don't understand what has been said. This can often greatly enhance the learning experience for non-native learners. And if FrontendMasters ever decide to add a "subtitles" feature, having human-written transcript is still much better than computer-generated subtitles.
• (100% Optional) enhance the content with hyperlinks on specific terms so people don't have to google for ages to understand things.

This is elm. I'm Richard Feldman @rtfeldman

So we're going to start with just the absolute basics, just Rendering a Page. but before we can do that, we kind of need to understand a few things.

One thing to understand is that elm compiles to JavaScript. So what does that mean? To explain this, I want to start by looking at something else that compiles to JavaScriot, namely Babel.

https://babeljs.io/repl/

So this is Babel, probably you are familiar with this, but for those that are not the basic idea is that Babel compiles future (or current) JavaScriot spec to backwards-compatible JavaScript for older browsers.

ES2015 Code:

let pluralize =
  (singular, plural, quantity) => {
    if (quantity === 1) {
      return singular;
    } else {
      return plural;
    }
  }

console.log(pluralize("leaf", "leaves", 1));

So here on the left we are using let and we're using an arrow function -> Those are new things to JavaScript if you are Internet Explorer 10 you don't know about these things. So in order to write code like this, and end up with code that can run on Internet Explorer 10, for example, you could run it through something like Babel. So Bable will take this code and it will generate this code (gestures to the code on the right side) It will compile to this JavaScript (on the right). The basic idea here is that you write this code on the left and you give the browser this code on the right. So you can see that it's pretty much the same stuff, just that it's added in a "use strict"; and it's changed the arrow function -> to the word function and it's changed the let to a var.

So what is this function actually doing? This function is called pluralize. So this is something you might use if you've got say a table full of things, let's say leaves in this case. And you want to, at the bottom (referring to the console.log) tell the user how many things are in this list. So you could just say the number followed by the word "leaves" but that will be kind of embarassing if there happens to only be one thing in the list. Because then we will say "One leaves" and people will say: "what is this? Amateur Hour?" You just use a pluralize function so that's all this does; it looks at what you give it takes a singular form so "leaf" and a plural form "leaves" and says: "if the quantity that you gave me is exactly one then we will use the singular otherwise we will use the plural."

Ok, so this is what that looks like in Babel, here's what that looks like in Elm:

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

pluralize singular plural quantity =
  if quantity == 1 then
      singular
  else
      plural

main =
    text (pluralize "leaf" "leaves" 1)

This is essentially the same thing, this is "try elm": http://elm-lang.org/examples/hello-html

The only difference is that instead of showing you the compiled JavaScript on the right, it's instead just running it through the browser. So on the left we have the elm code it's getting compiled to JavaScript in the same way that Babel does, and then "try elm" is immeadiately handing that off to the browser so the browser can run it. And this right here is the same function we had over there, it's the same implementation except instead of writing in "ES6" we're writing it in elm.

So let's talk through what this code does.

So, first thing to note is a few differences in the definition of this function by its' self. So we can see that in Babel we are writing let and then pluralize equals whereas in elm we are writing pluralize followed by the arguments followed by the equals (=); the arguments go to the left of the quals sign. Where as in Babel (ES2015) they are in parentheses with commas after the the name of the function.

There are other ways you can write this, but for the purposes of this comparison, the relevant thing to note is that in elm if you are defining a function like this, the name of the function then whatever arguments you want it to have no commas in between, just whitespace and then the equals sign.

Next thing to note is that we have got this comparison here so if, if on the left if on the right we see a couple of differences with the curly braces versus then still just comparing the quantity equal to 1 singular versus plural.

So let's break down those differences a little more. We talked about the arguments being different:

Also note that there are no parentheses around the if.

so in elm you don't need to put parentheses around there if you want you can always introduce parentheses in order to group things and disambiguate, so if you wanted to you could put parentheses around if quantity == 1 e.g: (if quantity == 1) then but you typically wouldn't, you don't need to and it's considered "best practices" to only put in parentheses when you're actually disambiguating something.

Also note that in elm we use double equals (==) instead of tripple equals (===), there actually is no triple equals operator built-in to elm because double equals (==) just works the way you want it to. So there is no rule of thumb (like there is in JavaScript) of use one vs. the other, just use double equals (==) and it will "do the right thing".

Another thing to know about elm is that else is required. In JavaScript it's perfectly acceptable to write an if statement that does not have a a corresponding else but in elm you always need an else; every if must come with an else

That's because this whole thing is an expression.

In JavaScript you can have a ternary expression like this instead of an if:

quantity === 1 ? singular : plural

and that is what this is properly, this refers to, the JavaScript equvalent of this elm code really is not an if statement but rather a ternary expression like this. So in JavaScript you would say "quantity triple equals 1" (the condition) in elm you say: "if quantity double-equals 1 then here's what you do if that's True and here's what you do if that's False" So, same basic idea.

Day 1 Hour 1 - h1.mp4 @ 05:11 Now the relevant part is that this entire chunk of code is an expression; it evaluates to a single value which means it's "portable". You can pick it up and just drop it somewhere else and just say "foo equals if quantity == 1 then singular else plural..." You can do that anywhere you would have any single value. You can just drop in this entire if expression, perhaps with parentheses around it to disambiguate. And it's exactly the same thing with the ternary and so you need this both if and else because it needs to be clear what value is going to be substituted in there if you do drop this in place of any other value.

So here's how function calling works this was the code we had in "try elm" slightly below the definition of pluralize calling a function is just done with whitespace so we are going to say pluralize followed by some whitespace followed by its' arguments.

Also note that there are no commas between the arguments so it's just pluralize "leaf" "leaves" 1 the parentheses here in this case are to disambiguate between two function calls that we are making so this right here, that's all one function call:

and this is actually a second function call, we're calling a function called text:

and what we're passing to text is the result of calling pluralize passing "leaf" "leaves" and 1

so this is calling a function (pluralize) passing 3 arguments:

and this is calling another function (text) passing 1 argument:

the one argument we are passing is the result of the other function. note that this is a case of the parentheses serving to disambiguate. if we did not have the parentheses here this would be indistinguishable from calling text passing in four arguments. the first is the function pluralize and then "leaf" "leaves" and 1 is the other three. So parentheses for disambiguation but otherwise whitespace is just what you do for calling functions.

Finally we have at the top we have this import Html exposing .. we'll get into modules a little more later, but it's basically just saying: "Hey, bring in the Html module and expose all of the stuff in there." such as this text function and we will make use of those.

Day 1 Hour 1 - h1.mp4 @ 07:15 OK, so "why bother?"

I just taught you a bunch of new syntax, and showed you how you can write the same thing in JavaScript why bother learning a whole different language...? is it just learning syntax for nothing?

What can you do in elm, like what does it get you that Babel does not? That's a great question. So, let's say we've got this implementation and we build it and we're going to use it in production and hopefully we write tests for it, hopefully those tests do a good job covering the different cases. But let's say we make a mistake in our implementation here:

So we're like: pluralize "leaf" "leaves" 1 and it gives us "leaf" down here (refering to the console.log output at the bottom of the Babel page)

If we call pluralize passing "leaf" "leaves" and 3 It gives us "leaves". Great! that's what we expect! Any number over 1 should give us the plural form.

And then let's say, when we implemented this we accidentally made a typo here:

Instead of singular we said singula ...

Ok, so, as we can see, this code still works!

Day 1 Hour 1 - h1.mp4 @ 08:08

please help finish this transcription: