Top Rated Top Rated

NgGlühwein Workshop day: Architecting Angular Apps for High Performance

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.

JavaScript
CSS
Google Chrome icon - Logo
Level.Intermediate
Duration.1 day
Date.13.12.2024 9:00 - 16:45
Price.€ 400.00

In-Person Only

The workshop will take place at the LEAN-CODERS office.
Hainburger Str. 33, 1030 Wien


18 seats only for WS (don’t miss out)

There are 18 spots available on the workshop. Book soon!


Reserved seat at NgGlühwein (110 seats total)

This year NgGlühwein will be limited so everyone has a seat.
All workshop attendees will have a guaranteed seat at the meetup.


Open Q&A Panel with all the trainers after the workshop

Bring your questions and discuss them with our trainers in a Q&A panel.

Agenda

  • Google Chrome icon - Logo

    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.

  • JavaScript

    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.

  • DevTools Logo

    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.

  • Angular Logo - Performance

    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.

  • CSS

    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.

  • DevTools Logo

    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.