Rendering a Page Exercise

[00:00:00]
>> Richard Feldman: All right, let's get to our first exercise. So essentially, what we're gonna be doing for part 1 is we're gonna be going from the thing on the left to the thing on the right. So we're gonna start off with some TODOs, we're gonna have a little really, really basic main.elm with a little bit of code in it.

[00:00:14]
And what we're going to do is we're gonna build it out and do a little bit of rendering, such that we end up with something that looks much nicer. That's going to be sort of the starting point for our conduit application that we're gonna be building. So there are some instructions in part1/README.md.

[00:00:31]
I'm gonna hop on over there. Worth noting that you should have this server running from the introduction thing. We're not actually gonna use the server for the first couple exercises, because I wanna demonstrate just like, if you were really starting from scratch, and all you wanted to do was just build some plain index.html main.elm, here's how you do it.

[00:00:51]
But partway through the workshop, we are gonna switch to using this server and this more fully fledged code base, so you wanna make sure that you're leaving this running in a separate tab for the entire workshop. Okay, so we're in this intro directory, so you should have cloned the workshop by now, and then there are two directories inside a route directory, one's called intro, one's called advance.

[00:01:11]
As you may have guessed, there are two workshops I'm doing here, one is the intro workshop, and the other is advance workshop. Definitely wanna use the intro workshop for this, because the advance one would be way too hard, [LAUGH], for what you know about Elm so far. Inside this intro folder, we can see we have a readme, and then, a bunch of other folders.

[00:01:29]
So part one through part nine, those correspond to the different lessons we’re going to do, then server holds onto all the back end stuff that we’re gonna be using, and when we get a little bit further on. So the readme explains sort of how to get setup, and then each of these parts has its own readme inside of it.

[00:01:45]
So we're gonna cd into part1, and when we do these other exercises, we're gonna up a directory and go back into part2, go up, go into part3, etc. Inside this directory, let me clear real quick, we can see a couple of different things. You may not have an Elm stuff directory.

[00:02:01]
This is a temp directory that just stores stuff that the compiler uses. So it's always safe to blow that away. So don't worry about it, it goes in git ignore. Also, there's that elm.js file. You might not see that because you haven't actually run Elm make yet. Again, that's also safe to remove and that's also git ignored, because it's fundamentally something that's generated by the compiler.

[00:02:23]
So both of those can always be gotten rid of. So this is probably what you're seeing, main.elm, readme.md, elm.json, and index.html. We'll get into elm.json a little bit later, that has your dependencies for your application. Index.html is just the basic plain HTML page that is gonna import the .js file that we're gonna compile.

[00:02:45]
And then finally, we have main.elm, which is the things we're gonna be working on. So let's go ahead and open this up in our editors. I'm gonna use Adam for this workshop, but there are a whole bunch of editors you can use for Elm. They all have plug-ins and stuff like that.

[00:03:01]
But Adam's the one I'm going to happen to choose here. So this is our Main.elm file. Let's not quite dive into this just yet. Let's first start by looking at the readme because each of these parts has a slightly different readme that describes what we're going to do.

[00:03:15]
Okay, so first of all we have some build instructions. So if we want to see the part1 directory and run elm make Main.elm --output elm.js. Let's go ahead and do that. So, as previously noted on the slide, dependencies loaded from local cache, dependencies ready, success, compiled 1 module.

[00:03:32]
So whenever we wanna rebuild our file, we're just gonna keep doing that, just keep rewriting that command, and it's just gonna keep rebuilding it. By the way, you notice the output message is a little bit different on these subsequent runs. The first one, when it says, dependencies loaded from local cache, dependencies ready.

[00:03:47]
What that's talking about is regenerating the elm-stuff directory. So that's something that it uses for caching. On an application this small, it's trivial, there's not much to cache. But on a bigger application, that elm-stuff directory will save you a good bit of time as you do incremental recompiles.

[00:04:04]
Oops, go back to my editor. Okay, [COUGH] and then we're gonna open index.html in the browser. So on MacOS, you can just type open but otherwise, you may wanna open it like a directory, something like that. In the future, we'll be going to local host for the server but for now, we're just gonna do it like this.

[00:04:21]
So as you can see, we have a beautiful page here, it says TODO replace this div with the banner and then in parentheses in the future, we'll display a feed of articles here. Okay, so let's actually make this happen. So the way we're gonna do this is open Main.elm in your editor and resolve the TODOs there.

[00:04:36]
After you complete each one, re-run elm make Main.elm on the terminal to recompile the elm.js file. Then refresh the browser to see the results. There's ways to get live reloading and stuff like that, but, again, for this workshop, we're just gonna keep it really simple. So you can just understand the underlying tools that all these other nicer tools are building on top of.

[00:04:54]
Okay, Main.elm, so inside this, we can see a bunch of different concepts that we've seen before. So we've got these divs here with classes, we've got some text. We're assigning some things to names, so we've got a thing called feed, we've got a thing called main. Ultimately, all you need to do for this exercise is to follow these TODOs.

[00:05:14]
So whenever you see this little emoji and a TODO, it's gonna describe what you need to do in that case. As far as this stuff up top, we didn't really talk about modules and imports. No need to worry about those for the purpose of this exercise. All you need to do is focus on the TODOs and resolving them.