Angular Architecture and Best Practices

Course Overview
(Music) Welcome to the Angular Architecture and Best Practices course. My name's Dan Wahlin, and I'm a software developer, architect, and trainer specializing in web technologies. Over the years, I've had the opportunity to work with many companies around the world on front end and back-end architecture, and I'm really excited to share some of the information I've learned with you. Application architecture is a big topic, and one that can be very subjective, so the overall goal of this course is to provide you with solid, proven guides that can be used as you plan and build your applications. The course starts out by discussing key architecture considerations to take into account when doing initial planning of your application. Over the years, I've created a simple architecture planning template that I use with companies, and I'll show you how you can get started using it. From there, you'll learn how to structure features and modules in a self-contained manner that allows team members to develop and deploy features independently. Sharing functionality across an application or across multiple applications is also key as you plan any architecture, and you'll learn about the role that custom Angular libraries can play there. As the course progresses, you'll learn about the container presentation pattern and how it can be used to structure components, component communication techniques, and the importance of RxJS subjects, and learn about the need for state management and the different options that exist. Finally, additional considerations such as pipes versus functions and different RxJS operators that can be used with HTTP calls will also be covered. So, let's get started and jump right in.

Introduction
Over the years I've had the opportunity to work with many developers and many companies around the world on Angular applications. This has consisted of on-site training, as well as on-site architecture engagements where we talk about what their app is and how they can get from point A to Z and be successful in the end and also have a successful maintenance approach as the application changes over time. So, I'm really excited to share some of the information that I've gleaned over the years, I've learned this not only from my research, but in also working with many developers like you and getting feedback on what works for them and what doesn't. So thanks for making the time to listen to what I have to say and I hope you get a lot out of this course. So we're going to start things off in this module by talking about the prereqs to maximize your learning. From there we're going to go into the key concepts and learning goals that I have for you so that by the time you get to the end of this course, you'll know right up front what to expect and really where you should be at from a knowledge perspective by the time you get to the end of the course. From there I'll introduce where you can get the sample application that I'll be using and the code and introduce the basic software requirements that you're going to need if you want to run it. And then we'll wrap up with an overview of the modules that we're going to cover throughout the remainder of the course and talk about those topics briefly. So let's go ahead and get started by talking about the prereqs that you need to have to get the most out of this course.

Structuring Components
A big part of our job as Angular developers is creating components. We do that a lot, that's obviously one of the core aspects that's part of Angular. So in this module, we're going to specifically focus on different techniques you can follow for structuring components. Now, I hope that if you've done a lot with Angular up to this point that some of these concepts you have either used or have heard about, and if you haven't done Angular, I hope to fill in some of the gaps there for you. But as we go along, if you have seen something, feel free to skip on ahead, and we'll kind of go from there. So let's jump on in to the agenda. So we're going to start off by talking about a pattern called container presentation, and this is a way to structure your components in cases where you have a lot of functionality and you need to keep it clean and maintainable. Now from there, we're going to talk about passing state between components, and this is one of those areas you've hopefully worked with, but if not, we'll quickly review it, and that is input and output properties, and I'm going to show how that works, but I'm also going to talk about some scenarios where this might be a little bit challenging. From there, we're going to keep going along this train of thought and talk about change detection strategies that child or presentation components can have. We'll look at reference versus value types as you're passing data and wanting to intercept when changes occur in a child component using ngOnChanges, there's some challenges that can come up there we'll cover. That's going to relate to cloning of our data, and so we're going to talk about some cloning techniques that you could use. Then finally, we're going to wrap up with a lesser used feature, but something that on occasion could be appropriate, and we'll address the pros and cons of it with component inheritance. So let's get started by talking about container and presentation components.

State Management
Earlier in the course, we walked through how we could use services in RxJS to manage state and pass it around in an application. And that provides a simple way when components need to talk to other components. However, as an application grows, you'll often find that you need to take a more serious look at how you're managing state in the application and the techniques and code that you're using. And so in this module, we're going to look at that exact topic and talk about a few options that are out there that can help with state management. So here's what we're going to cover. First off, we're going to address the need for state management. This may or may not be obvious to you. If you've only worked on a simple app then it probably isn't very obvious, whereas if you've worked on a more complex app, it's probably become very obvious. From there, we're going to explore some different state management options that are available. First, we'll just start off by discussing how services can be used. From there, we'll take a look at a more robust option called NgRx. We'll also look at an extension for NgRx called ngrx-data. And finally, we'll wrap up with something called Observable Store. Now there are several other options out there. I'm going to address those as we move along, but it's not possible to look at all of them in one module, so we're going to focus just on these four. From there, we're going to review these different options, talk about code complexity versus simplicity, which will give you something to think about as you're deciding on the state management technique for your application.