Project Architecture

[00:00 - 01:07] Hello everyone, welcome to the second lesson of the build a modern angular application with signal course. In this lesson, we will go over the architecture of the projects we are going to build in this course. We will also go over how we configure our angular application which adopts a modular and tree-shakable approach by making use of standalone components as well as lazy-loaded routes. We will also make use of the deferrable views which was newly introduced in angular 17 as well as the newly built-in control flows. But before we get started by looking into each of these features, I'll like us to quickly go over the backend architecture for this course. You should have it in mind that we will not write any code on the backend but I would like to show how the architecture of the backend which contains our rest APIs is built so you can start it up when you have access to the projects in this lesson. So quickly let's head over to visual studio code.

[01:08 - 03:27] Inside of visual studio code, we can now see the complete configuration of our backend projects. As you can see, our backend is created using Node.js, Express and MongoDB with no need to have an as-part knowledge of these three technologies. You get started with the backend, all you need to do is just to download the projects which will be made available in this lesson and then head to the root of the projects around npm install. Once you run npm install, you need to head straight to the MongoDB Atlas website, create any of your projects and then locate where you can grab the MongoDB URL and then paste it inside of your .env file. Then for you to be able to push the static data we have, straight to MongoDB, you need to create a seeder file which is already in the project and then run Node seeder.js inside the terminal that will push all the data we have written here, straight to the database which means we'll be able to assess it in the frontend using a rest API. I think that's all is required for you to get started with the architecture of the backend. Now let's quickly head back the front end and look into the details of the project architecture of our Angular application. In the front end of our Angular application, the architecture of our projects has four distinct features. First one is the standalone components, then we have the functional and lazy-loaded routes, the deferrable views as well as the newly built-in control flows. Looking at the standalone component, the standalone components were first introduced as an experimental feature in Angular 14 and were fully integrated in Angular 15. In the previous version of Angular, Bundle size has always been highlighted as one of the major drawbacks of adopting the use of Angular to develop a web application in comparison to other front end development frameworks. With the integration of standalone components, we are able to reduce the Bundle size of our web application by removing unnecessary imports and enhancing the modularization of our web application. The adoption of standalone components does not mean the default ng module-based approach as being discarded. The two approaches currently co-exist.

[03:28 - 04:10] To determine if a component is standalone, inside of the @component decorator in our .ts file, we are going to see a key with standalone set as true. Next up, looking at routing, routing is a major feature of a single page web application. As a user, who is navigating a web page, you want to easily switch to different parts of an application without having to deal with delays and long load time. And as a developer, making use of standalone components, it makes it easy to configure lazy loaded routes in Angular applications, which doesn't depend on ng modules, which could lead to a robust codebase.

[04:11 - 07:47] As you can see on the page, this is a sample of lazy loaded routes, which makes use of a functional syntax, which is much more cleaner and easy to understand. Another feature included in our project architecture is the introduction of the deferrable views, also known as the "@defer" blocks. This was introduced in the latest version of Angular, which is Angular 17. With this feature, we are able to reduce the initial boundary size of an Angular application. This results in a faster application that improves the speed of the initial load and core web vital results. In the case of our shopping cart, we are able to show a beautiful spinner to the users, while the data is being fetched from the backend server by using the "@loading" defer block. Using the newly introduced deferrable views, we get to lazy-load the list of items available in our store, with a single line of declarative codes. Let's take a look at this in the browser. As you can see, we are now on the landing page of our projects. Let's take the position of a new user coming to this page. At first contact, the user types in the website, which gets to reload, and as you can see, we are presented with a beautiful spinner, while the data is being fetched from the backend. This is an example of a deferrable view. The impressive thing about this is that all the intricacies of this feature is taken care of by Angular, which leads to a great developer experience, as well as a great user experience. In order for dependencies with a defer block to be deferred, they need to meet two conditions. First, they must be standalone. Non-stand-alone dependencies cannot be deferred, and we will be eagerly loaded, even inside of @defer blocks. And secondly, they must not directly referenced from the same file, outside of the defer blocks. This includes @view-child queries. So, if you are using the old versions of Angular, with these latest updates, you should consider upgrading your application so you can have access to these very powerful features. Finally, we have also utilized the newly built-in control flows introduced in Angular 17 since the conditionality render contents on the templates. We now have the @if block and @else block for conditionally rendering the contents of the template. While we have the for block for rendering items from an array, as can see on the page, this is the old way of rendering a conditional content on the page. On the next slide, you can see out to render the same contents, making use of the @if and @else block. With this New syntax, you can see we have to, we get to write less code, which is much more relatable to JavaScript developers, and is much more elegant. And for the for block syntax, which you can see on the slide, the track property is introduced. With the help of the track property, we get to track changes as the occur in the list that is being rendered on the page, especially in cases of state-full elements or animations. Before we wrap up, this lesson, I would like us to take a brief look at some of these syntax in our Visual Studio code.

[07:48 - 08:58] As can see, in our package.json file, the version of our Angular application is version 17, which is the latest version of Angular. And taking a look at our routes, we make use of the functional lazy-loaded routes, which is newly available in Angular. On the product components, you can see we're making use of the latest @for block to render items on the page. We also made use of the the @defer block to defer the page, and show a spinner before the data is being fetched into the front end. We'll look into these in more details as the course progresses. Another thing we need to look at is the @if and @else block. You can see we conditionally render, the PayPal button, as well as the login button, based on the login status of the user . And also, you can see that we made use of the standalone flag set as true. That is every component in this project is standalone. We can now wrap up this lesson. In the next lesson, we'll look into how to get started with signals.