{"id":60354,"date":"2024-02-27T18:30:43","date_gmt":"2024-02-27T13:00:43","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=60354"},"modified":"2024-02-28T18:38:42","modified_gmt":"2024-02-28T13:08:42","slug":"exploring-angular-17-unlocking-performance-with-deferrable-views","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/exploring-angular-17-unlocking-performance-with-deferrable-views\/","title":{"rendered":"Exploring Angular 17: Unlocking Performance with Deferrable Views"},"content":{"rendered":"<p class=\"graf graf--p\">In the fast-paced world of web development, delivering seamless user experiences and lightning-fast performance is paramount. Enter <strong>@defer<\/strong>, a hidden gem in Angular\u2019s arsenal that empowers you to achieve both with its on-demand loading magic.<\/p>\n<p class=\"graf graf--p\">Imagine a feature-rich application brimming with functionality. Each component adds value, but some might not be relevant to every user interaction. Loading everything simultaneously bogs down the initial experience, especially on slower connections. This is where @defer steps in, acting as a strategic delayer.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">@defer<\/strong> doesn\u2019t load heavyweight content until the user explicitly demands it, be it through a click, scroll, or any other custom trigger you define. This translates to:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Blazing-fast initial load times:<\/strong> Users, even with complex apps, encounter a lean and speedy first impression.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Enhanced user experience:<\/strong> No more waiting for components they might never use. @defer delivers content exactly when and where it\u2019s needed.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Improved maintainability:<\/strong> Break down your code into modular, deferrable blocks for better organization and easier management.<\/li>\n<\/ul>\n<h3 class=\"graf graf--h3\"><strong class=\"markup--strong markup--h3-strong\">Think of @defer as a\u00a0toolbox:<\/strong><\/h3>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Triggers:<\/strong> Define the user interactions or custom logic that initiate content loading.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Placeholders:<\/strong> Keep users informed with temporary placeholders while content is on its way.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Loading indicators:<\/strong> Provide visual cues to avoid confusion during loading processes.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Error Handling: <\/strong>This handles errors that might occur during the loading process. You can display error messages or fallback content.<\/li>\n<\/ul>\n<h3 class=\"graf graf--h3\"><strong class=\"markup--strong markup--h3-strong\">Now Comes the Question of How to use @defer<\/strong><\/h3>\n<p class=\"graf graf--p\">Imagine a chart component with multiple features, With <strong class=\"markup--strong markup--p-strong\">@defer,<\/strong> you can load that component lazily without any boilerplate code.<\/p>\n<p class=\"graf graf--p\">The only thing you need to take care of is that the component should be a <strong class=\"markup--strong markup--p-strong\">Standalone component.<\/strong><\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*m_VErqYGV0cLpaxi\" width=\"675\" height=\"222\" data-image-id=\"0*m_VErqYGV0cLpaxi\" data-width=\"1040\" data-height=\"342\" data-is-featured=\"true\" \/><\/figure>\n<p class=\"graf graf--p\">Now, imagine that the component is a heavy one and might take some time to load. So we can introduce a Loading component that can manage the Loading state gracefully:<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">See example below:<\/strong><\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*T3diI5IzG3KZs_hl\" width=\"709\" height=\"233\" data-image-id=\"0*T3diI5IzG3KZs_hl\" data-width=\"1040\" data-height=\"342\" \/><\/figure>\n<p class=\"graf graf--p\">Consider another scenario where we might have to show a placeholder to give a <strong class=\"markup--strong markup--p-strong\">better user experience <\/strong>to users, so here comes @placeholder.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">@placeholde<\/strong>r is an optional block that declares content to show before the defer block is triggered<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*fBZLxbSmrm1jbPxy\" width=\"717\" height=\"266\" data-image-id=\"0*fBZLxbSmrm1jbPxy\" data-width=\"1040\" data-height=\"386\" \/><\/figure>\n<p class=\"graf graf--p\">There might be some Scenarios where the Loading of the defer block may fail. The reason may be due to network connectivity issues or the internet going off; Then we can use <strong class=\"markup--strong markup--p-strong\">@error<\/strong> block to handle such scenarios.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*3nMYxdGO1buR88hb\" width=\"709\" height=\"233\" data-image-id=\"0*3nMYxdGO1buR88hb\" data-width=\"1040\" data-height=\"342\" \/><\/figure>\n<h3 class=\"graf graf--h4\"><strong class=\"markup--strong markup--h4-strong\">Understanding triggers in\u00a0@defer<\/strong><\/h3>\n<p class=\"graf graf--p\">Deferrable views in Angular 17 empower you to optimize initial load times by only fetching content when truly needed. But how do you decide when to load this content? Here come defer view triggers.<\/p>\n<p class=\"graf graf--p\">So, there are multiple types of Triggers we will go through One by One :<\/p>\n<p><strong class=\"markup--strong markup--blockquote-strong\">On Idle: <\/strong>This is the default behavior with a defer block. Will trigger the deferred loading once the browser has reached an idle state<\/p>\n<p><strong class=\"markup--strong markup--blockquote-strong\">On Viewport: <\/strong>Loads content when the specified element enters the viewport.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*_5zCN5FtZWygfccs\" width=\"701\" height=\"291\" data-image-id=\"0*_5zCN5FtZWygfccs\" data-width=\"1040\" data-height=\"432\" \/><\/figure>\n<p>Alternatively, you can define a template reference variable within the same template as the @defer block. This variable refers to the element observed for entry into the viewport and is then passed as a parameter to the viewport trigger.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*w-w2sdl6OS8i792e\" width=\"703\" height=\"292\" data-image-id=\"0*w-w2sdl6OS8i792e\" data-width=\"1040\" data-height=\"432\" \/><\/figure>\n<p><strong class=\"markup--strong markup--blockquote-strong\">On interaction<\/strong><\/p>\n<p>The deferred block will be triggered upon user interaction with the specified element, either through click or keydown events.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*NiN14YL8t7kOdXr6\" width=\"705\" height=\"293\" data-image-id=\"0*NiN14YL8t7kOdXr6\" data-width=\"1040\" data-height=\"432\" \/><\/figure>\n<p><strong class=\"markup--strong markup--blockquote-strong\">On hover: <\/strong><span style=\"font-size: 1rem;\">Hovering over the trigger area initiates deferred loading, triggered by <\/span>mouseenter<span style=\"font-size: 1rem;\"> and <\/span>focusin<span style=\"font-size: 1rem;\"> events.<\/span><\/p>\n<p><strong>On Immediate<\/strong>: <span style=\"font-size: 1rem;\">Immediate triggering initiates the deferred load without delay. The defer chunk begins fetching immediately when the client finishes rendering.<\/span><\/p>\n<p><strong>On Timer:<\/strong> <span style=\"font-size: 1rem;\">The<\/span> timer(x)<span style=\"font-size: 1rem;\"> will activate after a specified duration, where \u2018x\u2019 represents the time interval. This duration is required and can be specified in <\/span>milliseconds<span style=\"font-size: 1rem;\"> (ms) or <\/span>seconds<span style=\"font-size: 1rem;\"> (s)<\/span><\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*pdIj49wkrSXU52c6\" width=\"702\" height=\"231\" data-image-id=\"0*pdIj49wkrSXU52c6\" data-width=\"1040\" data-height=\"342\" \/><\/figure>\n<p><strong class=\"markup--strong markup--blockquote-strong\">On Custom Condition: <\/strong><span style=\"font-size: 1rem;\">Imagine a scenario where you wish to <\/span><strong class=\"markup--strong markup--p-strong\" style=\"font-size: 1rem;\">defer<\/strong><span style=\"font-size: 1rem;\"> the loading of a component only under certain conditions. For example, in a chat application, you might want to load a chat history component exclusively when the user is authenticated<\/span><\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*qD_OJzZJ9El3e6Ig\" width=\"709\" height=\"233\" data-image-id=\"0*qD_OJzZJ9El3e6Ig\" data-width=\"1040\" data-height=\"342\" \/><\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Official Documentation:<\/strong> <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/angular.io\/guide\/defer\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/angular.io\/guide\/defer\">https:\/\/angular.io\/guide\/defer<\/a><\/p>\n<h2 class=\"graf graf--h4\">Conclusion<\/h2>\n<p class=\"graf graf--p\">By mastering deferrable views, you empower yourself to build high-performance Angular applications that delight your users. Experiment, learn, and share your knowledge with the community!<\/p>\n<p>Check out our other blog posts for more insights. If you still have any questions, comment and join the discussion.<\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>In the fast-paced world of web development, delivering seamless user experiences and lightning-fast performance is paramount. Enter @defer, a hidden gem in Angular\u2019s arsenal that empowers you to achieve both with its on-demand loading magic. Imagine a feature-rich application brimming with functionality. Each component adds value, but some might not be relevant to every user [&hellip;]<\/p>\n","protected":false},"author":1595,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[1439],"tags":[5652,5653],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60354"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1595"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60354"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60354\/revisions"}],"predecessor-version":[{"id":60526,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60354\/revisions\/60526"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}