Nice vídeo! I'm studying to become an Angular Developer (planning to become full stack later) for some time now, I've created a few projects and I learn new things every single day. There are some struggles between university and my own studies, but I believe the journey is well worth it. Angular is a really complete and fun framework to work with! I'm really excited for the new possibilities with Angular 17 now, thank you guys for your work!
This is differing component loading. This is useful, but what I would really want is to defer javascript loading. So, here, placeholder would be the template populated with the data but not interactive: I would add a parameter to `@defer` which would specify a data loading function. This special case of @defer would use the component own template so it wouldn't need a placeholder. The data would be loaded by a separate function defined inside the component and identified in the `@defer` declaration .e.g `@defer (provider myDataProvider)`. The effect of this @defer would be to load the template using the provided data, and associate the javascript this component later (hydration). Maybe this could be use as a foundation for resumability since the only thing needed at this point would be to allow this defer to be defined in the server, and to allow the state to be serialized and passed to the javascript once it loads to initialize its state instead of using hydration which would be the only option on the client. This is just an idea I am throwing out there, I don't use Angular now but I am really interested in the direction it's taking. If Angular could take the `integrated/all batteries included` solution to the next level i.e. server/meta-framework, and fix the performance issues, I think Angular would become instantly the most popular framework.
I start to fall in love with this, (after my initial repulse), however I don't quite get the example of the combined defer conditions (3:46). Are those joined by AND or OR?
@If is conditional rendering but the code for the component is still included with the bundle. @defer will only ship the code to the browser when it is loaded. So conditional rendering vs lazy loading
The other day I updated an application from Angular 14 to 17, I reduced a lot of code and loading times with signals and the new supports. Totally changed the placeholder and spinner part through interceptors and services, I put it aside and used the new deferred view blocks, a great addition is more simpler, descriptive and versatile.
It's amazing, but we will have to wait a couple years until we will be able to use this features, cause most of the projects won't update right away :)
Will this allow for a complete replacement of the old method of implementing lazy loading at the route level? Or are there cases where the old method still needs to be used?
There will still be times where you need to lazy load an entire route and times where you might want to only use deferrable views. Having both options increases your flexibility and gives you more tools to implement your solutions.
I see that defer is mainly used to reduce bundle size etc. but can it also be used just to delay rendering for heavy components? Is that an intended use or is there a better approach?
Check out our website → goo.gle/AngularDev
👉 👈 👇 awesome 🤙
You guys deserve all the awards coming in
It's nice to see a fellow Nigerian brother who also loves Angular, like anywhere I look in Nigeria it's just react.
Nice vídeo! I'm studying to become an Angular Developer (planning to become full stack later) for some time now, I've created a few projects and I learn new things every single day. There are some struggles between university and my own studies, but I believe the journey is well worth it. Angular is a really complete and fun framework to work with! I'm really excited for the new possibilities with Angular 17 now, thank you guys for your work!
Angular is becoming 🔥
All the puns are great
Amazing to see the progress of Angular and make us devs life easier, many thanks.
Woohooo, I knew I was making the right choice when I chose Angular over React. :p
An example snippet of the component fixture wouldn't have hurt in this, otherwise very informative, video ;)
@defer is awesome. Using it everywhere
This is differing component loading. This is useful, but what I would really want is to defer javascript loading. So, here, placeholder would be the template populated with the data but not interactive: I would add a parameter to `@defer` which would specify a data loading function. This special case of @defer would use the component own template so it wouldn't need a placeholder. The data would be loaded by a separate function defined inside the component and identified in the `@defer` declaration .e.g `@defer (provider myDataProvider)`. The effect of this @defer would be to load the template using the provided data, and associate the javascript this component later (hydration). Maybe this could be use as a foundation for resumability since the only thing needed at this point would be to allow this defer to be defined in the server, and to allow the state to be serialized and passed to the javascript once it loads to initialize its state instead of using hydration which would be the only option on the client. This is just an idea I am throwing out there, I don't use Angular now but I am really interested in the direction it's taking. If Angular could take the `integrated/all batteries included` solution to the next level i.e. server/meta-framework, and fix the performance issues, I think Angular would become instantly the most popular framework.
angular is the best framework :)
Does anyone know when the @error shows? I guess it's just if there's an error loading the deferred component?
If there is an error while loading the component when using @defer
nice
Great feature, funny jokes and excellent punch line. Thanks Angular team for enhancing this amazing platform
loved the placeholder and viewport joke haha
I start to fall in love with this, (after my initial repulse), however I don't quite get the example of the combined defer conditions (3:46). Are those joined by AND or OR?
the lady makes such a wonderful explanation, i wish everybody teach like that, thanks
He not she
@@Satyam-IN i don't get it, what do you mean?
@@haroldpepete Gender transition. From he to she.
@@Satyam-IN ah ok, i didn't know that, i have my doubts but i wasn't sure about it, now everything is clear
@@haroldpepete Well I'll always opposed for gender transition. this people are just lost in this world.
amazing feature!! i loved it
What's the difference between defer and if
defer loads your component on demand from the server, so it does not have to be part of your initial bundle.
@If is conditional rendering but the code for the component is still included with the bundle. @defer will only ship the code to the browser when it is loaded. So conditional rendering vs lazy loading
what a commendable job that you done appreciate very much 👏👏👏👏👏👏
I just love this feature ❤
It is possible to be like this @defer(condition).match(@loading => loading, @success => success, @error => error)
The other day I updated an application from Angular 14 to 17, I reduced a lot of code and loading times with signals and the new supports. Totally changed the placeholder and spinner part through interceptors and services, I put it aside and used the new deferred view blocks, a great addition is more simpler, descriptive and versatile.
Looks great!
It's amazing, but we will have to wait a couple years until we will be able to use this features, cause most of the projects won't update right away :)
I think angular is the best frontend framework.
Does 'prefetch when !!val' also work, or do we have to use explicit booleans?
This is amazing🎉 great work
I can't wait until I Angular!
Thanks for sharing!
This is huge!
Hi! Are you planning to give up RxJs in the future?
Nice 🙂
Will this allow for a complete replacement of the old method of implementing lazy loading at the route level? Or are there cases where the old method still needs to be used?
There will still be times where you need to lazy load an entire route and times where you might want to only use deferrable views. Having both options increases your flexibility and gives you more tools to implement your solutions.
I see that defer is mainly used to reduce bundle size etc. but can it also be used just to delay rendering for heavy components? Is that an intended use or is there a better approach?
Yes you can use it for that reason, too 👍
Don't like the new block syntax
What do you prefer?