Speaker

Julian Jandl

Julian Jandl

webperf enthusiast - Lead Performance Engineer, Trainer & Consultant at Push-Based.io

Vienna, Austria

Actions

Hi, I'm Julian, based in the beautiful city of Vienna, Austria. I'm an accomplished frontend engineer, trainer, and consultant specializing in Angular and web performance optimization.

My expertise extends to conducting performance audits for client applications, identifying and fixing performance bottlenecks. I also impart my knowledge through workshops, where I share my insights & teaches on both web performance and the intricacies of Angular.

I'm continually exploring cutting-edge technologies to enhance the speed of the web on a large scale.

I actively contribute to the community. I share my knowledge through public workshops, talks at conferences and meetups, and actively contribute to the open-source landscape. I am also one of the core contributors to the RxAngular project, solidifying my commitment to the evolution of the Angular ecosystem.

Area of Expertise

  • Information & Communications Technology

Topics

  • Angular
  • JavaScript & TypeScript
  • webperf

Sealing the Gaps: A Deep Dive into JavaScript Memory Leak Detection

Memory leaks or high memory consumption are the number one reason for crashing browser sessions. However, analyzing the memory consumption of JavaScript applications and identifying memory leaks are one of the most difficult tasks to perform, even as a dedicated performance engineer. It requires a deep understanding of the language, specific tooling and sometimes even of the underlying application and its various states as well.

With this talk I want to invite you to a deep dive into the memory analysis of javaScript applications. I will point out the theoretical concepts of javaScripts memory consumption, the garbage collection process, the memory heap and memory leak identification.

Based on comprehensive demo applications I will walk you through a methodical approach on how to identify and fix memory leaks while showcasing the latest available developer tools.

Virtual Scrolling Unveiled: High Performance Lists in Angular

In this talk, I’ll take you on a journey through the fascinating landscape of virtual scrolling in Angular, a powerful technique that can greatly improve the performance and user experience of your web applications. We will shed light on the general concept of virtual scrolling, compare different approaches and implementations in the Angular universe.

As we focus on performance benefits and use cases where this technique truly shines, we'll also dive into important topics such as anchor scrolling, DOM recycling, and tombstone rendering. We will explore their roles in creating highly optimized and efficient virtual scrolling solutions and compare different approaches. Moreover, we'll discuss the challenges faced when implementing virtual scrolling in Angular and share valuable insights on overcoming these hurdles.

To top it all off, I will provide a live demo showcasing a particular implementation, giving you a clear understanding of how to apply these concepts in your own projects. This talk is designed to spark your curiosity and expand your JavaScript & Angular knowledge, making it the perfect opportunity for developers looking to enhance their skill set and create cutting-edge web applications.

Cut My Task Into Pieces - This is Concurrent Mode

JavaScript is single threaded. Every script our application executes runs on the main thread. Keeping the execution time as short as possible is crucial for the runtime performance and responsiveness of our applications. Too long running scripts will result in bad (Core) Web Vitals like INP and TBT. Reducing the computation time of function executions of course is the desired solution, but often not possible or the most costly option.

In this talk, we’ll uncover another solution to this problem, the Concurrent Mode. Having profound knowledge about how to orchestrate work on the main thread is key to understanding how the Concurrent Mode works. We’ll start with a deep dive into the JavaScript Event Loop and explore the characteristics of different scheduling techniques.

Building up on the scheduling techniques, I will explain how to implement a custom scheduler. It enables to prioritize and execute work with the notion of frames, allowing the browser to render the application at a configurable frames per second rate.

Finally, we’ll wrap things up with a live demonstration on how to apply the Concurrent Mode to angular applications. We’ll progressively improve the (Core) Web Vitals INP and TBT on this journey.

The Live Demo also covers how this technique integrates nicely with the upcoming zoneless features introduced with Angular 17+

Nx for Scalable Angular Architectures

This Workshop equips participants with the knowledge and skills to utilize Nx as a powerful tool for a scalable architecture and efficient development workflows.

Key concepts covered include the Nx CLI, workspace presets and types, task caching, generators, and executors. You will learn how to streamline development processes and maximize productivity.

During the Workshop we will explore Nx libraries, generators, and executors for creating reusable and modular code. The workshop emphasizes leveraging task caching to speed up development iterations.

By the end, attendees gain a strong understanding of how to use Nx to build efficient, scalable, and maintainable projects.

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:
1. Best practices for application performance auditing
2. Angular DevTools vs. Chrome DevTools
3. Eliminating performance and scripting bottlenecks
4. Network analysis for performance optimization
5. Change detection fundamentals and advanced features
6. Analyzing memory usage and handling memory leaks
7. Understanding runtime performance
8. Strategies for better architecture and code quality

Live Q &A included.

ng-conf 2024 Sessionize Event

March 2024 Salt Lake City, Utah, United States

Julian Jandl

webperf enthusiast - Lead Performance Engineer, Trainer & Consultant at Push-Based.io

Vienna, Austria

Actions

Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.

Jump to top