Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Course Q&A: Wireframes" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

After receiving application wireframes from a student, Lukas reviews and discusses how to develop components efficiently to build out the application.

Get Unlimited Access Now

Transcript from the "Course Q&A: Wireframes" Lesson

[00:00:00]
>> Lukas Ruebbelke: I want to just take a moment, for fun. One of our members here sent over some wireframes. And I want to just take a moment and kind of walk through that, and see from the eye of angular developer, kind of how we would approach this. And so I mentioned this yesterday but when you look at weather frames, I think intuitively, we kind of start to see sections.

[00:00:30] And this is a pretty good way for us to start to think about how we would do components. And so if we go to this PDF here. I think there might even be like a weak motor. Let's do this.
>> Lukas Ruebbelke: I'm gonna skip this one for a moment cuz there's not a lot happening here.

[00:00:52] Well, even to this. I kind of look at this and what I'm seeing is really the only functionality right here, is right here. So I'm looking and I'm saying, everything here is pretty static. But this, something's happening here. So already I'd be like, draw a box around it and point out what actually.

[00:01:13] Hold on one second, I'm not real PDF. Where is it here? Somebody knows how to draw.
>> Speaker 2: Go to Tools or Edit, either one.
>> Lukas Ruebbelke: You know what? Hold on. We do this in Preview. I know how to do this in Preview.
>> Lukas Ruebbelke: Come on. Thank god for post reduction.

[00:01:45] All right, here we go.
>> Lukas Ruebbelke: So a little bit larger and then we'll go to tools, I think, and then here. Wait, that's not text. This, all right. So already I'm kind of just looking at this, and there's functionality here. Everything above this is just static. I wouldn't even worry about that.

[00:02:08] You know, just probably put that in or just part of it. But right here, I'm saying if this is the log in screen, this would be a component within it.
>> Lukas Ruebbelke: So if we go here. Similar thing is that, I would treat this as kinda a container component, and then I would just have the small component here.

[00:02:30] So, so far, not a lot happening, but this is where I'm starting to think of. We have the container component such as log in but then you would put this component within it. The reason being is now you can pick it up. And what I may also do, because I'm thinking about reuse, is I might not even keep this title in here.

[00:02:53] I would just say if I'm going to use this in multiple places. This right here is pretty generic. There's nothing specific about the page or the application. Now this gets a little bit more interesting. So now I'm looking at this, and already we see four of the same thing.

[00:03:15] So that's, to me, be to them like, okay, component. So when you start to see repetition, that's a pretty good indication that you are in the neighborhood, or that's a good candidate for a component. So just as we do not duplicate codes, so the drive principle, do not repeat yourself.

[00:03:37] From for a visual excercise we can also look at it and say like, this pattern visually is repeating itself. And so, I would say these have the kind of the same common visual element. So the data model that's driving this, is the same. But what I would also do is I'm looking here, and I'm seeing, and I'm gonna do it over here, so we don't get crowded red lines.

[00:04:12] Is within this, I'm seeing some additional opportunities to break the cell.
>> Lukas Ruebbelke: And so now I would have a standalone video component. Because then we can reuse that anywhere, and what I would also probably do,
>> Lukas Ruebbelke: Is at a minimum,
>> Lukas Ruebbelke: Create another component. That wraps kind of this card footer here.

[00:04:44] So we're like what are the things that we are repeating. Or what things do we want to encapsulate and use over and over. And so I'm presuming up here, this is actually part of the layout.
>> Lukas Ruebbelke: It's having some kind of like a nav bar that maybe you could pick up.

[00:05:01] So looking and seeing what things are kind of self encapsulated.
>> Lukas Ruebbelke: Now the beauty of this is, if you notice we've got this component here, we can now go to this view, it's the same exact thing. So we're not recreating the wheel. We're just kind of reconfiguring it by moving stuff around.

[00:05:18] So if you have this piece done, going and doing this piece is easy. Cuz it's just kind of a subset of all the videos. We're just rearranging the components. So here, if we pass in a video object that has the video piece and kind of the description. Then that's all we know, is we just kind of put it on there, fasten this object, it's gonna render.

[00:05:43] And so let's do this one. Kind of a similar thing. So based on the master detailed view that we've done.
>> Lukas Ruebbelke: Where,
>> Lukas Ruebbelke: I'm seeing kind of two main immediate candidates for components.
>> Lukas Ruebbelke: Actually, I'm seeing three now that you mentioned it. So this right here, so this might be a family user of some sort.

