Concurrent Mode in Angular- Non-blocking UIs at scale

on YouTube ↗33m

" summary

Explains how to make Angular rendering non-blocking by moving work off the main task, with concrete techniques and measurements: wrapping bootstrap in setTimeout to split a long task, replacing ngFor/ngIf with rx4 and rxLet to chunk rendering, and using the rx-angular cdk scheduling primitives. Claims show case studies and flame-chart comparisons: many red frame drops disappear, initial heavy tasks shrink by about 50 milliseconds, and interactive navigation becomes smooth.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 0:50Compare Server Side and Client-Side Rendering
3. 1:59What a Blocked Ui Means
4. 5:59How Does Scheduling Work for Browsers
5. 9:17User Interactions
6. 11:36Frame Drop
7. 14:42Reduce Dropped Frames
8. 27:54The Rx Led Directive

" related talks

• 29mPartially Zoneless - Performance tunning without Big Bang RefactoringsMichael Hladky · NG-DE Conference 2022
• 34mHigh-Performance Applications with AngularNir Kaufman · Ng-Poland 2017
• 23mPartially Zoneless Performance tuning without big bang refactoringMichael Hladky · ng-conf 2022
• 35mPerformance at ScaleMichael Hladky · NG-BE 2021
• 33mPerceived faster Angular applicationsCathrin Möller · NG-DE Conference 2022
• 45mReactive Frontends with RxJS and AngularSergi Almar · Voxxed Days Singapore 2018
• 21mPartially Zone-LessMichael Hladky · NG Poland 2022
• 41mSpeeding Up Your Angular App: Techniques for Optimizing Rendering PerformanceRakia Ben Sassi · code.talks 2023