Introduction

[00:00:00]
>> Welcome to production angular. My name is Lucas Ruebbelke. And this is I feel like my 10th or 12th workshop here. Front End masters is by far, one of the highlights of my year, when I get to come together and spend a day or two with new developers.

[00:00:20]
I've made friends all over the world. And I think I start every workshop like this. But I think it's important to kind of set some context that not only do I have the opportunity to share what I'm passionate about, but I also really quite like a lot of the courses on front end masters.

[00:00:39]
And so I would say probably will sentences is probably my all time hero. And he's just phenomenal. And so I'm constantly inspired by the the quality of the developers that I've met a lot of friends. We got a lot of friends here in the chart room participating. And so I take your time very seriously.

[00:00:57]
And thank you for the opportunity to production Angular. And so with that said, let's get started. And we're going to go over just a bit of housekeeping what to expect. And then we're going to start building some code. The question is, what is the goal? What is the format?

[00:01:16]
At the end of the day? What do I hope that everybody walks away with. And so In terms of kind of an introductory course. A lot of times we kind of have to go through a lot of the groundwork and lay a lot of kind of the pieces that will go over this.

[00:01:33]
And then we have to go to this and then we have to go to this. And this is because it's a little bit more of an advanced course. This is gonna be more like we're hanging out. And I'm going to show you the patterns and techniques that I use every day.

[00:01:47]
To develop angular applications for production. And so, this is not only how are we, how do you write angular, but how do you write angular that can scale. And you're going to see some things that I use to not only write angular, but write angular very, very fast.

[00:02:05]
And so. The caveat here is that there's going to be certain things that I'm just going to skip over in terms of, like I might copy and paste before. Or I'm not gonna handwrite a lot of the rudimentary angular pieces. Because what I wanna focus on more so is kind of whole list between the application and we're reporting in kind of those.

[00:02:27]
The techniques that you use as you're moving your angular application from kind of conception into production. And so we have a repo here and, one hungry mind, fem-production-angular. And I'll pull that up in just a moment, but. Essentially, what we're going to build is a classic master detailed view.

[00:02:52]
This is one of my most favorite interfaces. I believe that it is the most fundamental user interface pattern that exists across all line of business applications. Pretty much every application is a variation of this because. You have a collection of items. And then the master detail view gives you the opportunity to manipulate those that collection by creating an item, updating an item or deleting an item.

[00:03:19]
And so, in my opinion, the master detail view is the fundamental building block for not only learning how to program in a framework. But also communicating ideas. And so along with the master detail view, we're also going to build out a REST API in nest. And so this is going to be kind of a quick fun module as we show that.

[00:03:42]
How to build an angular application in parallel with an REST application which is very much like angular so this is gonna be quite a lot of fun. And so here is the agenda give or take. So it could change. But ado might absolute best to stick to this and so.

[00:04:03]
The first thing we're going to do is we're going to talk about complexity. I find that a lot of times developers, they get stuck and they get in a rut and they want to either blame a framework. Or very confusing library or something of that nature. And really the problem is that they're not addressing complexity.

[00:04:27]
And they're not addressing it with first principles. So we're going to just have a talk about complexity. And then from there, we're going to talk about how to make an Angular application work. So make it work, make it right, make it fast. And so we're gonna spend a considerable amount of time talking about the Angular CLI, and more importantly, Nx Workspaces.

[00:04:48]
And what this means, what it means for how you structure your files in your applications, managing multiple applications. We're going to learn how to do a quick mock API. And this is very relevant in the world. And then we're going to talk about reactive angular. And from there we'll talk about writing testable code.

[00:05:07]
We'll talk about Indian testing with Cyprus. And then we'll kind of round things out with some techniques you can use for performance analysis, building angler for production in the build options that we have. And then deploying to production. What does that look like? So there's a few options there that we are going to explore.

[00:05:25]
And so from there, depending on how much time we have, we'll just do a wrap up Q&A. And anybody that has any questions can jump in and ask them. Now, with that said. If you have a question, and it's pertinent to what I'm talking about, so if I just say something that is super confusing, or you want me to clarify it right then and there because if I move on, it may not make sense.

[00:05:48]
Feel free to post that question in the chat and Mark can catch it and surface it for me. Now it's just a high level question that can kind of wait to the end of that module, then put it in there and pretty much at every kind of module we'll do a little bit of Q and A before we move on.

[00:06:11]
With that said, I would ask that we keep our question kind of constraint to the topic matter. And so if someone says, well I'm running the supper odd You're crazy configuration. And how do I solve this? That's very much. I think implementation dependent or environment dependent. And that would be I think a conversation may be better served offline.

[00:06:33]
And so with that said, let's just take a quick look at the repository and kind of how this works. And how you can kind of navigate this. So in the application, we have a Angular application. And then we also have a nest application. And obviously, there are instructions on how to run this classic standard README.

[00:07:00]
And then what we have is in the drop down. I've started to break out some of the steps that we're going to go to into the various branches. And so we'll continue to add on to this, as we go through the workshop. And, in fact, what I'll do is I'll start on a fresh workshop branch.

[00:07:20]
And if we get stuck, then we can just pull Kind of the working pieces out of the branch, and use that as a reference. So if for some reason, you have to go to lunch or you have to do something and you need to come back. What you can do is just check out the branch, kind of prior to the lesson that we're on or the module that we're on.

[00:07:41]
And you can be caught right back up. And so this is just a way for somebody does get lost or they needed to catch up or they want to focus on one specific thing. Then they can jump to the branch here. And so we saw the picture, but this is what the application looks like.

[00:07:57]
Pretty standard Master detail View. And then we have an API here. Where we can say, " I need to get widgets," and so to swagger it, which I think is really cool, it's a way to kind of inspect your API. And I will a very specific reason why this is important, why it's important for front end developers to able to mock their API when you are working on kind of a production application.

[00:08:27]
Cuz I've seen a lot of problems happen from having a front end team dependent or having a hard dependency on a back in teams that could not keep up or there was a disconnect. And so I believe it's really important for front end developers to be able to, at a minimum, mock out their API.

[00:08:49]
And so this is the narrative arc. This is going to be what we're going to cover today. And I really look forward to learning all together, how to build an angular application and kind of all the things that go into making it production ready.