Top Rated Architecting Angular Apps for High Performance
An in-depth workshop that equips participants with the tools and knowledge to perform app performance auditing and apply strategies for performance optimization.
Advanced
3 daysAgenda
The browser render pipeline
Understand how the browser processes the code you write
Runtime performance of scripting, rendering, and painting
Minimize the work the browser needs to do
(Core) Web Vitals
What is the performance score?
LCP, INP and CLS as well as all other important metrics
How to measure and improve web vitals?
Understand the RAIL-model
Get to know the underlying model behind modern performance metrics
Tooling
How to read, record and analyze flame charts
Performance Tab
Performance Insights Tab
Performance Monitor
Network Tab
Chrome & MS Edge DevTools
Lighthouse
Userflow
Memlab
Angular's DevTools & change detection profiling
The JavaScript event loop
Understand how the JavaScript vm executes code
Learn the difference between macrotasks & microtasks
Gain in-depth knowledge about scheduling techniques
Control the event loop by prioritizing work
Master the single thread - main thread scheduling
Leveraging browser native features for better performance
Project Aurora
Resource hints
Priority hints
ResizeObserver & IntersectionObserver
CSS and DOM performance best practices
Forced reflow, layout thrashing
CSS containment & content visibility
Next generation CSS features
ResizeObserver & IntersectionObserver
Analyzing memory usage and detect memory leaks
Understand how JavaScript applications consume memory
How to inspect the memory heap
How to identify memory leaks
Strategic approaches how to fix memory leaks
Ship less and more efficient
Network analysis and improvement strategies
Bundle size analysis & shipping as less code as possible
Resource hints
Priority hints
JavaScript & TypeScript language best practices
Choose the right data structure
Looping performance
Auditing, monitoring & measurement
How to conduct a performance audit?
What and how to measure?
Performance code review checklist
Change detection in-depth
zone.js & NgZone
Local change detection strategy
Go step-by-step zone-less without a big bang refactoring
Signals: master Angular's new reactive primitive
Fast Angular components
Learn best practices to build high performance angular components
How to leverage Angulars API most efficiently
NgOptimizedImage
Improve LCP with native angular tools
How to save bandwidth for mobile users with optimized image handling
Server Side Rendering (SSR)
Hydration
Edge computing
Description
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.
Performance is a crucial part to deliver an application which users love to use! Learning about the Core Web Vitals and the RAIL model will equip us with guidelines on how to evaluate an application’s performance. These metrics are crucial to develop outstanding user experience related to performance aspects.
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.
Takeaways
Best practices for application performance auditing
Web Vitals – what they are and how to measure them
You will understand the RAIL-model
Angular DevTools and Chrome DevTools
Eliminating performance and scripting bottlenecks
Network analysis for performance optimization
Deep understanding of zone.js and how Angular's change detection works
In-depth change detection optimization techniques
Improving performance with leveraging Angular Signals
Analyzing memory usage and handling memory leaks
Understanding & drastically improving runtime performance
Strategies for better architecture and code quality
Julian Jandl
Software Engineer, Trainer
Michael Hladky
CEO & Founder
Enea Jahollari
Software Engineer, Trainer
