Angular 17 Defer - Improve Performance in Your Application

Рет қаралды 7,812

Күн бұрын

Angular 17 defer is a new feature which allows us in simple way to improve the performance of the application. Angular 17 defer allows us to load certain component later as an additional chunks based on different conditions.
TIMESTAMPS
0:00 Introduction
0:18 Angular deferrable views
1:07 Angular basic defer
2:46 Angular defer triggers
5:43 Combining defer triggers
6:07 Angular defer when condition
7:01 Angular defer vs ngif
7:58 Prefetch in Angular defer
9:37 Angular defer full notation
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

Пікірлер: 39

@michaelharrington5860 7 ай бұрын

Very powerful feature. Thanks for the explanation

@MonsterlessonsAcademy 7 ай бұрын

Glad it was helpful!

@respostasimples 7 ай бұрын

great job, thanks!

@MonsterlessonsAcademy 7 ай бұрын

Glad you liked it!

@user-ym7gg5ki6l 7 ай бұрын

Thanks for the explanation

@MonsterlessonsAcademy 7 ай бұрын

You are welcome!

@austinZen8800 7 ай бұрын

Thanks!

@MonsterlessonsAcademy 7 ай бұрын

Thank you so much for your support. It means a lot to me!

@alexanderkomanov4151 7 ай бұрын

Спасибо большое!

@bibin24x7 4 ай бұрын

Very good explaination

@MonsterlessonsAcademy 4 ай бұрын

Thanks!

@francogutierrez2257 Ай бұрын

¡Gracias!

@MonsterlessonsAcademy Ай бұрын

Thank you so much for your support. It means a lot to me!

@1654045 7 ай бұрын

I like u video so much!

@MonsterlessonsAcademy 7 ай бұрын

Glad to hear that!

@LarsRyeJeppesen 7 ай бұрын

So in a master detail you can lazy losd details bit by using defer a d button click. Insa e

@user-ep2vn2wb5m 7 ай бұрын

I thought it would be a nice alternative to bypass the ssr but after testing I don't see any improvement yet. I peppered my components with @defer blocks in the hope of reducing Initial Chunk Files but quite the opposite happened. The more @defer I put, the more the main.js file gains in size. It's still very useful for displaying skeletons.

@MonsterlessonsAcademy 7 ай бұрын

I didn't try defer with ssr yet

@NunoFreitasBotelhoo 7 ай бұрын

How about when you have 2 defer inside the same template. Will create two chunks i assume, but how does it know what placeholder/loading/error to use? Great video!

@Simao-xk1ye 7 ай бұрын

In a scenario where multiple @defer directives are used, each @defer should have a corresponding @placeholder block immediately following it. The @placeholder block that follows a @defer block is the placeholder for that specific deferred content. eg. @defer(on viewport) { } @placeholder { Loading some component... } @loading { ... } @error{ error } @defer(on viewport) { } @placeholder { Loading another component... } @loading { ... } @error{ error }

@asadrahman6123 7 ай бұрын

@@Simao-xk1ye i think he meant this @defer(on viewport) { @defer(on viewport) { } @placeholder { Loading another component... } @loading { loading } @error{ error } } @placeholder { Loading component... } @loading { loading } @error{ error } will this work ?

@MonsterlessonsAcademy 7 ай бұрын

Simao answer is perfect. You create multiple @defer with multiple @placeholder blocks for each of them. It will create separate chunks for every defer.

@prabhuprasad3679 6 ай бұрын

Hi, Thanks for the explanation. I have a couple of questions: 1 - Is it possible to revert back to the original state when the condition is undone. For eg - the view is rendered when the code enters the viewport but when the user scrolls up and the the code is removed from the viewport, the view stays 2 - in case the view doesn't get rendered for some reason, can we re-render them somehow?

@MonsterlessonsAcademy 6 ай бұрын

I didn't try this cases

@user-iy5ol1vj5c 6 ай бұрын

As angular 17 doesnt have module, how we can handle lazy load module routing ? all the components are stand alone does it impact performance of existing application after migrating to 17 ? any idea?

@MonsterlessonsAcademy 6 ай бұрын

I already covered that kzfaq.info/get/bejne/hKx6lbuBm6nNaWw.htmlsi=dXl2xXJGoOik9ZB9

@xxRAP13Rxx 8 күн бұрын

Nice video! I take it at 8:50, the Load button does nothing if you press the Show button first because the Show button did the loading instead?

@MonsterlessonsAcademy 7 күн бұрын

Yes

@anutaNYC 5 ай бұрын

I have major issue with timing in angular I have a dialog with a form and need to fetch the data for that form before it's opened wondering if this will help.

@MonsterlessonsAcademy 5 ай бұрын

Kind of. But you can do the same without defer.

@anutaNYC 5 ай бұрын

@@MonsterlessonsAcademy I figured it out with subscribe but all these new things I haven't applied yet, and it's scary

@LarsRyeJeppesen 7 ай бұрын

@derfer combined with ssr.. does that even make sense?

@MonsterlessonsAcademy 7 ай бұрын

I didn't try that yet but no? because on backend we want to get the full prepared page. so all defered blocks should just be skipped

@LarsRyeJeppesen 7 ай бұрын

@@MonsterlessonsAcademy yeah agree