This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Angular Files & Style Guide" Lesson
[00:00:00]
>> And so, in an Angular CLI project, you have kind of two main folders here, you have your source, and then you have your end to end. And so what they do is they kind of separate that out. Because typically when you run your end to end test, that's kind of a separate application that is responsible for hitting your main application.
[00:00:21] So that's separated out, but more so in the source directory, we have apps and, Within this we have our main application stuff. Now the question is, let me just double check this real quick, 20, There we go. All right, I just wanna make sure that hopefully everybody can see this, VS Code is a little funny about that.
[00:00:49] And what you have here is, I want to call out these four files real quick. Is when you generate a component, you're going to get an HTML file, which is your template. You're going to get a TS file, which is, it's essentially a class. And then you have a style sheet.
[00:01:07] And then you have a spec. And so to me, this is really, really cool. Testing is one of these things where it's not necessarily exciting. But it's really, really, really important. And I find that one of the biggest barriers to entry to testing is that it's just too hard to get up and running.
[00:01:36] And so Angular has done a really good job of generating working test for you right out of the gates. Now as you start to develop, you need to update these. But the fact that it's going ahead and generating the spec file for you, when you create it, or when you create this component, is just a major convenience.
[00:01:58] And so I think the big thing here that I really want to call out is that using the CLI and generating your application and leveraging the CLI, a couple of things are happening. One, it's eliminating a lot of the busy work that you're not having to assemble these pieces and really choose and decide.
[00:02:23] So that's really important, is velocity and ergonomics. But is well is it's making testing a first class citizen, not only unit testing, but end to end testing. And although the CLI generates with Protractor, which, I don't want to marginalize those contributions, it's based on Selenium. And I think there's just some better options out there, specifically Cypress.
[00:02:51] And so, if you generate a workspace using NX, then you get Cypress. And so, but nonetheless, unit testing is a first class citizen. End to end testing is a first class citizen. It's set up for you, it runs. And that's really, really nice. And if you've ever been in a situation where you have to kind of generate all this stuff yourself or handwrite it, not having to do that is really, really fantastic.
[00:03:24] And so it's well, these four files are very, very, very consistent. And the other thing that the CLI gives you, is uniformity across your projects. And so you know that if you're on an Angular CLI project, that when you generate something, you know exactly what you're gonna get.
[00:03:46] And it's based off of the Angular style guide. And so there's a lot of really, really smart people, I would say, collectively, smarter than any one of us individually, that have put a lot of thought into how do we write Angular applications. And so if you just Google Angular style guide, there's a really good document document here.
[00:04:13] And they've really put out some, it's pretty well thought out, but like, do this instead this. And so this is a really good starting point for your team when you start to think about best practices. And so even in the pre kind of workshop, it's like, well, what are the best practices?
[00:04:32] Well, it's documented, it's very clear, it's in a very public forum. And so when I go to an organization, and I say, I really want you to, you really need to do this thing. Well, when I get pushback from it like, well, that's your opinion. It's like, well, respectfully not.
[00:04:52] It is my opinion, but respectfully, it's not just my opinion. But this is what the community has adopted is best practices. And so that's also really important. Nothing's worse than you get on an application and you have some super clever person in a vacuum that's just engineered this thing that nobody understands but this person.
[00:05:14] I think really consistency is super, super important. I think I saw a hand up in the Zoom. Because I think really at the end of the day, it's better to be consistent than it is to be philosophically right. And so, people spend so much energy in commas, not commas, brackets, whatever.
[00:05:35] Is if you spent that much energy being consistent with your team and coordinating and communicating, it would just work out and you'd still be able to build awesome stuff. So, again, just kind of laying some pieces here, that as you start to develop Angular applications that you can reference these.
[00:05:52] Not only to be effective as a developer, but as a developer on a large team. And so the style guide is a really nice thing to reference. Like, why are we doing this? Well, they explain that, more importantly, when another developers is like, why do we use small functions?
[00:06:08] I want to use a large function, it's like, well, style 1.02 says do this and that's what John Papa says. So, what would John Papa do? And so this is, the CLI is based off of that. So with that said, let me show you one other thing. I see a hand.
[00:06:30]
>> How do you handle the topic of state management? Cuz the docs pretty much avoid NgRx or anything like that.
>> So the question is how do we handle state management? And that is a question I'm going to defer until later today. And I have a lot of opinions about state management.
[00:06:56] I would spend the rest of the day talking about it. But, The reason why Angular itself, the core doesn't talk about state management, is because those libraries are separated out. And I really, really like NgRx, I think it's a really stable well thought out library. But Mike Ryan, Brandon Roberts, I think they're really just classy individuals.
[00:07:26] And I think at one time they were thinking about pulling NgRx into Angular core. And the decision was like, no, we don't wanna force this kind of state management. It's that we want to have people to have options. And so what I will talk about later is state management outside of a state management framework.
[00:07:45] Because you can have NgRx or Akita or whatever, you can even be doing Redux, but you can be mishandling state all the way upstream. So I'd look forward to to handling that topic. I think a lot of times when we talk about state management you have to address a lot of kind of more fundamental concepts that are actually making it a lot harder.
[00:08:06] So even with test, one of the reasons why tests are so hard to write is because the code that you're testing is so bad. And there's just not enough time in the world to write good tests for bad code. And so it's one of these kind of trailing indicator things.
[00:08:20] So we'll definitely dig into some state management more later. So that was