[00:06:18] Then I'm seeing this right here.
>> Lukas Ruebbelke: Because we could use this somewhere else. But in fact, what I'm actually seeing is this.
>> Lukas Ruebbelke: And I'm seeing this right here. Just notice, it's almost the same thing, it's a component. So I had to create this, you know, kind of status thing where it has been name or whatever.

[00:06:49] And so I presume what happens is you click on this and then this shows underneath. So kind of one main component but it's two sub components, that one is toggling the other. You'll definitely, you know this would be wrapped in a larger component. But you would drop it on there and then from here,

[00:07:10]
>> Lukas Ruebbelke: And then obviously there's this side nav thing over here.
>> Lukas Ruebbelke: And I think that's most of them.
>> Lukas Ruebbelke: And so these obviously same thing. I'd break them down. Low and behold, videos again. This is a good one. Same thing, so here, we have this thing that we are repeating.

[00:07:44] What's interesting is I may depending on the use case. This and this could potentially be the same component and you just set a flag to turn this button on or off based on the status. Now, how I would organize this, so we're looking at the component level. If we were going a step higher that these would be presentation, in parlance.

[00:08:17] Yes, I would try to do it all by binding. Like, take this thing, render it. If somebody clicks accept or review later, capture that as an output and send down. Now everyone of these distinct routes, that would be a container component. So the container component renders the page and does the layout.

[00:08:37] But the actual rendering of the data in the binding happens in the presentational component. And so looking here, kind of a container component. So what is, yeah, so I think these are making a little bit more sense but what you're doing is now saying, this is a very distinct piece in the application through a container component.

[00:09:05] And then from there start to lay it out into presentational components. And then if we were taking it a step further, from a data model standpoint, at which point I would introduce NGRX and Redux, and all of this state would then live in the application store. And then, basically hydrate every single container component as you work through the application.

[00:09:28] What I also may do, and I'll show a quick. We'll talk about it briefly today is, depending on the usage of this application, is I would even possibly break these sessions into standalone modules and lazy a little bit. So for instance if somebody is going into this main page.

[00:09:47] So let's say this is, like this is where people wanna be, it's the homepage. Like I would just put that right in the main module. It's the first thing they're gonna see. But, let's see one of these kind of more, kind of side fringe views that maybe they don't go through every time, so it might be one out of 20 times they'll do it.

[00:10:08] Then depending on usage, I will probably break this into a stand alone module, so it will still be an application but I'd wrap it in a module and then I would [INAUDIBLE]. And so only when they go to this, are we actually incurring the overhead of that payload.

[00:10:27] Does that make sense? Yes.
>> Speaker 3: So still the app model will be there. And then say there's a motion model for connect friends and family and home and upload, one model I'd say.
>> Lukas Ruebbelke: And I will say this is, we're really keen on, I think lazy loading people like do it.

[00:10:42] Like lazy load. Like if you're not gonna do it or if you're not gonna use it, then don't head to user download it up front. A word of advice on that is making a server set call on a mobile device. From a performance sample and it's pretty much one of the worst things you can do.

[00:11:06] The reason being is when you need to make a server call you have to essentially turn on the hardware to make the call. It has to reach out to the tower. Do kind of that hand shakey thing, go get it and then unwind itself. So it's not quite as efficient as, for instance, Wi-Fi or whatever.

[00:11:26] And so, it's a very, very inefficient thing. So if you're doing a very mobile heavy app, I would actually try to bundle it into a single bundle, and you're better incurring that payload up front. Been doing a bunch of round trips, because that's way worse. And so if you just kind of go and look at any kind of the performance stuff, especially on mobile devices, you know, XHR calls, and remote asset requests is kind of the worst thing you can do from a performance standpoint.

[00:11:56] Not only is it slow, but it actually drains the resources on your device. Just something to put it out there that it's really easy to get into this thing of like, it works on desktop, lazy loading. It's like, yeah, that's probably okay. But if you're on a mobile device, really weigh the cost of actually making that server call to get that remote access.

[00:12:14]
>> Speaker 3: Okay.
>> Lukas Ruebbelke: Okay?
>> Speaker 2: Mm-hm.