Workshops: Aug 29 - 30
IN-PERSON ONLY
Monday, Aug 29
ANGULAR FOR ARCHITECTS DAY 1/2: DATA PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
This workshop builds on your Angular foundations, adding expert tips and techniques to help you scale your apps and become more productive.
Included in this workshop:
Working with Interfaces, Classes, and Types
ANGULAR FOR ARCHITECTS DAY 1/2: DATA PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
This workshop builds on your Angular foundations, adding expert tips and techniques to help you scale your apps and become more productive.
Included in this workshop:
- Working with Interfaces, Classes, and Types
- Component View Models
- HttpClient and RxJS Operators
- RxJS Subjects
- State Patterns
*Note: We recommend taking both Angular for Architects workshops together for the best experience. However, the series is designed so you can choose which day has the most value for you. Consider joining the other days in the series to learn more.
Workshop
ANGULAR FOR ARCHITECTS DAY 1/2: DATA PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
This workshop builds on your Angular foundations, adding expert tips and techniques to help you scale your apps and become more productive.
Included in this workshop:
Working with Interfaces, Classes, and Types
ENTERPRISE MICROFRONTENDS & MODULE FEDERATION
Are you tired of coordinating deployments with multiple teams? Would you like to be able to ship code at any time without disrupting your users? Would you like to be able to share solutions in multiple applications even if they don’t use Angular? Micro Frontends may be the solution you’re looking for. A Micro Frontend architecture breaks your application into separate pieces that work together seamlessly. This allows you to update and deploy individual portions of your application independent of any other feature.
ENTERPRISE MICROFRONTENDS & MODULE FEDERATION
Are you tired of coordinating deployments with multiple teams? Would you like to be able to ship code at any time without disrupting your users? Would you like to be able to share solutions in multiple applications even if they don’t use Angular? Micro Frontends may be the solution you’re looking for.
A Micro Frontend architecture breaks your application into separate pieces that work together seamlessly. This allows you to update and deploy individual portions of your application independent of any other feature. This frees up your teams to completely operate free from unnecessary delays that occur when coordinating large scale deployments. You can also use Micro Frontends as a way to incrementally update legacy applications.
In this workshop you will build and learn how to deploy a Micro Frontend based solution to production. As you build the application, you will learn:
Included in this workshop:
- What is a Micro Frontend anyway
- The Pros and Cons of a Micro Frontend Architecture
- Use cases for Micro Frontends in Enterprise Applications
- The role and responsibilities of the application shell
- Communicating between Micro Frontends and the application shell
- State Management Considerations
- Building Micro Frontends with Angular Elements
- ngx-build-plus, the secret sauce
- Micro Frontend lazy loading strategies
- Design systems and Micro Frontends
- How to test Micro Frontends locally and in a build pipeline
- Deploying Micro Frontends to a CDN
- Module Federation as an approach to Micro Frontends
Workshop
ENTERPRISE MICROFRONTENDS & MODULE FEDERATION
Are you tired of coordinating deployments with multiple teams? Would you like to be able to ship code at any time without disrupting your users? Would you like to be able to share solutions in multiple applications even if they don’t use Angular? Micro Frontends may be the solution you’re looking for. A Micro Frontend architecture breaks your application into separate pieces that work together seamlessly. This allows you to update and deploy individual portions of your application independent of any other feature.
NX WORKSHOP: BUILD A BOARD GAME STORE
Nx is a Smart, Fast and Extensible Build System. Come learn from Nrwl engineers how to get the most value out of your repository using Nx by creating a real-world application and deploying it. In this workshop we’ll be building a store for a fictional board game company called “The Board Game Hoard”. We’re going to be using Nx and some of its plugins to accelerate the development of this app.
To help you understand how to apply some of these lessons in your own projects, we’ll try to build a more “real-world” example.
However, because of the time constrains and to make sure we get to cover as much material as possible, we’ll provide you with all the code for any “non-Nx” work you need to do (like styling and configuring Angular routes) – so you can focus on learning to use Nx to its full potential.
Familiarity with JS/Angular is recommended to get the most out of this workshop.
NX WORKSHOP: BUILD A BOARD GAME STORE
Nx is a Smart, Fast and Extensible Build System. Come learn from Nrwl engineers how to get the most value out of your repository using Nx by creating a real-world application and deploying it.
In this workshop we’ll be building a store for a fictional board game company called “The Board Game Hoard”.
We’re going to be using Nx and some of its plugins to accelerate the development of this app.
To help you understand how to apply some of these lessons in your own projects, we’ll try to build a more “real-world” example. However, because of the time constrains and to make sure we get to cover as much material as possible, we’ll provide you with all the code for any “non-Nx” work you need to do (like styling and configuring Angular routes) – so you can focus on learning to use Nx to its full potential.
Familiarity with JS/Angular is recommended to get the most out of this workshop.
Things you’ll learn:
- Generating a pristine Nx workspace
- Generating frontend Angular apps and backend APIs inside your workspace, with pre-configured proxies
- Creating shared libs for re-using code
- Generating new routed components with all the lazily loaded routes pre-configured by Nx and ready to go
- How to organize code in a monorepo
- Easily move libs around your folder structure
- Creating Storybook stories and e2e Cypress tests for your components
- How to set boundaries between the different scopes in your project
- Write automated source code generators for common tasks in your workspace
- Set-up CI for your Pull Requests
- Add distributed caching
- Set up the NxCloud GitHub integration
- Write advanced deployment targets using the run-commands executor
- Set up Continuous Deployment systems that deploy only the affected projects
Workshop
NX WORKSHOP: BUILD A BOARD GAME STORE
Nx is a Smart, Fast and Extensible Build System. Come learn from Nrwl engineers how to get the most value out of your repository using Nx by creating a real-world application and deploying it. In this workshop we’ll be building a store for a fictional board game company called “The Board Game Hoard”. We’re going to be using Nx and some of its plugins to accelerate the development of this app.
To help you understand how to apply some of these lessons in your own projects, we’ll try to build a more “real-world” example.
However, because of the time constrains and to make sure we get to cover as much material as possible, we’ll provide you with all the code for any “non-Nx” work you need to do (like styling and configuring Angular routes) – so you can focus on learning to use Nx to its full potential.
Familiarity with JS/Angular is recommended to get the most out of this workshop.
END-TO-END TESTING WEB APPLICATIONS USING CYPRESS
Full end-to-end automated tests are the best way to gain the confidence that the entire system will work when the real user visits the site. This workshop introduces you to the Cypress.io Test Runner and teaches writing realistic tests that are readable, reliable, and fast. Only a minimal knowledge of JavaScript is required, although previous experience with web programming and browser DevTools is very helpful. The workshop is very hands-on, you will get the best value out of it by coding the test exercises along with the instruction.
This workshop covers the topics relevant to both beginners and experienced Cypress users.
END-TO-END TESTING WEB APPLICATIONS USING CYPRESS
Full end-to-end automated tests are the best way to gain the confidence that the entire system will work when the real user visits the site. This workshop introduces you to the Cypress.io Test Runner and teaches writing realistic tests that are readable, reliable, and fast.
Only a minimal knowledge of JavaScript is required, although previous experience with web programming and browser DevTools is very helpful.
The workshop is very hands-on, you will get the best value out of it by coding the test exercises along with the instruction.
This workshop covers the topics relevant to both beginners and experienced Cypress users.
Things you’ll learn:
- Installing Cypress and writing the first test
- Cypress documentation, examples, and recipes
- Selecting the DOM elements and interacting with the page
- Controlling the application state
- Removing test flake
- Spying and stubbing the network communication from tests
- Running Cypress tests on Continuous Integration system
- Factoring out pieces of tests into custom commands
Install information:
- Any computer (Mac, Windows, or Linux)
- Node v12+,
- Git to clone the repo
Workshop
END-TO-END TESTING WEB APPLICATIONS USING CYPRESS
Full end-to-end automated tests are the best way to gain the confidence that the entire system will work when the real user visits the site. This workshop introduces you to the Cypress.io Test Runner and teaches writing realistic tests that are readable, reliable, and fast. Only a minimal knowledge of JavaScript is required, although previous experience with web programming and browser DevTools is very helpful. The workshop is very hands-on, you will get the best value out of it by coding the test exercises along with the instruction.
This workshop covers the topics relevant to both beginners and experienced Cypress users.
Tuesday, Aug 30
ANGULAR FOR ARCHITECTS DAY 2/2: COMPONENT AND ROUTING PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
These component patterns help you tackle component design, http patterns, and routing pathways to solve everyday architecture challenges.
Included in this workshop:
ANGULAR FOR ARCHITECTS DAY 2/2: COMPONENT AND ROUTING PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
These component patterns help you tackle component design, http patterns, and routing pathways to solve everyday architecture challenges.
Included in this workshop:
- Preload strategies
- Module architecture
- Guard Patterns
- Component Design and Communication Patterns
- Http Interceptor patterns
*Note: We recommend taking both Angular for Architects workshops together for the best experience. However, the series is designed so you can choose which day has the most value for you. Consider joining the other days in the series to learn more.
Workshop
ANGULAR FOR ARCHITECTS DAY 2/2: COMPONENT AND ROUTING PATTERNS
How do you follow the best practices and set yourself up to successfully maintain your application? Are you meeting your business’s data requirements? How do you debug bugs in your apps, manage shared state, and communicate between components?
Once you graduate from Angular fundamentals, it’s time to shift your focus to architectural concepts, best practices, and how to solve challenging tasks. That’s the purpose of the Angular for Architects workshop series. Each day of this workshop series can be taken separately, while each focuses on patterns essential to your app’s success.
These component patterns help you tackle component design, http patterns, and routing pathways to solve everyday architecture challenges.
Included in this workshop:
Workshop
August 30, 2022
9:30 am
Grand Ballroom A, D
ADVANCED RXJS
Angular only has a few dependencies, and RxJS is one of them. Angular relies on the Observable primitive for asynchronous fetching and events. This requires Angular developers to learn and understand the Observable primitive. While an Angular developer can stop there, you can choose to build reactive Angular application using RxJS, which include more than just the Observable. In this workshop, we’ll dive into Subject and its variants, multicasted Observables, and the operators for multicasting, error handling, creating custom operators and testing custom operators.
Workshop
August 30, 2022
9:30 am
Grand Ballroom A, D
ADVANCED RXJS
Angular only has a few dependencies, and RxJS is one of them. Angular relies on the Observable primitive for asynchronous fetching and events. This requires Angular developers to learn and understand the Observable primitive. While an Angular developer can stop there, you can choose to build reactive Angular application using RxJS, which include more than just the Observable. In this workshop, we’ll dive into Subject and its variants, multicasted Observables, and the operators for multicasting, error handling, creating custom operators and testing custom operators. If you have used Subject, or potentially BehaviorSubject, this workshop is still for you – we’ll learn about the other popular extensions to Subject, such as the WebSocketSubject that provides incredible opportunities for building reactive Angular applications.
Along the journey, we’ll be learning and using some operators that you may have never heard of or used before, such as:
- refCount()
- publish()
- retry() & retryWhen()
- bufferCount()
- sequenceEqual()
- window() & windowTime()
… and many more!
This workshop is hands-on — and we mean it — with 20 hands-on exercises and solutions. The workshop will accelerate your knowledge of RxJS more than any other workshop or online course available. Plus, there is no setup. Grab your coffee (or other non-caffeinated beverage), your laptop, and get ready to finally learn RxJS. Heck, bring your whole team! This is the workshop of ng-conf 2021 that you will not want to miss.”
Workshop
ADVANCED RXJS
Angular only has a few dependencies, and RxJS is one of them. Angular relies on the Observable primitive for asynchronous fetching and events. This requires Angular developers to learn and understand the Observable primitive. While an Angular developer can stop there, you can choose to build reactive Angular application using RxJS, which include more than just the Observable. In this workshop, we’ll dive into Subject and its variants, multicasted Observables, and the operators for multicasting, error handling, creating custom operators and testing custom operators.
BUILDING ANGULAR CI/CD SERVERLESS PIPELINES WITH AWS
Setting up a CI/CD pipeline for an Angular application not only speeds up development for engineers but speeds up the deployment process as well. Continuous Integration means apps are built and tested regularly within the deployment pipeline and regularly merged to a shared repository. This means safer, less buggy deployments and fewer merge conflicts between teams. Continuous Delivery and Continuous Deployment bring faster and easier deployments to various environments with testing steps built into the process. That means well tested code changes can reach your end users faster.
BUILDING ANGULAR CI/CD SERVERLESS PIPELINES WITH AWS
Setting up a CI/CD pipeline for an Angular application not only speeds up development for engineers but speeds up the deployment process as well. Continuous Integration means apps are built and tested regularly within the deployment pipeline and regularly merged to a shared repository. This means safer, less buggy deployments and fewer merge conflicts between teams. Continuous Delivery and Continuous Deployment bring faster and easier deployments to various environments with testing steps built into the process. That means well tested code changes can reach your end users faster. By integrating with a code repository like git, we have easy visibility into which commit is currently deployed and reverting to previous commits can be as easy as pushing a button.
In this workshop we will go through setting up a Serverless CI/CD pipeline for an Angular application with GitHub integration using AWS. We will start simple by getting our app deployed using AWS Code Pipeline and work up to a fully integrated pipeline with PR testing and manual deployment approvals. In the second half of the workshop we will use AWS Amplify to deploy our app and set up Cognito Authentication. By the end of this workshop, you should have a good understanding of the underlying services being used to deploy an application to AWS and be able to build on that knowledge to further explore the options for Angular with AWS.
If you would like to code along and deploy an application to your own AWS account you will need to set up a free AWS account at least 24 hours before the workshop begins and have a personal GitHub account. There will be some underlying cost to the services being used for this workshop, but those charges should not exceed more than a couple of US Dollars.
This workshop will introduce the following AWS Services:
- AWS Code Pipeline
- AWS Code Build
- AWS Cloud Watch
- AWS IAM
- AWS SNS
- AWS S3
- AWS Amplify
- AWS Cloud Formation
- AWS Cognito
This workshop will also cover the following concepts:
- Continuous Integration
- Continuous Delivery
- Continuous Deployment
- GitHub Workflows and Actions
Workshop
BUILDING ANGULAR CI/CD SERVERLESS PIPELINES WITH AWS
Setting up a CI/CD pipeline for an Angular application not only speeds up development for engineers but speeds up the deployment process as well. Continuous Integration means apps are built and tested regularly within the deployment pipeline and regularly merged to a shared repository. This means safer, less buggy deployments and fewer merge conflicts between teams. Continuous Delivery and Continuous Deployment bring faster and easier deployments to various environments with testing steps built into the process. That means well tested code changes can reach your end users faster.
PERFORMANCE AT SCALE HIGH-SPEED ANGULAR APPLICATIONS ON ANY DEVICE
The web has never been more exciting! But it has also never been as demanding to our devices and infrastructure as it is today. Our browsers ship new features and languages get updates only to squeeze out the last bit of performance we can get. The problem here, there are no real resources out there that show us how to apply those optimization techniques in practice. This is especially true when it comes to framework-specific questions.
This workshop will go way beyond the basics to boost your knowledge and skills.
PERFORMANCE AT SCALE HIGH-SPEED ANGULAR APPLICATIONS ON ANY DEVICE
The web has never been more exciting! But it has also never been as demanding to our devices and infrastructure as it is today.
Our browsers ship new features and languages get updates only to squeeze out the last bit of performance we can get.
The problem here, there are no real resources out there that show us how to apply those optimization techniques in practice. This is especially true when it comes to framework-specific questions.
This workshop will go way beyond the basics to boost your knowledge and skills.
If you really want to learn about improving the performance of your Angular application, you need to be aware of and comfortable with way more than the async pipe, ChangeDetectionStrategy.OnPush & trackBy.
Building applications, especially larger ones, with Angular on the frontend, you risk running into performance bottlenecks. Therefore, to still be able to deliver a fast user experience, you must know what techniques to use to identify and remove the problems that are causing poor performance.
In this workshop, we will take a deep dive into how Angular performance optimization works and push its change detection mechanisms to the limit. Furthermore, we will have in-depth sessions on generally optimizing JavaScript code and native rendering performance.
You will go home with lots of exercises to guide you and a wealth of insights to work with, impressed by how much faster your application can get.
We will cover:
- Best practices for application performance auditing
- Angular DevTools vs. Chrome DevTools
- Eliminating performance and scripting bottlenecks
- Network analysis for performance optimization
- Change detection fundamentals and advanced features
- Analyzing memory usage and handling memory leaks
- Understanding runtime performance
- Strategies for better architecture and code quality
Live Q &A included.
Workshop
PERFORMANCE AT SCALE HIGH-SPEED ANGULAR APPLICATIONS ON ANY DEVICE
The web has never been more exciting! But it has also never been as demanding to our devices and infrastructure as it is today. Our browsers ship new features and languages get updates only to squeeze out the last bit of performance we can get. The problem here, there are no real resources out there that show us how to apply those optimization techniques in practice. This is especially true when it comes to framework-specific questions.
This workshop will go way beyond the basics to boost your knowledge and skills.
TAILWIND & ANGULAR — THE UI SAGA CONTINUES
Join us in this Tailwind Extravaganza! You will have the chance to upgrade the Tour of Heroes UI and compete for prizes while learning UI/UX skills, Tailwind concepts, and component library integration strategies throughout the workshop. We’ll begin by ensuring everyone is up-to-speed and ready to conquer UI with some CSS and Angular basics, then go from there! Check out the agenda below for concepts we will cover. Each segment will have challenges and hands-on coding assignments for you to try your hand at.
TAILWIND & ANGULAR — THE UI SAGA CONTINUES
Join us in this Tailwind Extravaganza! You will have the chance to upgrade the Tour of Heroes UI and compete for prizes while learning UI/UX skills, Tailwind concepts, and component library integration strategies throughout the workshop. We’ll begin by ensuring everyone is up-to-speed and ready to conquer UI with some CSS and Angular basics, then go from there! Check out the agenda below for concepts we will cover. Each segment will have challenges and hands-on coding assignments for you to try your hand at.
Beginner UI & CSS Skills
- Quick Intro to the Tour of Heroes & Angular Architecture
- Angular Basics (Styles, Templates, View Encapsulation, & More)
(Feel free to skip this segment if you are familiar with Angular & CSS Basics.)
Tailwind Intro
- Utility First vs Others
- When Tailwind isn’t the Solution
- Getting Started with Tailwind in your Angular Apps & Tailwind Basics
Responsive Design with Tailwind
- Layout, Flexbox, Grid, & Spacing
An Animated Tailwind
- States (:hover) & Pseudo Selectors (:empty)
- Transforms, Transitions, & Animations
Customizability with Tailwind
- Adding Custom Styles
- Reusing Styles
Tailwind Advanced Tidbits
- Functions & Directives
- Tailwind Plugins (Forms)
Component Libraries & Tailwind
- Integrating Kendo UI with Tailwind
- How Tailwind Layers with Your Custom Branding and Style Systems
Wrap Up
- Ensuring You’re Production Ready!
- Resources & Prize Winners 🎉
Workshop
TAILWIND & ANGULAR — THE UI SAGA CONTINUES
Join us in this Tailwind Extravaganza! You will have the chance to upgrade the Tour of Heroes UI and compete for prizes while learning UI/UX skills, Tailwind concepts, and component library integration strategies throughout the workshop. We’ll begin by ensuring everyone is up-to-speed and ready to conquer UI with some CSS and Angular basics, then go from there! Check out the agenda below for concepts we will cover. Each segment will have challenges and hands-on coding assignments for you to try your hand at.