Production-Grade Angular

6 hours, 57 minutes CC
Production-Grade Angular

Course Description

Learn the techniques and patterns that high-performance Angular teams use every single day to build production-grade Angular apps! In this course, you’ll learn how to structure your files and make your projects more scalable leveraging the Angular CLI and Nx. You’ll create shared modules and apply unit tests and end-to-end testing to your application. Finally, learn performance analysis techniques and how to bundle and ship your application using Docker.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: January 19, 2021

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 9 minutes
  • Introduction
    Lukas Ruebbelke shares a link to the course repository, gives an overview of what the course will cover, and explains that the format of the course is going to be more collaborative, as if the instructor and students were working together to push code to production.

Managing Complexity

Section Duration: 30 minutes
  • Tips on Managing Complexity
    Lukas shares rules of thumb to manage complexity with the goal of increasing engineer effectiveness, and states that managing complexity is the hardest aspect of developing software. Complexity consists of managing of state, flow control, and code volume.
  • Managing Complexity in Angular
    Lukas explains how to manage complexity in an application using the Angular framework by capturing the user events and delegating them upwards, and adds that components should be as thin as possible, staying oblivious to business logic and server communication. Facades services, server communication, and state management are also discussed in this segment.
  • Complexity Resources and Q&A
    Lukas answers questions about the facade pattern, when to use Angular libraries, the Angular style guide, and how to apply the techniques mentioned previously to reduce complexity.

CLI & Nx Workspaces

Section Duration: 57 minutes
  • Data Modeling
    Lukas explains why a lack of consensus on data modeling can cause harm to a given application, and encourages the decoupling of the backend and frontend teams through reaching an agreement on a data model that allows the frontend team to mock out API data.
  • Nx Workspaces & Angular CLI
    Lukas explains that Nx is a set of extensible dev tools for monorepos, adds that Nx augments the Angular CLI with additional functionality, and demonstrates how to generate an Angular Nest application. The application started in this segment is a dashboard and is developed throughout this course.
  • Nx & Monorepo Setup
    Lukas explains that Nx is a layer that separates an application from the libraries it is using, and is wrapping the Angular CLI. This allows engineers to have more than one project or application in a single place. Cases where monorepos should be avoided are also discussed in this segment.
  • Adding Angular Material
    Lukas demonstrates how to add 3rd party library into an Nx workspace, and starts coding the data model for the dashboard application started previously.
  • Generating Key App Modules
    Lukas demonstrates how to generate a routing module, and the components in the dashboard application using the Angular CLI.
  • Angular Config & App Overview
    Lukas reviews the different components of the dashboard application, and explains that the API interfaces folder contains the data models that are accessible by both the backend and the frontend of the application. The dashboard application is structured that way so that the frontend team does not depend on the backend team to access data.

Boilerplate App & Components

Section Duration: 35 minutes

Complex Workspaces

Section Duration: 44 minutes

Mock APIs

Section Duration: 37 minutes

Reactive Angular & State Management

Section Duration: 25 minutes
  • The Facade Pattern
    Lukas defines a facade as pure delegation layers that should not handle business logic, facades provide a clean separation between components and the rest of the application, and explains one way that work could be divided up between senior and junior engineers when using a facade pattern.
  • Reactive Angular, the Facade Pattern, & the Subject Pattern
    Lukas describes how to build a complex component service. The component service injects data into widgets. A facade is used to decouple the given component from the implementation details, and exposes the state from the facade directly into the component. The service with a subject pattern is used to expose a given state. The facade updates the state, and exposes the state. A Reactive component issues commands that modify widgets.
  • Reactive Angular Q&A
    Lukas answers questions about how to handle errors with APIs, and how to combine facades with ngrx.

Facades

Section Duration: 23 minutes

ngrx

Section Duration: 34 minutes
  • ngrx Overview
    Lukas gives an overview of the ngrx state management lifecycle, with a selector that modifies an event through an action, with a reducer and a selector. Events flowing from a template to a component class to a service into a store is also discussed in this segment.
  • Actions, Store, Reducers & Selectors
    Lukas defines actions as objects that have a type and a payload and that an action is nothing more than a data structure with a type. A facade dispatches an action and allow to select data from the store. A reducer listens for an action based on the action type, it performs some operation, and returns a new state.
  • Effects
    Lukas explains that most of the business logic in a given application exists within effects. Effects are asynchronous models that offer observable streams.
  • Effects Q&A
    Lukas answers making lazy loaded modules available to the rest of a given application, in which specific cases action is not used, and in which cases ngrx adds complexity.

Testing

Section Duration: 1 hour, 3 minutes
  • Testing
    Lukas walks students through a testing example, and explains how a test is written. A test starts with a test module, then a test fixture or environment is added to the component it is living in. How to trigger change detection through the debug element is also discussed in this segment.
  • Widget Facade Testing
    Lukas demonstrates how to override a provider by walking students through an example of a test involving the widget facade.
  • Code Coverage
    Lukas demonstrates how to set up code coverage in an angular application, how to use a code reporting functionality, and how to use code coverage with a test. Code coverage indicates to which degree the source code of a given program is executed when a particular test runs.
  • The Case for Cypress
    Lukas shifts to end to end testing, and asserts that end to end testing is the most undervalued activity that organizations do. The division between the development team and the QA team leads to undervalue testing. Cypress and its usefulness in modern web applications is also mentioned in this segment. Cypress is a testing tool that is offered with Nx.
  • Cypress Overview
    Lukas gives an overview of how a Cypress test is structured. There are three main components: specs, page objects, and HTML templates. Specs divide what is expected to happen into individual tests, the page objects are responsible for managing and sequencing the interaction of elements on the page, and the HTML templates that allow Cypress to query the application. How to install and run an e2e test using Cypress is also covered in this segment.
  • Cypress e2e Tests Walkthrough
    Lukas walks students through the main files within the end to end e2e dashboard application testing folder, explains the various testing commands that are written in the commands.ts file. The testing commands are high level services that can be shared across the various spec files.

Build & Deploy

Section Duration: 43 minutes
  • Bundle Analyzer
    Lukas explains that a bundle analyzer determines if a given application is built correctly, analyzes how to improve the application, and decreases any form of latency. The bundle analyzer explored in this segment contains both build stats and analyze, and is added to the package.json file. Build stats gives information about a given build. Analyze generates a build within the dist folder and provides stats about that specific build. An output.html file is generated. The file allows engineers to visualize through graphs the relationships between various parts of a given application.
  • Angular Production Build
    Lukas demonstrates the commands to run a production build in Angular, runs an analysis on the size of the application by checking the application disk, and demonstrates that the production build significantly reduces the size of a given application.
  • Deploying Angular with Vercel
    Lukas introduces Vercel, a platform that allows frontend engineers to deploy and preview a given application before shipping it to production, and walks students through the Vercel platform. This segment also discusses how a platform like Vercel can be useful for a QA team to conduct its tests.
  • Docker with Angular
    Lukas walks students through the ReadMe from the Docker branch, shares the commands to start docker, and explains that it is typically common to have an API image, a frontend application image, and a database image open on Docker at the same time. How to use an image of a particular technology without having expertise in that given technology using Docker images is also discussed in this segment.
  • Docker with Angular Q&A
    Lukas answers questions about when to use nginx, and how to store API keys when building an application and pushing the application to production.

Wrapping Up

Section Duration: 11 minutes
  • Wrapping Up
    Lukas thanks the audience, shares additional resources to learn about production Angular, answers questions about why effects are called pessimistic update function call, mentions briefly alternative options to nginx, namely akita and Redux, and reiterates that the service with a subject pattern functions well when used with a state management library.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now