Building Awesomer Apps with Angular Review of Demo Application

Transcript from the "Review of Demo Application" Lesson

[00:00:00]
>> Lukas Ruebbelke: I believe most everyone here has downloaded this. But if you haven't, please go to this URL. Download the repo and clone it and install it. If you run into an error with Cyprus, you can just remove that from your package.json and it should still work. And they talk about that later.

[00:00:22] It's an amazing and interesting framework. I think actually, Kent Dodds talked about it in a previous front-end masters course. I'm all in, it's amazing. But that is, you may run into a problem with there, don't be alarmed. You can either just ignore it or just remove that from the package.json, and life will be good.

[00:00:48]
>> Lukas Ruebbelke: And so what are we working with? So this is, and I'm going to actually just show you in the browser. We'll just do a demo here.
>> Lukas Ruebbelke: So this is the homepage. But what we're actually building is a master detail view. And so what this is, is we have a master list of items in this case.

[00:01:24] And then we have a detailed view. And so what this is, is you have a list of items and then you can select one and you can see the detail of it. So this is a master detail view. And I am of the opinion that this is the fundamental interface for pretty much any non-trivial application.

[00:01:45] Is that you simply have a collection of something, and then you need to modify that collection. So first you need to read it, delete items from the collection, update, or create items within that collection. So with the master detail view, who can answer this? When you start a new framework, what is kinda the quintessential example that people run to?

[00:02:12]
>> Speaker 2: To-do lists?
>> Lukas Ruebbelke: Exactly, and what is a to-do list? Well, it's basically a master detail view. You have a list of things to do and then you can either mark it off, you can add to it, whatever. So, I would even say when you look at like Gmail.

[00:02:26] A master list of your emails, you select one, you can see the details for that e-mail and then you can modify that collection. Even if you will, Facebook, same thing is you have a master list of things into your feed, you can select it, you can do things.

[00:02:38] So when I am working with a new developer. That if I can get them to the place where they understand how to construct a master detail view and communicate in persistent to a server. I feel like that first milestone has been laid to where they can just about build anything.

[00:02:59] If they really truly understand, I have this data model that I need to build a form out, I need to lay it out and we're just saving it back to a REST API. like if you understand the basic pattern, then really the variation comes out to, what's the UI, what's the user experience, is it a a list with the form on the.

[00:03:19] Or you click and you get like a model or this is variations in the user experience, but it's a whole. The patterns are the same, and then from there it's just really business logic. Are there business rules that would prevent me from editing this? Or if I save this, does something else need to happen?

[00:03:36] But, I would say if you are starting to venture into front-end applications, I would focus on building a master detail view, understanding how that works. And you'll just find that like, these patterns, I just use them over and over and over. Same actors, different plays, if you will.

[00:04:01]
>> Lukas Ruebbelke: So master detail view, there are some additional things that we'll get into, in the next couple of days. Is we start to talk about some different concepts, but as a whole, that's it, master-detail view. So it's a RESTful master-detail application using Angular, the CLI and as well, Angular material.

[00:04:22] And what we're going to do is we're going to be building out the widgets feature. And so when we hop into our branch. So I will show you this as well since we're here.
>> Lukas Ruebbelke: There are some additional branches here and I think I can, yes. So you have your master branch which has the completed application.

[00:04:49] We're going to start at 00 start, I think descriptively enough. And that's going to be missing the widgets feature as well as a lot of the other things. So we've broke this down to just the basic, the bare minimum. And we will be building out the widgets feature.

[00:05:09] Now the items feature is still there and you can use that as a reference point. So for me I learn a lot by seeing a preexisting working example. I think really, really good frameworks and technologies that I like. Ionic and Firebase being a few of them. They pretty much enable document driven development of, how do I do this?

[00:05:38] Well here's a working example, copy, paste it in, modify, to suit your needs. So to that end is we're going to be building the widgets feature in parallel to the items feature. So if you get stuck, you can kind of look at what's happening in the items feature and use that as a reference point.

[00:05:57] As well, explore. Don't be afraid. And so if for some reason, you just don't wanna call it widgets or you want it to look a little different or play around with it, go ahead, that's how we learn, is by being practitioners and getting into trenches. So, here's the first challenge.

[00:06:17] Just to make sure that everybody can run the application. So, let's just take five minutes. And if you have the application running here, on site. I would love to just see, raise your hand and so just take a couple of minutes and just make sure everybody is good.

[00:06:35] Okay, awesome.