The Elm Architecture

[00:00:00]
>> Richard Feldman: So going back to our example app here, our conduit app. We've got these popular tags on the right and let's say that we want to build out something on the left that actually resembles a real feed. So let's say that we have some feed data, maybe some records, representing these different articles.

[00:00:20]
Now ultimately, when we get to the real application we're gonna have more fancy stuff going on over there with these articles in the feed. They're gonna have pictures, they're gonna have tags listed on there, they're gonna have links. But for now we're gonna render this in a sort of plain static way that just lists the title of the article, a little bit about what's going on with it, and then a read more thing that's not even a link, it's just some text.

[00:00:45]
And what we wanna do is we want to make it so that when you click on one of these tags such as Elm, Fun, Programming, or Dragons cuz, I mean, who doesn't want, obviously that's gonna be a popular tag. We wanna filter the feed such that it only shows articles that have those tags.

[00:01:01]
And we can do that using all the concepts that we just learned. So for example, if this is all of the things related to the Elm tag, and then I click on the Programming tag, then maybe it's gonna come back with just this one element in the feed because that's the only that happens to have that particular tag.

[00:01:20]
Okay, to do this, to make this interactive, we're gonna need to introduce one more concept which is the Elm architecture. Because this is how Elm applications respond to user input and actually change what's going on based on that user input. So there are three fundamental ideas here update, model, and view.

[00:01:38]
Wanna go through what each of those do and how they relate to one another. Ultimately what we're gonna build up to is this diagram. This is a diagram of how the Elm architecture sort of fits together. We have model, view, and update sending some HTML from view to the Elm run time, and then Elm run time is sending messages to update.

[00:01:56]
So let's learn about these. We're gonna start with view. So view is a function that takes a model as an argument. So the model refers in this case to the entire application state, like really the entire state of the whole application is this one argument that comes into view.

[00:02:12]
And view uses that to return some HTML that says this is how I want the page to look given this application state. So literally, when you call this function saying here's the whole application state, that's all the stuff you have to work with in the entire universe, tell me how the page ought to look.

[00:02:28]
And it's gonna return these virtual DOM values which then Elm is gonna take care of putting on the screen. So model is the application state really, really the entire application state and that's going to get passed to view, which then returns some HTML describing how the page ought to look.

[00:02:47]
Where does view return this to? Well, this is going to get called by the Elm Runtime itself. So every time you compile your Elm application using Elm make, part of what gets compiled into the Elm.js file is the runtime. And the runtime takes care of stuff like this, like interaction, like wiring behind the scenes.

[00:03:05]
And translating these concepts into actual JavaScript code that's going to execute them in the browser. So we're gonna define our view function, but we're not actually going to run it and cause it to mutate the screen, the runtime is gonna take care of it. All we do is we say, hey Elm runtime this is my view function.

[00:03:23]
We're gonna sort of configure it to say, here's what I mean by a view function. And the runtime is going to actually pass the model in to that, and then, take the result and it's also going to take care of making the page look as requested by the view function.

[00:03:36]
Whatever you put in this virtual DOM, the runtime is gonna take care of making the real DOM on the actual page look that way. Which is to say, like this.