Advanced Angular Development
This is a three-day instructor-led course.
This course is designed to round-off an Angular developer's education by providing advanced techniques for managing state, writing complex selector functions, understanding the rxjs library and common operators. We will also learn advanced form validation including asynchronous validation with server side approval, as well as lazy-loading Angular modules. Building feature module libraries using NGRX Component State will also be presented.
Prerequisites
This course is designed for established Angular developers who regularly deliver Angular application code in a team environment. A thorough understanding of both Angular and Redux State Management using @NGRX is required. Please consider taking the Angular State Managment with NGRX Course prior to taking this course. It is also helpful, but not necessary to have taken the Angular Developer Testing course prior to this course.
It is also helpful if developers have some familiarity with creating server-side HTTP based APIs for this course.
Objectives
The objective of this course is for developers to be able to undertand and implement the following:
Design Usable Forms with Custom Validation
Forms in Angular, or any web application framework, are where we spend a lot of time as developers. We will learn techniques to design good form User Experience including Accessible forms with focus trapping, announce service, and
ARIAattributes. We will also learn to create custom synchronouse and asynchronous validation functions.
Server-Side Integration Patterns
We will learn patterns to increase reliability and decrease complexity in Effects with patterns for integrating with back-end HTTP services. Developers will learn how to create custom Http interceptors in Angular to monitor and modify Http requests and responses (including Authorization headers), as well as the "Back-End for Front-End (BFF)" pattern to keep the back-end in sync with the front-end. Developers will aso learn how to honor HTTP Cache headers for resources kept in the NGRX Store.
Using Web Sockets For Stateful Clients
This course will include a quick introduction to using stateful Web Sockets for both notifications from the server, and transparent syncing of data with the Back-End.
Lazy-Loading Angular Modules and Other Performance Enhancing Techniques
As Angular applications grow, features are added for more specialized users. By Lazy Loading certain features only when the user needs them, we can increase our first "paint" time of the application. We will also learn how to use the browser developer tools to detect and mitigate other performance issues in our application, including load time, and component re-paint. Service workers will be introduced for doing background-processing of long-running client-side tasks.
Advanced CSS and Styling Techniques for Angular Developers
Developers will have a deep-dive into Angular hierarchical styling, including component styles and how to control how styling changes impact child components. We will also look at technologies like SASS for pre-compiling your CSS for the browser, making style information more flexibile and "themeable".
Expected Outcome of this Training
At the conclusion of the Advanced Angular course, developers will be able to:
- Design usable forms with helpful user experience (UX)
- Design and evaulate Accessible Angular Forms, including semantic HTML and Angular facilities and services for Accessibility.
- Build custom validators, pipes, and utilities in their Angular applications.
- Implement a variety of patterns for simplifying API communications, including eventual consistency.
- Detect and fix common performance issues in Angular applications
- Use modular CSS to promote reuse and prevent style-based regressions in new components.