Deferrable Views - New Feature in Angular 17

hi today I'm going to show you everything you have to know about the brand new feature from angular 17 called defer views from this video you will learn how to reduce their bundle size for your angular application even further how to improve their user experience for your angular app and also we will a little bit have a look how everything works under the hood my name is m mki and I regularly post different angle tutorials on my YouTube channel and also I create video courses if you want to level up your angular skills links will be in the video description but we are getting started with defer [Music] views before angular 17 we had a couple of ways to reduce bundle size for our applications the first one is a well-known rotor based lazy loading you just take a road and in the load component property you can Define this simple notation which instructs angular that the JavaScript code for this component has to be chunked out from the main application bundle and loaded only when this road is activated however sometimes our apps are designed in such a way so that lazy chunk has to be loaded based on some certain component state or event instead of the angular rotor State and it is also possible even with the older angular version however the solution would be so simple and obvious because it involves some in-depth knowledge like um knowledge about es6 Dynamic Imports Dynamic component creation and it also requires some additional work from our side the simplest solution might look like this one where you can distinguish two faces chunk loading and component activation phase the loading stage would look like the usage of angular Dynamic import which at build time instructs angular bundler that this component has to be chunked out from the main bundle and at run time the same piece of code will load this Chunk from the endpoint and uh from there we can destructure already their component class however it is not enough just to load their component code right we need to dynamically created in order to see it on the page and this is uh something that we do during the second phase which involves also multiple steps like defining the container element uh in the template then we have to get reference to this container and finally we can uh create dynamically the component instance and already now it is uh quite a lot of code I would say and here I'm not even talking about things like showing the loader during the CH clothing or error handling and many other things we have to care about in real use cases so this new defer views feature addresses exactly this use case and starting with angular 17 the same functionality you can Implement by wrapping your heavy component that you want to Lazy load with this brand new defer blog just like that and check this out before and after now you have to write much less code it is declarative and intention of this code is extremely clear if you want to investigate the compiled code of this component with def varable view block you can see that during the compilation phase the angular compiler transforms this notation into a bunch of functions the first function is the defer function which performs all the magic you will see later in this video and one of the arguments you can see here is called defer deps function which actually loads their lazy JavaScript chunk using their Dynamic JavaScript import it is very similar what we have done a minute ago by the way I don't want to dive deeper into the implementation of the defer block it is quite complex things the only thing I will say that there happens something very similar that we did a minute ago but on the lower level using the internal angular API and data structure like T views and L views but let's continue and learn what else bring this feature because the functionality of defer views goes Way Beyond the simple scenario we currently have for example most probably before the lazy component is loaded and activated we would like to show some placeholder to give the user some visual feedback that something is going on right and it is very straightforward to achieve with the dedicated placeholder block the content defined inside this blog will be shown before the lazy content is activated in my case everything happens quite fast but if I go to the network Tab and emulate a slow Network then you might notice that before the component is activated I see this placeholder right here another scenario when the placeholder is useful is PR preventing their view from flickering because when the lazy component appears it can cause their page layout shift right and it might be quite irritating for your users and the placeholder can prefill the space until the actual content appears in a similar way you can handle a use case when the lazy chunk couldn't be loaded in this case you can show user the template that uh you can Define inside the error block right there and to test this Behavior you can disable the network during the chunk loading and then the user will see this cor corresponding uh template sometimes you want to notify users specifically about the Chun loading for that there is another blog called loading that works very similar to previous blogs just the content defined inside the curly braces will be shown during this phase and by the way the content defined in those secondary blocks they are eagerly loaded and will be bundled into the main bundle so keep in mind that but I can predict your another confusion regarding loading versus placeholder blocks well the difference between them indeed sometimes can be confusing because when you Lo load and activate the defer block simultaneously as I currently do then the loading State immediately overlaps the placeholder and you might think that those two states are interchangeable however those are two different stages and the chunk loading stage is a part of the defer block activation stage which might not happen immediately but with some delay and before we trigger the loading we have to show the placeholder and this is how we slowly move to the concept like defer view triggers defer view triggers are instructions for the defer block of when the lazy chunks have to be loaded and activated out of the box angular offers a special syntax and bench of the buil-in triggers those triggers allow you to implement most popular us user experience patterns for your angular apps for example you can delay the activation of the defer block by some fixed amount of time using that timer trigger then you can see if you go to the browser and check you can see that now I have a 5 Seconds delay during this 5 seconds I see the placeholder and only when we start to loading this lazy chunk I see the loading template and then the lazy uh component has been activated and rendered on the page uh by the way sometimes loading of the bundle happens too fast which might be again cause of some uh flickering to solve this issue you can use the additional uh parameters for the loading block like after and minimum for example using the parameter minimum you can define a minimum amount of time uh while the loading placeholder has to be visible even though the corresponding JavaScript chunk has been already loaded also using the after parameter you can handle a slightly different but still very useful use case and you can show their loading template only when request takes really some significant amount of time and you can notify the user that yes the loading is processing it takes a bit more time that we expected but we still loading and there you can kindly ask them to be patient and wait another couple of seconds another very useful trigger is called viewport and it handles one of the most like popular use case for defer use features it is when you have some very heavy component that during the initial page loading located outside the fault and is not visible on the initial screen and in this case you can intract angular to activate the defer block only when it enters the viewport okay and for that as I said you can use the viewport trigger so let me open my browser in the network Tab and there you will not see their lazy chunk right now because this component is not located on the initial loading page but when I start to scroll and the Deferred block enters the viewport then you can see that the lazy chunk is loaded and successfully rendered on the page alternatively you can uh activate the Deferred block when some another uh Dome element enters the viewport and then you can just take any Dome element you need if it is already exist or create if this element doesn't is not created yet and then you can Define on this Dome element their template reference and then simply provide it as an argument for the viewport trigger just as simple as that and now when this element enters the viewport it will be it will instruct angular to load chunk that is created for exactly this defer block and as I said there are much more built-in triggers you can just go to the brand new and GL recommendation and g.de and check it out I will leave the link in the video description so you can easily find it but what if you read the Commendation and you don't see the trigger that corresponds your needs in this case if you encounter this situation you can create your own and the custom trigger is represented by the keyword when and the value for the this keyword has to be just a Boolean value true or false for example you could have something like button clicking on which one we change the state of some property from false to true and when we change the value for the when keyword to true it instructs angular that this defer block has to be loaded so now you see that nothing happens until I click the button and only after that I see that the lazy content has been successfully loaded that's already so cool but def varable views allow you to go one step further to improve the user experience of your angular applications for example sometimes we have a scenario when lazy loaded featur and component is not needed immedi immediately but it is very likely that the user will need it very soon in this case we can preload this feature in the background and activate when we need it when some trigger will be fired right and to achieve that you can use the prefetch keyword and instruct angular when exactly prefetching has to be started the builtin trigger for uh this this is Idle browser uh State this state means that uh browser will start to prefetch the resource as soon as possible when it has no tasks to handle so it means that when comes time for lazy component activation the loading stage will be obviously skipped because it happens in the background and the component will appear on the page instantly because JavaScript code for this l C feature is already preloaded and ready for usage or again if it is not an option for you and you have some custom logic or you want to have some custom Logic for Source preloading likewise with triggers you can always write your own custom preloader so to say and again likewise with triggers you provide just a true or false value and when it's true their preloading will be started so as you can see the defer views is very powerful and makes angular the framework with one of the most powerful lazy loading mechanism on the market all right guys thanks for watching and if you enjoyed this video please support my channel by sharing this video in your social media share it with your colleagues and friends in the working chats And subscribe yeah subscribe to this channel because I constantly publish angular tutorial many of them are really unique and in depth so it is definitely worth it also check out my video courses about UL they really helped hundreds of people already to level up their NBL skills and level up their career as well otherwise I wish you productive we ahead stay safe and see you in the next [Music] video

Channel: Decoded Frontend

Views: 14,456

Keywords: deferrable views, angular deferrable views, angular defer block, angular 17 features, angular 17, angular tutorial, angular 17 new features, angular lazy loading components, angular lazy loading, front end development 2024, ui

Id: FCcD8CEGty0

Length: 15min 31sec (931 seconds)

Published: Tue Jan 30 2024