Deferrable Views - New Feature in Angular 17
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- Level up your Angular skills with my Advanced Courses 🚀
bit.ly/discounted-course-bundle
Discover the easy way to load parts of your website only when needed with Angular 17's new feature: Deferrable Views. This video shows you how this cool tool helps to load your website faster and smoother, making your coding life simpler. Great for both new and experienced Angular users. Watch, learn, and share if you like what you see. Let's get started with Angular 17's Deferrable Views!
More about Deferrable Views on the Official Angular Documentation:
angular.dev/guide/defer
🕒 Time Codes:
00:00:00 - Intro;
00:00:45 - Lazy Loading before Angular 17;
00:03:06 - @defer block in action;
00:04:44 - @placeholder, @loading, and @error blocks;
00:07:32 - Deferrable Views Triggers;
00:12:15 - Chunk Prefetching;
00:14:40 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#angular #ng #typescript #webdevelopment - แนวปฏิบัติและการใช้ชีวิต
Level up your Angular skills with my Advanced Courses 🚀
bit.ly/discounted-course-bundle
💡 Short Frontend Snacks (Tips) every week here:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
IMO Angular 17 is game changer, but when we are talking about bumping current projects to version 17 - using all new features and benefits of Angular 17 will require a lot of refactoring, including both templates and components (deferrable views, signals, etc.)
Angular is backwards compatible so you can start with building new components with signals and slowly migrate older ones over time, algular already has great reactivity using MVVM model, even if it comes with some overhead. Algular team also works on making NoZone providers so you can disable zone for specific components rather then going all or nothing on refactoring whole application.
Yeah, the Angular 17 is absolutely fantastic :) Regarding the part of refactoring, I agree that the migration will take some work, unfortunately. However, here I agree with @yankotliarov9239. Angular doesn't force you to migrate to all these awesome features immediately to benefit from Angular 17. You can do it incrementally because all these new features are backward compatible. Also, the Angular team invests a lot of effort in schematics to automate migrations where possible :)
@@DecodedFrontend do you mind creating videos on such schematics for Angular 17 if there are any?
@@Panossa just run ng update and you will be told what to do to update
One of the best videos on Deferrable Views, thank you!
Glad it was helpful!
That prefetch on idle is amazing
Why
@@hanshans9902 Imagine you have a website with endless scrolling. You only load the first 10 elements, but can load the next 10 as soon as the first are loaded. The initial page load is quick but you don't have to wait for long for additional content.
Or imagine you have a website with different category buttons, like for shopping. You know most users will click on category A when visiting the website, thus you can start loading that as soon as the main page is loaded.
This was awesome! Thank you, Dmytro.
One of the best videos on Deferrable Views, thank you! 😊😊
This is a really cool feature and I can't wait to try this one and other new features in our new project at work! Thank you so much for the video!
Thanks for your hardworking and sharing your experience
❤
Great explanation! Thank you very much!
Great explanation. Thanks for the video!
Very good and detailed explanation! As usual :) Thanks!
Thanks for another useful video, Dmytro) Glad to see you again
Thanks, Gagik! 😊
This is a very hands-on approach to showing new features, love it! Very concise and ripe with examples. Thanks!
I've been missing you lately. It was worth the wait. Great video as usual.
Yeah... I had s short pause. Thank you! :)
Thank you for creating such an awesome content on Angular
What the game changer, that's awesome feature
Дякуєм за хороший як зажди розбір Ангуляру!
Thanks a lot! Your video is awesome! 💛💙
Always a good thing hearing you explain concepts to us.
Thanks @Dymtro
Glad that it was helpful and thank you for your comment ;)
Awesome🤩
Nice job!
Well done!
Very well explained
new video 🎉🎉🎉
Thank you so much, your explanation and immediate example are very helpful.
Give me crystal clear for the idea what it should be used for.
For me this is brilliant feature offer from Angular team.
Thank you so much for this feedback, I appreciate it so much 🙏🏻
super awesome
Thank you for this video
You are welcome 😊
on interaction is also a great feature!
Super
Love the explanation and new feature. One question for you.
Is it possible using @defer inside of structural directives?
If I have a for loop of 3 heavy components, can I defer them and load them one by one when the first one is finished? :)
If we wrap all this logic in a component will it be the same
example:
in an app the loading and error part might be the same in all situations
Great in-depth explanation, deferrable views removed a lot of headaches. I guess idle browser API is not the last one they’re to integrate under the hood. P.S. hope the spinner approach dies in favor of skeleton 😂
Thank you! I also think that some new triggers and prefetchers will be introduced.
And yeah, I also like more the approach with placeholders rather than spinners 😉
Thanks for the clear explanation.
I have a doubt. U said placeholders, loading error are eagerly loaded.
But in projects we use again another component inside the error and loading blocks
Then we lose the lazy loading right. So how can we achieve even loading the blocks content as lazy loaded.
Defferable views are a bit like Signals (Angular 16 feature) for chunks of template. And also they reminded me a server-side rendering concept using PHP
and react is still stuck with some random hooks from 2018
hi thank you epic video. my question is is angular deferable views is like react suspense i use angular,react and vue and i will see any equivalent property for other framework?
Hey, Thanks for making this video. How about nested @deferrable view? How does that work? it will be helpful for many people if you make a video on that. Thanks.
What a great lesson. Can you give me the source of this?
Do to know any best practices on how to use those? For example should we still use lazy loaded routes or will deffereable views just replace them?
Hi! Thanks for your question. Some best practices are:
- Use placeholder blocks to avoid flickering in your UI;
- Try to avoid applying of the @defer block for the components that appear immediately on the loading screen.
- Make sure that lazy component isn't being used anywhere else in your app and doesn't have a reference via @ViewChinld, etc. In this case, it will end up in the main bundle.
- Make sure that the components inside the @defer block are standalone. NgModule-based components won't be lazy loaded.
- If you are sure that the user will be interacting with the lazy component, consider using prefetching.
Regarding the router lazy loading. Deferrable views are not supposed to replace router-based lazy loading. It is absolutely fine to combine those 2 approaches because both of them solve slightly different use cases.
I hope my comment was helpful :)
In regards to seo. As long as there is no user interaction required to load this should be visible for google, right?
It also works with any blocks, i use it with )
What would happen, if I have wrappted ComponentA within a @defer block in ComponentB, but in ComponentC, I don't wrap ComponentA in a @defer block. Would ComponantA split from the main-chunk or not? Should I wrapp all same components with @defer to archeve a split from the main-chunk?
Hi! Thanks for your question. In your case the componentA will become a part of main bundle because it has a reference in the component that will be eagerly loaded (ComponentC)
Fc from thailand
is this aplication SSR? I have a problem with @loading , doesn't show the content inside loading for example
@defer {
}
@placeholder {
Waiting...
}
@loading {
}
@error {
Couldn't access this component
}
and the loading component it is shown only if i let outside @loading block
Isn't Deferrable Views in developer preview?
Good question. I heard also that it was in dev preview but probably not anymore because I didn't find any mentions about that on the official documentation here - angular.dev/guide/defer
I like this feature, but I am worried that Angular templates will soon start looking like php wordpress template with a lot of logic embedded in the views.
Hello
i encountering one issue in @defer view when i am pass @defer(on viewport) {} it's says following error
"viewport" trigger with no parameters can only be placed on an @defer that has a @placeholder blockngtsc(-995002)
i force fully need to add @placeholder to get rid of that error.
can you please explained why this error is getting and for what reason ?
thank you so much for your amazing angular content @decodedFronted
Please share your thoughts on
Isn't Deferrable Views in developer preview?
Good question. I heard also that it was in dev preview but probably not anymore because I didn't find any mentions about that on the official documentation here - angular.dev/guide/defer