Lukas Ruebbelke
Venmo
Production-Grade Angular
6 hours, 57 minutes CC
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 9 minutes
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
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.
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.
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
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.
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.
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.
Lukas demonstrates how to add 3rd party library into an Nx workspace, and starts coding the data model for the dashboard application started previously.
Lukas demonstrates how to generate a routing module, and the components in the dashboard application using the Angular CLI.
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
Lukas starts working on a new application that generates widgets, gives an overview of the application boilerplate by exploring the routing code, the api-interfaces code, and the logic within the widgets component.
Lukas demonstrates how to build a JSON API within the dashboard application, which allows him to fetch data, and removes the hard coded data within the various components in the application.
Lukas demonstrates how to build a service that creates, updates, deletes, and finds widgets within the dashboard application started previously.
Lukas explains that when building an application at scale, it is important for engineers to think about the patterns that are often used to build at scale, and demonstrates how to build a new service and write its data model.
Lukas answers questions about error handling including what the best places are to catch and surface errors.
Complex Workspaces
Section Duration: 44 minutes
Lukas demonstrates how to add multiple applications to the same monorepo, and how to add configure the JSON package to be able to run multiple applications from the same repository. The application added in this segment is the client application.
Lukas demonstrates how to continue adding applications to the same monorepo, and how to update the package JSON file to be able to run multiple applications on different ports within the same repository.
Lukas extracts a component into a library, and demonstrates how to make use of the library to enable sharing the component between multiple applications.
Lukas answers questions about publishing a functionality into multiple applications, creating an application using the Ionic framework within Nx Monorepos, best practices about where to put an application's business logic, and when to regroup libraries to minimize the overhead needed to manage multiple libraries.
Mock APIs
Section Duration: 37 minutes
Lukas introduces Nest, a progressive Node.js framework that is heavily inspired by Angular, which allows developers and teams to create testable and scalable applications. How to install and use Nest to build mock APIs is also discussed in this segment.
Lukas demonstrates how to build a mock service that creates widgets within an application, how to configure a mock API to add data to the widgets, and how to configure the service so it can add mock widgets.
Lukas continues to develop the mock widget service started in the previous segment by refactoring the component and the controller to allow the creation, update, and deletion of widgets.
Lukas demonstrates how to add Swagger, a dedicated module that Nest offers that facilitates the building of RESTful APIs.
Lukas answers questions about the Nx console plugin in VS code, using Nest for a microservices architecture, and using the Prisma or the Hasura cloud to makes the use of GraphQL easier.
Reactive Angular & State Management
Section Duration: 25 minutes
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.
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.
Lukas answers questions about how to handle errors with APIs, and how to combine facades with ngrx.
Facades
Section Duration: 23 minutes
Lukas demonstrates how to generate a facade from the command line. Subjects made private are used in this segment within the widgets facade.
Lukas continues to develop the facade started in the previous segment, and adds a specific type of service with a subject called a store, and adds that a service with a subject is useful in the case of a simple state transition.
ngrx
Section Duration: 34 minutes
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.
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.
Lukas explains that most of the business logic in a given application exists within effects. Effects are asynchronous models that offer observable streams.
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
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.
Lukas demonstrates how to override a provider by walking students through an example of a test involving the widget facade.
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.
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.
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.
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
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.
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.
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.
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.
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
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