Cut my task into pieces - Concurrent Mode in Angular

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+ The presented techniques are not limited to the angular universe, but is applicable for most JavaScript applications.