Angular Performance: Your App at the Speed of Light - Christian Liebel | NG-DE 2019

In this talk, you’ll get to know common performance pitfalls in Angular applications and learn how to avoid them. We’ll have a look at different change detection strategies and ChangeDetectorRef, Zone.js and NgZone. Let’s make your Angular app blazing fast!
0:00 If you application works good without optimization - do not optimize it
1:11 Simple change detection (CD) explanation
8:35 Embedded CD debug tool
10:34 simple explanation of what is zone.js and ngZone and how it is related to CD
16:00 When is it worth implementing optimization
22:58 CD strategies ( OnPush )
27:00 Async pipe (how it is related to observable rx.js and CD and OnPush)
Christian Liebel: ng-de.org/speakers/christian-...
Slidedeck: speakerdeck.com/christianlieb...
Follow us on twitter / ngdeconf
Official Website: ng-de.org/
Video Production: medienkompetent.com

[@vatsalkgor]

These are the kind things that a beginner should be taught instead of so called beginner friendly courses that only focuses on "How" but don't focus on "Why".

[@WillVanPelt]

This was the first video on Angular performance that I followed from beginning to end without getting totally lost. Thank you!

[@alvinyanson]

Im a simple man. I see Angular Performance i click and subscribed.

[@none0n]

Best talk ever... never have I been able to listen to a talk from start to finish understanding every single word. This is a first for me. Thanks, KZbin for the recommendation.

[@gbkEmilgbk]

Very nice explained - thank you - here is small table of content: 0:00 If you application wokrs good without optimalization - do not optimalize it 1:11 Simple change detection (CD) explanation 8:35 Embedded CD debug tool 10:34 simple explanation of what is zone.js and ngZone and how it is related to CD 16:00 when is it worth implementing optimization 22:58 CD strategies ( OnPush ) 27:00 Async pipe (how it is related to observable rx.js and CD and OnPush)

[@arijitghosh6378]

That was amazing. I learned so much from this talk. Really great explanations and the accompanying demos helped a lot. Thank you!

[@xucongzhan9151]

Really nice, clean and informative talk. Not only the content, but the slide deck itself is also so clean, using properly sized monospace font (and also my fav Consolas XD) instead of regular fonts or blurry screenshots, and has good contrast so very easy to read. Very well done! Learned a lot!

[@ajaykushwaha6137]

This is one of the best explainations in the whole seminar!

[@muktibarakoti6823]

This is great! Thanks for delivering this wonderful learning material!

[@emiliovazquez2068]

Really a great presentation...very clear and concise...

[@prabhakark1677]

Thanks! You are a great teacher.

[@joeyvico]

Awesome session!

[@branislavstojanovic9596]

Thanks! Nice and informative talk!

[@WilsonManzanoS]

Excellent speech! Very useful content.

[@JohannGarrido]

PURE GOLD

[@bhavesh2952]

very well explained sir :)

[@masterlup]

Amazing talk. Thank you :)

[@ciprianlupsa557]

Excelent speech! Thanks for this valuable information :D

[@eXpertise7]

Great video, I'm surprised. Christian is explaining good, and he takes short breaks between sentences and it isn't too fast explaining.

[@feelwang]

Async pipe assumes you have the observable ready in the template yet the template is quite not a nice place to deal with JS entity so at the end you must deal with observable prior to async pipe which is in the plate of rxjs which is not that easy to master

[@groot451]

Where can we get this demo application which he shown in this video ?

[@felipe.drumond]

What if I opt for using the async Pipe on the observable multiple times? Will that cause the change detection to be triggered multiple times too? In that case would be a lot better to call the change detector wherever you need.

[@xucongzhan9151]

The async pipe calls markForCheck(), not detectChanges(), which essentially just marks the component as dirty but *not* triggering detectChanges() at once. So no, it will not cause change detections to be triggered too many times. It will just mark the component to be checked in the next run of detectChanges() and wait for the next round of ApplicationRef.tick().

[@prabhakark1677]

Just curious if you have a presentation on NgRx as well

[@GameMasters825]

Where is the code? Dammmm