Deferrable Views - New Feature in Angular 17

[@DecodedFrontend]

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

[@o_glethorpe]

That prefetch on idle is amazing

[@hanshans9902]

Why

[@Panossa]

@@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.

[@vladislavamarkova8379]

One of the best videos on Deferrable Views, thank you!

[@DecodedFrontend]

Glad it was helpful!

[@MrKOHKyPEHT]

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.)

[@yankotliarov9239]

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.

[@DecodedFrontend]

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 :)

[@Panossa]

@@DecodedFrontend do you mind creating videos on such schematics for Angular 17 if there are any?

[@aj.arunkumar]

@@Panossa just run ng update and you will be told what to do to update

[@littleoddboy]

no one could teach deferrable views in angular better.

[@atulkamble557]

Beautifully explained! This is going to be very useful.

[@AfifAlfiano]

What the game changer, that's awesome feature

[@aliroshan5773]

Thanks for your hardworking and sharing your experience ❤

[@shubhamgoel7703]

awesome feature thanks sensei 😍

[@DecodedFrontend]

🙏

[@Panossa]

This is a very hands-on approach to showing new features, love it! Very concise and ripe with examples. Thanks!

[@gonzalocorchon6509]

I've been missing you lately. It was worth the wait. Great video as usual.

[@DecodedFrontend]

Yeah... I had s short pause. Thank you! :)

[@rahulmukherjee4700]

Fantastic explanation

[@abdelhamidouanes9941]

Bravo !! Big thanks

[@psk2166]

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.

[@DecodedFrontend]

Thank you so much for this feedback, I appreciate it so much 🙏🏻

[@innocentmazando3808]

Always a good thing hearing you explain concepts to us. Thanks @Dymtro

[@DecodedFrontend]

Glad that it was helpful and thank you for your comment ;)

[@timurbirgalin4704]

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!

[@ichr]

Thank you very much, another really great explanation and use cases! :)

[@MayuraaSripalan]

Great explanation! Thank you very much!

[@GuillermoArellano]

This was awesome! Thank you, Dmytro.

[@oleksandrvorovchenko8674]

Very good and detailed explanation! As usual :) Thanks!

[@teothe]

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

[@MichielKikkert]

on interaction is also a great feature!

[@artemyavorskyi5865]

Дякуєм за хороший як зажди розбір Ангуляру!

[@pinkmobina]

Thank you for creating such an awesome content on Angular

[@OnoshkoAndriy]

Great explanation. Thanks for the video!

[@MrVinodkumar92]

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.

[@gagiksimonyan3782]

Thanks for another useful video, Dmytro) Glad to see you again

[@DecodedFrontend]

Thanks, Gagik! 😊

[@stickyamp5996]

I always get confused about how angular projects, and frontend in general is deployed/retrieved by the use , i mean, there is a server that sends chunks and the user receive those chunks and the browser generate the js to create the spa functionality, but then comes in server side rendering and SSG and it gets a bit confusing to get the whole picture of what is happening, do you have a video talking about that? or could you do one? I like your advanced-oriented way of making angular videos.

[@saniyaonmars]

new video 🎉🎉🎉

[@kashifalikhan4420]

Very well explained

[@serhiilytvyn8753]

Thanks a lot! Your video is awesome! 💛💙

[@wafel_dev]

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?

[@DecodedFrontend]

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 :)

[@jaspernygaard9500]

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? :)

[@aj.arunkumar]

super awesome

[@vOnez212]

Nice job!

[@AndreyKarpovich]

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

[@vibhukumar7327]

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.

[@mtvspec]

а как выглядит в этом подходе конфигурация роутера? или все компоненты сразу импортируются, а дальше с помощью @defer решается когда их загружать с сервера?

[@DecodedFrontend]

Роутер не участвует в этом процессе вообще. Триггеры блока @defer инициализируют ленивую загрузку.

[@CodeZakk]

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?

[@halynaua]

Awesome🤩

[@ankurmishra8543]

If we use Heavycomponent in import section of app component, then is it not contained in bundle size of app component? If yes then how defer is benifit?

[@flywheel56]

Well done!

[@XINTSUAI]

How the @loading, @placeholder etc... knows which component they are waiting, since I can have multiple instances of the same "section"?

[@loko1944]

In regards to seo. As long as there is no user interaction required to load this should be visible for google, right?

[@TuấnTàiĐặng-c7p]

What a great lesson. Can you give me the source of this?

[@CodeSample360]

Thank you for this video

[@DecodedFrontend]

You are welcome 😊

[@azelsky]

what is the difference between "when" and "prefetch when"? Why do I need "prefetch when" if I could load content by just "when"?

[@NoName-1337]

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?

[@DecodedFrontend]

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)

[@chris.p-dev]

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 😂

[@DecodedFrontend]

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 😉

[@eglimaja2549]

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

[@anon5992]

and react is still stuck with some random hooks from 2018

[@orjerby1]

Isn't Deferrable Views in developer preview?

[@DecodedFrontend]

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

[@jonatabiondiJsLover]

Super

[@MK-we4dl]

It also works with any blocks, i use it with )

[@mitterkit]

Fc from thailand

[@danieldouglas210]

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.

[@programandoprogramas-pp4565]

One of the best videos on Deferrable Views, thank you! 😊😊

[@orjerby1]

Isn't Deferrable Views in developer preview?

[@DecodedFrontend]

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