Architecting Angular Apps for High Performance | NgGlühwein Workshop Day
Learn how to optimize Angular apps for high performance by mastering the browser render pipeline, JavaScript event loop, Core Web Vitals, zoneless change detection, CSS/DOM performance, and network request optimization to boost overall efficiency.
Agenda
Control the Browser Render Pipeline
To make your app faster, you need to understand how the browser interprets your code. Learn the different stages of the Browser Render Pipeline. Get to know the tools to inspect & analyze bottlenecks in your application. Write code that always performs optimally.
Master the Javascript Event Loop
If you care about performance in any JavaScript application, mastering the Event Loop is a must. Dive deep into the JavaScript vm and learn techniques to avoid slow performing code on real world applications.
Measure & Optimize (Core) Web Vitals
Your performance has a score. Learn how it’s composed, measured and techniques to improve it. Get an expert in analyzing and improving LCP, CLS, INP, TBT, TTFB & more.
Go Zoneless: Master the new zoneless & signal-based change detection
Understand how Angular is getting faster because of the new change detection and zoneless features. Learn how to benefit from them.
Use CSS and DOM performance best practices
Improve the performance of real world applications by applying the latest CSS features. Learn how to identify and fix forced reflows and how to avoid layout thrashing.
Optimize your apps Network requests
Enterprise apps consume a lot of data. Master the tools that allow you to identify network related performance bottlenecks. Learn techniques and strategic approaches to optimize network related data consumption to ultimately improve the performance of your application.
Description
This workshop is all about leveling up your Angular game. We’re diving into the nuts and bolts of performance, starting with how the browser handles your code. You’ll learn how to tweak the Browser Render Pipeline to keep things running smooth—no more janky UIs, just pure speed. Then, we're cracking open the JavaScript Event Loop so you can avoid those dreaded slowdowns. You’ll get the tools to make sure your app isn’t just fast, but really fast.
And let’s talk about Core Web Vitals for a second. You’ve probably heard about LCP, CLS, all those metrics Google loves? Yeah, we’re gonna show you how to crush those scores with techniques that actually work. Plus, you’ll get hands-on with Angular’s new zoneless, signal-based change detection. Forget zones—this is where the real performance magic happens.
But we’re not stopping there. We’re going deep into CSS and DOM optimization. I’m talking layout thrashing, forced reflows—stuff that can secretly destroy your app's performance. You’ll learn how to spot it and fix it like a pro. And of course, we can’t forget about network optimization. You’ll get strategies for handling those big, data-heavy apps, making sure your API calls don’t slow things down.
By the end of this, you’ll be walking out with a toolkit full of tricks to make your Angular apps faster, leaner, and smoother. Whether it’s browser rendering, JavaScript performance, or network requests, you’ll know exactly how to find bottlenecks and blast right through them. It’s gonna be awesome. Let’s make your apps fly!
Takeaways
Understand how the browser processes code and learn to inspect and optimize performance bottlenecks.
Master the JavaScript Event Loop and learn techniques to avoid slow-performing code.
Learn to measure, analyze, and improve Core Web Vitals like LCP, CLS, INP, TBT, and TTFB.
Leverage Angular’s new zoneless, signal-based change detection for faster applications.
Apply CSS and DOM performance best practices to reduce layout thrashing and forced reflows.
Optimize network requests to reduce data consumption and improve application efficiency.
Gain practical skills for enhancing app performance from the browser pipeline to network optimization.