Questions

Answer the following questions as best as you can to ensure that you've understood the key concepts from this chapter without Googling. Do you need help answering the questions? See Appendix D, Self-Assessment Answers online at https://static.packt-cdn.com/downloads/9781838648800_Appendix_D_Self-Assessment_Answers.pdf or visit https://expertlysimple.io/angular-self-assessment.

1. What three things you should do to succeed as a technical lead or architect?
2. What are the ingredients of a successful project?
3. Why should you use Angular in the enterprise?
4. What are the most important considerations for building Angular apps for the enterprise?
5. What causes performance issues in web applications?
6. How can we solve performance issues in large web applications?
7. What is a LOB app?
8. What is the Pareto principle?
9. What are the main goals of router-first architecture?

Technical requirements

The most up-to-date versions of the sample code for the book are on GitHub at the following linked repository. The repository contains the final and completed state of the code. You can verify your progress at the end of this chapter by looking for the end-of-chapter snapshot of code under the projects folder.

For Chapter 4:

1. Clone the repo: https://github.com/duluca/lemon-mart.
2. Execute npm install on the root folder to install dependencies.
3. The end state of the project is reflected at:

   projects/stage7
   

4. Add the stage name to any ng command to act only on that stage:

   npx ng build stage7
   

Note that the dist/stage7 folder at the root of the repository will contain the compiled result.

Beware that the source code provided in the book and the version on GitHub are likely to be different. The ecosystem around these projects is ever-evolving. Between changes to how the Angular...

Creating LemonMart

LemonMart will be a mid-sized line-of-business application with over 90 code files. We will start our journey by creating a new Angular app, with routing and Angular Material configured.

It is presumed that you have installed all the requisite software mentioned in Appendix A, Setting Up Your Development Environment. If you have not, execute the following commands for your OS to configure your environment.

On Windows PowerShell, execute:

PS> Install-Script -Name setup-windows-dev-env
PS> setup-windows-dev-env.ps1

On macOS Terminal, execute:

