Outlets, URLs & Routes

[00:00:00]
>> Mike North: So far we have been using hard-coded data, most of that data currently lives in the HTML that we started with, right? That's where all the teams and the channels, and things are coming from. So in the next two steps, we're going to make our way to using real data.

[00:00:20]
And the first step we're gonna take is to have data live where it should live. And that means putting some temporary stuff in our routing layer. So that our top level templates get data from the things that are supposed to load data, the routes. And we can kind of set everything up downstream so it works with our hard-coded data there.

[00:00:45]
The step we're gonna take after that is to use fetch to actually grab data using networking. So, let's get started. First, I want us to think about how our app should be organised in terms of the routes. And I have a little animation here that'll help us. So application.hbs is shown on the screen no matter what.

[00:01:14]
No matter which URL we use, the stuff in application.hbs is always there. And so you can think of that as any URL that begins with slash, right?
>> Mike North: So that's a URL indicator up there.
>> Mike North: This outlet thing that we've seen in a couple places, that's where any child routes template might be rendered.

[00:01:43]
So in this case we have two, and they both are sort of swapped out, only one is visible at a time. We've got login.hbs, and then if we click a link to say sign in, we end up going to teams.hbs. Now this concept of outlets keeps working as we go deeper and deeper.

[00:02:04]
So if we wanted to include, we want to say that, look, if you're in the chat UI, this team selector's always visible, but when you pick a team, we might have some specific content for that team. For example, a sidebar.
>> Mike North: So this is where we can see the nesting happening here, right?

[00:02:26]
Teams has an outlet. And then anything that's changing within a team, right, that should be in the team.hbs. So you can imagine if we switch from LinkedIn to Microsoft all of this inner blue area, that would be torn down and you'd see a new sidebar pop up with Microsoft channels, right?

[00:02:46]
Similarly, when we go from channel to channel, we have some channel specific content, right? And that is gonna be a channel.hbs and that's what our URL would look like at the bottom. And here you can imagine when we click on one channel or another channel the yellow area is gonna be torn down and then it'll be replaced with the new channels header and chat messages and footer.

[00:03:13]
So in terms of thinking about how we want things structured there are a couple aspects you've got to consider. One is what do you want your URLs to look like. Another is which pieces of content are changed by various dynamic parts of the URL, like teams/linkedin, right? LinkedIn would be replaced by Microsoft, right?

[00:03:37]
So that's the part of the URL that's sort of a value that we're gonna extract and we're gonna use to find the right content. And this gives us a pretty clear direction as to how we should set our routing structure up, right? If we change a channel, the yellow area is torn down and re-rendered.

[00:03:55]
If we go from one team or another, even the sidebar, right, all that blue area's torn down and re-rendered. And if we go from the chat UI, and we hit Logout and go all the way back to the login page, the entire red area is torn down and it's replaced with this green login.hbs.

[00:04:16]
So this is a good guide, in the specific case of our app, how URLs and nested routes and their templates are all connected. It's about what your URLs look like, which content depending on URL changes is torn down and replaced with something new and they're sort of interrelated.

[00:04:39]
And then there's a third aspect but you have total control over it so it's not really a constraint. And that's how you want your files organized, I would say, treat that as something that falls out as a consequence of decisions you make to get things right, with respect to the nesting of templates, and the shape your URLs take.

[00:05:01]
Everybody cool? This takes a little while to become intuitive, which is why this animation paints a very, very clear picture for how things should look. So teams.hbs has the team selector, team.hbs has the sidebar for a team. And then a channel has all of the chat messages in there.

[00:05:25]
I'm showing you this because we're about to break our app up into more templates and to apply some nested routing so that we get this. And we can start driving data from the routing layer into the route's respective top level templates.