Table of Contents
Introduction
Managing Complexity
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
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
App Boilerplate & Components Overview
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.Adding JSON Server
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.Creating a Service
Lukas demonstrates how to build a service that creates, updates, deletes, and finds widgets within the dashboard application started previously.Layering in More Services
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.Error Handling Q&A
Lukas answers questions about error handling including what the best places are to catch and surface errors.
Complex Workspaces
Multiple Apps with Nx Workspaces
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.Configuring Apps in a Monorepo
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.Sharing Components Through a Lib
Lukas extracts a component into a library, and demonstrates how to make use of the library to enable sharing the component between multiple applications.Complex Workspaces Q&A
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
Mocking APIs with Nest
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.Configuring Nest to Mock a Service
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.Creating a CRUD Service
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.Adding Swagger
Lukas demonstrates how to add Swagger, a dedicated module that Nest offers that facilitates the building of RESTful APIs.Mock APIs Q&A
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
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
Creating a Facade
Lukas demonstrates how to generate a facade from the command line. Subjects made private are used in this segment within the widgets facade.Facade with an Observable Subject
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
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
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
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.