Richard Feldman
GitHub
319
part1/transcript.md
Normal file
319
part1/transcript.md
Normal file
@@ -0,0 +1,319 @@
|
||||
# Transcript [](https://github.com/rtfeldman/elm-workshop/issues)
|
||||
|
||||
> 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](https://github.com/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:
|
||||
```js
|
||||
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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
|
||||
and we're using an
|
||||
[arrow function `->`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|
||||
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 `->`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|
||||
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?**](http://www.urbandictionary.com/define.php?term=Amateur%20Hour)_"
|
||||
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`:
|
||||
|
||||
```elm-lang
|
||||
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](http://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons)
|
||||
(_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_](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
|
||||
like this _instead_ of an `if`:
|
||||
```js
|
||||
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_](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
|
||||
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`](https://en.wikipedia.org/wiki/Whitespace_character)
|
||||
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: https://github.com/rtfeldman/elm-workshop/issues/8#issuecomment-273413043
|
||||
Reference in New Issue
Block a user