Custom Types Exercise

[00:00:00]
>> Richard Feldman: Okay, let's take a look at the exercise for part five.
>> Richard Feldman: Okay,
>> Richard Feldman: All right, so this is the part where we flip the bit and we are now not just working on what we had before, where we were just building up this index.html. We are now actually working with the entire working application.

[00:00:24]
So we have a new directory called assets, which just has some static assets. Not gonna worry about that too much. If we look inside the source directory though, we now have a whole bunch more stuff, so a whole bunch of Elm files. We've actually got some additional directories in there for even more sources.

[00:00:40]
And 99% of these we're not going to worry about for the purpose of this workshop. The reason they're there is to sort of give you a sense of not just how do I build an Elm application from scratch, that's very simple, which is what we've been working with up to this point.

[00:00:56]
But this is now demonstrating, okay, what does it feel like to work inside an existing ELM code base? Let's fast forward and say, you've gotten it introduced at work, you're working with this larger ELM code base. What does it feel like to work inside of this code base and make changes?

[00:01:11]
Because really, that's I think a very important part of sort of the experience of using ELM is what does it feel like when you're making changes to an existing code base that's way too much to already have loaded into your head. And as you can see here, there's no way to get up to speed this quickly.

[00:01:26]
We're just going to be relying on the compiler, and we're just gonna see just how much help it can give us when we're solving these exercises. Cool, okay, so part five. I open up the Readme. It sort of explains that we're going to be working on this larger code base.

[00:01:42]
We're still going to be building src/main.elm, but we're gonna be editing different files. So src/main.elm imports all other files that we're gonna be modifying. So for the rest of the workshop we're still going to be building the same way, it's just that we don't need to point it at different files just because we're editing different files.

[00:02:02]
The fact that main imports those files means that the compiler will figure it out for us. Second thing is instead of opening index.html, we're now gonna open local host port 3000. So that's that server we set up at the beginning of the workshop. And finally we're gonna specify a slightly different output target, which is to say ../server/public/elm.js.

[00:02:22]
And basically this is so that it's going to be outputted into the folder that the server that we've got running is going to be expecting, rather than into our local directory. So start off with that. ELM make, okay, success, compiled one module. And now when I go back to my browser, I'm going to go to local host port 3000.

[00:02:41]
Great and here we can see everything looks pretty similar except there's now, believe it or not, a whole bunch more functionality going on behind the scenes, not just rendering a little avatar. [LAUGH] There's actually an entire application here. So now we can sign in, we can sign up, we can click links to people's profiles.

[00:02:58]
There's way more functionality than what we had before. Also, this is a single page app, but we're not gonna get into how those work today. Just be aware that this is really a sort of fully-featured example app. Also worth noting that this is, being a real world app, you can see this whole application implemented in various different technologies, which can also be a good learning tool.

[00:03:19]
So there's a react Redux version of this. There's an Angular version of this. There's a Vue version of this. If you go to their website, which we'll have a link to at the end, you can see this same application implemented in a bunch of different technologies. And by the end of this workshop, you'll be at least partially familiar with the ELM implementation.

[00:03:36]
Cool, okay, so same format as what we've been doing so far. We're gonna open up main.elem and we're gonna start working through the to do's. You may notice there are slightly more imports now because, well there's a lot of stuff going on there now. And actually I just remembered that for this exercise, we're not gonna work on main.elm.

[00:03:55]
It's actually going to be src/Page/register.elm. So this is the sign up page. So still more imports, but not as many as main. Main wires everything together, so it's got the most imports as a general rule. Okay, so this is sign up page. And so right now when we open up the sign up page, there's a bug, and this bug exists because I introduced it so we could do an exercise around it.

[00:04:23]
But here's the bug. So let's say I wanna sign up as RT Feldman. I'm like, yeah, cool, sign up as RT Feldman. Email address is, hey, where did my username go? That's weird, let's try again, rtfeldman, okay, kept it, great. My email is, come on, what's going on?

[00:04:36]
So there's a weird bug here where when I'm typing in my username it works fine, and then as soon as I start typing in any of the other fields, like if I start typing in a password, it clears it out. And that's the symptom of the bug, and we're gonna see what the root cause is and then fix it over the course of this exercise.

[00:04:54]
Okay, so here's our first to do. When the user inputs a user name, update it in the model. So that's kind of a clue list of what's the problem here is. We currently are not actually writing down the username whenever the user types it in. Which means that as soon as we change any of the other forms, it immediately sort of gets blown way as ELM rerenders the page.

[00:05:15]
I'm not going to explain how to do this. Because if this were a real code base, we wouldn't necessarily know how all these things work. We see a bunch of ELM code here, and we sort of know how ELM code works. We don't know the exact details of how this code base works yet.

[00:05:30]
That's okay, though. We have all the tools to do it, the compiler's gonna help us out. Now we've got a hint which is to say you can see examples of how to do something like this in the email input below, right. We've also got email which is working properly, we've got password which is working properly.

[00:05:45]
It's just username that's broken. So we're gonna use that as an example, and take a look at that to figure out how to solve this problem. There's only one to do in here, but there's some implications. This is not going to be one of those things where we can just add one line of code here and it's just gonna work.

[00:06:00]
The one line of code that we add is going to have be based on making some other modifications to this file, using custom types that we just learned about, using the ELM architecture that we learned about in the previous sections. And all the tips and tricks that we've accumulated throughout the course of the workshop.

[00:06:16]
So this is a live fire exercise, we're gonna solve our first ELM bug in an unfamiliar code base, and we're gonna do it in between 10 and 15 minutes.