Ember Components

[00:00:00]
>> Mike North: The next thing we're gonna do is go to application HPS. And start slicing this HTML up into components. We want this to be a little bit more manageable and a little bit more semantic in that we want to look at application HPS and see higher level things, then label and input and button and so on.

[00:00:25]
We don't want 211 lines of HTML and I'll point out, this isn't quite diff soup. This isn't like, this is pretty semantic, actually had an accessibility expert review this to make sure that this is the kind of thing we should be writing for an app like this. So I've left us some comments to give us clues around what would be a good thing to break out into a component.

[00:00:51]
So let's start at the top and kind of work our way down.
>> Mike North: And I'm gonna get rid of this for now, because we don't need it, unfortunately, that killed our server. Just switch it. So at the top, we've got something called team selector. And this is the entire nav up at the top.

[00:01:13]
This will become the team selector component. So what I want us to do is to go into app, templates, create a new folder called components and then create a file within that folder called team-selector.hps.
>> Mike North: What we're gonna do is go back to application HPS, grab this nav here remember, I've collapsed this thing and we're gonna cut it and move it over and paste, and I'm gonna save both files.

[00:01:50]
And we see that sidebar that used to be there on the left side of our app, that has now disappeared. The HTML is no longer there. What we can kind of bring it back by referring to this component.
>> Mike North: We have TeamSelector, and if you have the VS code extensions installed that come with this workspace, you'll see that autocomplete that I just saw.

[00:02:14]
And now we have it back. So this is one of the things that Ember Octane gives us, templates that are expressed in terms of outer HTML. The older Ember components didn't quite behave this way, they needed sort of a wrapping element, and we would have had to jump through a few more hoops.

[00:02:30]
But now, we can just move things into HPS files to break all of this up. So let's do this with a team sidebar. We're gonna grab that HTML, save. The sidebar with the list of channels has disappeared. And in our app templates components folder, we're gonna create team-sidebar.hps, paste, and then go back to application.hps.

[00:03:00]
And replace it with this new component that we've just built.
>> Mike North: Teamsidebar and the channel should come back.
>> Mike North: I'm gonna do the same thing with the header, grab the HTML, save the file. The header has disappeared. Right, that was this top bit over here with this general, the title and description of the channel.

[00:03:28]
So we're gonna grab that and we're gonna call this file channel header.
>> [SOUND]
>> Mike North: Replace it with it's component [SOUND] and it comes back. Messages are a little bit different now. So we've got two unique messages in our sample HTML. We're gonna have to pick one and kinda throw the other away.

[00:03:59]
Once we start evolving this a little bit more, we'll get many different chat messages popping up again. But for now, I'm just gonna pick the first one.
>> Mike North: And I'm gonna create a component called message.hps. This is proof that there are no restrictions on reasonable names for components.

[00:04:24]
We don't need a dash in a components name, for example.
>> Mike North: Message [SOUND]. And finally, our last component is the footer.
>> Mike North: Channel-footer.hps, paste.
>> Mike North: And [SOUND] there we go and this is the footer down here. It's the little area where we type into new chat message. Congratulations, we have just componetized our HTML.

[00:05:04]
And you can see that, just refinements, add a couple of messages. But you can see that this is much more semantic HTML. We can look at this and see, there's a selector to pick a theme. There's a side bar, there are three messages and there's a channel header and the footer.

[00:05:20]
This was not evident from looking at the raw HTML that we were given. Maybe if you add, like lots of comments, lots of metadata there, you know developers.
>> Speaker 2: [COUGH].
>> Mike North: Leaving you hints about what was going on. Yes, you could have seen that. But in this case, just from the markup itself, everything looks looks pretty reasonable.

[00:05:41]
I'm gonna make another commit, and we have just completed step two.
>> Speaker 3: What does HPS mean?
>> Mike North: The question is what does HPS mean? And that indicates that these are handlebars files. This is the template language that amber uses. So this kind of looks like regular HTML for now.

[00:06:04]
But we'll start to introduce things that are obviously not treated as HTML. And that's where we see that handlebars is a superset of a text file, right? In this case, a Superset Of HTML.