$> bash <(wget -O - https://git.io/JvHi1)

For more information, refer to https://github.com/duluca/web-dev-environment-setup.

Creating a router-first app

We will create LemonMart as a standalone project, which means a root module is not required to bootstrap the application, and all components created within the application will be configured as a standalone...

Generating router-enabled modules

Now that we have our high-level components defined as Manager, Inventory, and POS, we can define them as modules. These modules will be different from the ones you’ve created for routing and Angular Material. We can create the user profile as a component on the app module; however, note that the user profile will only ever be used for already-authenticated users, so it makes sense to define a fourth module only meant for authenticated users in general. This way, you will ensure that your app’s first payload remains as minimal as possible. In addition, we will create a home component to contain the landing experience for our app so that we can keep implementation details out of app.component:

1. Generate manager, inventory, pos, and user feature modules by specifying their names and routing capabilities:

   $ npx ng g m manager --routing
   $ npx ng g m inventory --routing
   $ npx ng g m pos --routing
   $ npx ng g m user --routing...

Branding, customization, and Material icons

To construct an attractive and intuitive toolbar, we must introduce some iconography and branding to the app so that the users can easily navigate through the app with the help of familiar icons.

Branding

In terms of branding, you should ensure that your web app has a custom color palette and integrates with desktop and mobile browser features to bring forward your app’s name and iconography.

Color palette

Pick a color palette using the Material Color tool, located at https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. For LemonMart, I picked the following values:

1. Primary Color- #2E7D32:

   $lemon-mart-primary: mat.define-palette(mat.$green-palette, 800);
   

2. Secondary Color- #C6FF00:

   $lemon-mart-accent: mat.define-palette(mat.$lime-palette, A400);
   

   You may either implement your theme in styles.scss or create a separate theme file. A separate...

Feature modules with lazy loading

There are two ways resources are loaded: eagerly or lazily. When the browser loads up index.html for your app, it starts processing it from top to bottom. First, the <head> element is processed, then <body>. For example, the CSS resources we defined in <head> of our app will be downloaded before our app is rendered because our Angular app is defined as <script> in <body> of the HTML file.

When you use the ng build command, Angular leverages the webpack module bundler to combine all the JavaScript, HTML, and CSS into minified and optimized JavaScript bundles.

If you don’t leverage lazy loading in Angular, the entire contents of your app will be eagerly loaded. The user won’t see the first screen of your app until all screens are downloaded and loaded.

Lazy loading allows the Angular build process, working in tandem with webpack, to separate your web application into different JavaScript files...

Creating the walking skeleton

Using the site map we created for LemonMart earlier in the chapter, we need to create the walking skeleton navigation experience for the app. To create this experience, we must create some buttons to link all modules and components together. We will go at this module by module.

Before we start, update the Login button on HomeComponent to navigate to the 'manager' path using the routerLink attribute and rename the button:

src/app/home/home.component.ts
  ...
  <button mat-raised-button color="primary" routerLink="/manager">
    Login as Manager
  </button>
  ...

Now, we can navigate to the ManagerHome component by clicking on the Login button.

The manager module

Since we already enabled lazy loading for ManagerModule, let’s go ahead and complete the rest of the navigational elements for it.

In the current setup, ManagerHomeComponent renders in <router-outlet> defined in AppComponent...

Common testing module

Now that we have a lot of modules to deal with, it becomes tedious to configure the imports and providers for each spec file individually. For this purpose, create a common testing module to contain a generic configuration that you can reuse across the board.

First, start by creating a new .ts file:

1. Create common/common.testing.ts.
2. Populate it with common testing providers, fakes, and modules.

I have provided a commonTestingModules array:

src/app/common/common.testing.ts
import {
  HttpClientTestingModule
} from '@angular/common/http/testing'
import { ReactiveFormsModule } from '@angular/forms'
import {
  NoopAnimationsModule
} from '@angular/platform-browser/animations'
import { RouterTestingModule } from '@angular/router/testing'
import {
  MatIconTestingModule
} from '@angular/material/icon/testing'
export const commonTestingProviders = [
  // Intentionally left blank! Used...

Designing around major data entities

The fourth step in router-first architecture is achieving a stateless, data-driven design. To achieve this, it helps a lot to organize your APIs around major data components. This will roughly match how you consume data in various components in your Angular application. We will start off by defining our major data components by creating a rough data Entity Relationship Diagram (ERD). In Chapter 5, Designing Authentication and Authorization, we will review the design and implementation of an API for the user data entity using Swagger.io and Express.js for REST and Apollo for GraphQL.

Defining entities

Let’s start by looking at what kind of entities you would like to store and how these entities might relate to one another.

Here’s a sample design for LemonMart, created using draw.io:

Figure 4.17: ERD for LemonMart

Currently, whether your entities are stored in a SQL or NoSQL database is inconsequential...

High-level UX design

Mock-ups are important in determining what kind of components and user controls we will need throughout the app. Any user control or component that will be used across components must be defined at the root level, and others must be scoped with their own modules.

Earlier in this chapter, we identified the sub modules and designed landing pages for them to complete the walking skeleton. Now that we have defined the major data components, we can complete mock-ups for the rest of the app. When designing screens at a high level, keep several things in mind:

• Can a user complete common tasks required for their role with as little navigation as possible?
• Can users readily access all information and functionality of the app through visible elements on the screen?
• Can a user search for the data they need easily?
• Once a user finds a record of interest, can they drill down into detailed records or view related records with ease?
• Is...

Summary

In this chapter, you mastered effectively using the Angular CLI to create major Angular components and scaffolding. You created the branding of your app, leveraging custom and built-in Material iconography.

You learned how to debug complicated router configurations with Angular DevTools. Finally, you began building router-first apps, defining user roles early on, designing with lazy loading in mind, and nailing down a walking-skeleton navigation experience early on. We went over designing around major data entities. We also covered the importance of completing and documenting the high-level UX design of our entire app so that we can properly design a great conditional navigation experience.

To recap, to pull off a router-first implementation, you need to do this:

1. Develop a roadmap and scope.
2. Design with lazy loading in mind.
3. Implement a walking-skeleton navigation experience.
4. Achieve a stateless, data-driven design.
5. Enforce a decoupled...

Exercise

So far, we haven’t implemented a lazy loading component. As a challenge, following the documentation at https://angular.io/guide/standalone-components, update app.route.ts so that PageNotFoundComponent is lazy loaded. After you complete your update, verify that the CLI output correctly shows the new chunked file, and also open up the Network tab in DevTools to watch the chunks being downloaded as you navigate the app.

Further reading

• DevTools overview: https://angular.io/guide/devtools
• Material Design: https://m3.material.io
• Getting Started with Standalone Components, Google, August 30, 2023: https://angular.io/guide/standalone-components
• Webpack module bundler: https://webpack.js.org/

Questions

Answer the following questions as best as possible to ensure you’ve understood the key concepts from this chapter without googling anything. Do you know if you got all the answers right? Visit https://angularforenterprise.com/self-assessment for more:

1. What is the difference between the root module and a feature module?
2. What are the benefits of lazy loading?
3. How’s a standalone component different from a module?
4. Why do we create a walking skeleton of our application?
5. What’s the benefit of designing around major data entities?
6. Why should we create wikis for our projects?